.transcript-container {
	color: #000000;
	flex-grow: 1;
	overflow: auto;
	padding: 16px;
	position: relative;
}

.transcript-group {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	margin: 0 72px 8px 0;
}

.transcript-group.type-2,
.transcript-group.type-3 {
	align-items: flex-end;
	margin: 0 0 8px 72px;
}

.transcript-line {
	background-color: var(--cb-bg-bubble-light);
	border-radius: 8px 8px 8px 8px;
	box-shadow: 0px 2px 2px -1px #00000033;
	color: var(--cb-bubble-font-color-dark);
	font-size: var(--cb-font-size);
	margin-bottom: 4px;
	min-width: 72px;
	padding: 12px 12px 12px;
	position: relative;
	word-break: break-word;
}

.transcript-line[data-timestamp]:before {
	display: block;
	color: var(--cb-bubble-font-color-gray);
	content: attr(data-timestamp);
	font-size: 0.8em;
	margin: -4px -2px 4px;
}

.type-2 .transcript-line[data-timestamp]:before {
	content: attr(data-timestamp) " (automatically sent)";
}

.type-2 .transcript-line,
.type-3 .transcript-line {
	background-color: var(--cb-bg-bubble-dark);
	color: var(--cb-bubble-font-color-light);
	border-radius: 8px 8px 8px 8px;
}

.type-2 .transcript-line[data-status]:after,
.type-3 .transcript-line[data-status]:after {
	bottom: 0;
	color: var(--cb-bubble-font-color-dark);
	font-family: "Material Icons";
	font-size: 1.2em;
	position: absolute;
	right: -16px;
}

.type-2 .transcript-line[data-status=sent]:after,
.type-3 .transcript-line[data-status=sent]:after {
	content: "\e876";
}

.type-2 .transcript-line[data-status=delivered]:after,
.type-3 .transcript-line[data-status=delivered]:after {
	content: "\e877";
}


.media-preview {
	min-width: 136px;
	min-height: 64px;
}

.media-preview .loader-container {
	background-color: transparent;
}

.media-preview .loader {
	--loader-size: 28px;
	--loader-thicc: 4px;
	--loader-color: #7d7d7d;
}
.media-preview button {
	background-color: #e8e8e8;
    border-radius: 20px;
    box-shadow: inset 0px -2px 2px -1px #00000033;
	column-gap: 4px;
    color: #7d7d7d;
	display: flex;
    font-size: var(--cb-font-size);
    font-weight: 600;
    line-height: 1.5em;
    margin-bottom: 4px;
    position: relative;
    padding: 8px 12px;
	transition: all .25s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.media-preview button:hover {
	background-color: #efefef;
	box-shadow: inset 0px -2px 2px -1px #0000003b, inset 0px 1px 2px -1px #0000003b;
	color: #3d3d3d;
}
.media-preview button:active {
	background-color: #ffffff;
    box-shadow: inset 0px 0px 12px -6px #000000a3;
}

.media-preview button:before {
	font-family: "Material Icons Outlined";
	font-size: 1.5em;
	font-weight: normal;
	text-align: center;
 }
.media-preview.type-image button:before {
	content: "\e3f4";
 }
.media-preview.type-video button:before {
	content: "\e04b";
 }

.media-line.thumbnail {
	cursor: pointer;
	max-width: 200px;
}
.media-line.thumbnail img {
	display: block;
	width: 100%;
}

.media-line.full {
	align-items: center;
	background-color: #00000066;
	border-radius: 0;
	cursor: pointer;
	display: flex;
	left: 0;
	height: 100vh;
	justify-content: center;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 999;
}

.media-line.full:after {
    border: 1px solid transparent;
    color: #ffffff;
    content: "\00D7";
    cursor: pointer;
    display: block;
    font-size: 2rem;
    height: 32px;
    line-height: 25px;
    position: absolute;
    right: 24px;
    top: 24px;
    width: 32px;
}

.media-line.full img {
	cursor: default;
	max-height: 80%;
	max-width: 80%;
}

.date-line {
	color: #707070;
	display: flex;
	font-size: 0.8rem;
	font-weight: bold;
	margin-bottom: 8px;
}
.date-line:before,
.date-line:after {
	align-self: center;
	border-bottom: 1px solid #b0b0b0;
	content: "";
	display: block;
	flex-grow: 1;
	margin: 0 24px;
}


/*****
Scroll To Bottom button
*****/
.scroll-to-bottom {
	margin-top: -32px;
    position: relative;
	right: 20px;
	text-align: right;
}

.scroll-to-bottom button {
	background: #efefef;
	border: 1px solid transparent;
	border-radius: 100%;
	box-shadow: 0 0 9px -7px #000000;
	color: var(--cb-bg-main-dark);
	font-size: 0;
	height: 32px;
	opacity: .5;
	position: relative;
	text-transform: uppercase;
	transition: opacity .25s ease-in-out;
	width: 32px;
}

.scroll-to-bottom button:hover {
	opacity: 1;
}

.scroll-to-bottom button:before,
.scroll-to-bottom button:after {
    border-bottom: 2px solid #3d3d3d;
    content: "";
    display: block;
    top: 15px;
	position: absolute;
    width: 10px;
}


.scroll-to-bottom button:before {
    left: 7px;
    transform: rotate(45deg);
}

.scroll-to-bottom button:after {
    right: 7px;
    transform: rotate(-45deg);
}@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./transcript.woff2") format("woff2"), url("./transcript2.woff") format("woff");
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}
/* roboto-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./transcript2.woff2) format('woff2'), url(./transcript.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* roboto-cyrillic-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./transcript3.woff2) format('woff2'), url(./transcript4.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* roboto-greek-ext-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAXMABIAAAAACeAAAAVwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGiYbIBw2BmAANAhUCYM8EQwKg2iDSgsQABIUATYCJAMcBCAFgnQHIAyCSRt8CAieB2WbnmbLuYAwwpK8+iIe4P3r89wHDZaakNWCmB8R66SEWr+ILhpijnTqf6QAyyF8GVAOAPOWtmNg6llFXANTaQXCgXMubThOj6JRPCJsEWW3o1/4wX411uruvta/9FF8Zz50qenu3hVxmf4QIi1dRSzhkcR0SqA1QoiwzI2uAUbffgtBpA0YCssEQRChiaaAgMpAFvDsmKQshIEEer1l/u1J0Sbi8P6OJsQc3VHd6N0nlHe1MAhFbvPNcXJVWKNNekPqCYVx/lj8nqMi5BY4Pd6hectSY5E2Lll8SMf/HJXfEKEOfCtEMjEFBEHtpSkbjBK4aB1MIEjT/t9z/+W3j8FgVyeNWdDn7wh7b19l7pQoyFW8FXcx+P9D4NE2ErMMk4kskmVMCiwyG5ZhhyC7qZ19JoMatwj00/I0GG/uexT/v7K+Ysx9JXVwiRoC1yHR9VGAy9QQcXVQbqOGmOvEACWZm5EnyicLnfULjlggc0ldeRXQEqImnlS9kL8XAZndegKyuixM77OP24/Mzw9QQ7Kfha4v9OEOadjJ0qBYxN896pRbZI6ly/PS82Bs9iiYPpuaWJZEw83lXbg5G5JRslr2VFWPDtfbPBryeqZk5eKg/CqRD2Oz8tcvgJMiFi4RC6PWb9fnkzx74cWAeELYJFCSObI1tnxBfqwo2lPppazn26eGKDWU3KLMvOioppPNX6y4euc5FBq4y6Emd99OYa6zfpnpUhjE4Y/qoWtWQ4tIHr845ZA6bDc+AOSaR/sb6c9Otrh6uj3cUdDVKESNWgCK/GzxKQiLFKJeTz+QgzZKTIUcA2Nz9h2ppBhtbSQxfsjAtk4xoD1oes5gXYPe8UWmx+HjwQeNPfi2Wv/952vDpV/80Njw3WfWXv5IL3662ucz8dd9se78QkPd6ihDH61ZfS/s/KK0fjE+sgih+YDL5pz1vnH249tjfOAcLqZOTdvY/3jL1Hy3vqvcu358ODj2/etmVHfcdW+1t2X6R08H6p3BTzz87uDo6/H/vD/2scffaEf/ThphsXX6jLtDvp7cx6bvFUbnpWbFBWgOekJEip6LgFz63wtE+H/fXrpM++P7m8wAgZk/NJnacWXJLOW1rWO16C5ouY7SRE5T8x0iJ7MpntZyQJtPS2tuKXZpKqNf728OLK1FiJj72rq99z4Ho7G9hTQm0sqlhiEBKlWXfTDq1zbQcaP1HosN1zo/TqWGAGGywdQJhaSfHo9wDdfhs78cJKBZ5glRluQQEG030P7t9IdL+03+rRhRIHjxxwF7IsRHYeWXv0f991G5d9GJAKUIBPIT/jUpF/wa9f/Ccm9YiMnjjap8MPxDeomeuKM1ffn/fWHktrCSBT3iY20i0fZ0BBSOAgtJiYMAUDBoOigYaTtuMB4PJjiY2lFfMDPaqZe2rfYTKVcYVUK+QIPiwY175iFi5Yq4Em50vIyNq4cbYFLL2Fyqwbe4aq5Kx+XgZMhZco180ZCv3b5iqtyXD9VCUsquRpcNT74CH3LW95hzWKkvV3KxoHLNhF5fxylXMNkCLk6rio/XJGRzZWquGi/JysTM3sUM+4wfckMBveM4zKV1U1VT4QMTqQI/IFSPuDBgopvEnkF6u7kQ4gJdWIvWjkeivDg/OWNxRqSXxIolJclBKluW+uwutDVlWXtxjIc9y9fPPiBAxIqR2jR/O1ZmRftILVjVU5bo4zjbmDxi6XLWfHj/+sMns5ZFfyP9jLWD9pU5CFi/MC+Fo8Vo/+XhjzuFH9jQ3a32p2/nQ0fiTr60oFFwFV18KrXSKp2m/+AsuvlQKqXRIVOncITG9B6cRRdfSqt0RP8hVHTzrZOuHdwJDHdwJwA=) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAATgAA4AAAAABVwAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABRAAAAB8AAAAmAEYABkdQT1MAAAFkAAAAIAAAACBEcExrR1NVQgAAAYQAAAA2AAAANpMNggRPUy8yAAABvAAAAE0AAABgk1Pg+GNtYXAAAAIMAAAAKQAAADQAER+gZ2FzcAAAAjgAAAAMAAAADAAIABNnbHlmAAACRAAAARQAAAEUnMv0r2hlYWQAAANYAAAANgAAADb8atJ6aGhlYQAAA5AAAAAfAAAAJAq6BadobXR4AAADsAAAABwAAAAcE+3/e2xvY2EAAAPMAAAAEAAAABAA0AE9bWF4cAAAA9wAAAAgAAAAIAI3AwluYW1lAAAD/AAAAM0AAAF0GlU5EHBvc3QAAATMAAAAEwAAACD/bQBkeNpjYGRgYuBjgAAxII8NiEGQCcjnAWEgmwEABhIATQAAAQAAAAoAEgAUAAFERkxUAAwAAAAAAAQAAAAA//8AAAABAAAACgAkACYABERGTFQAHmN5cmwAImdyZWsAImxhdG4AIgAAAAAACAAAAAAAAAAA//8AAAAAeNpjYGZpY5zAwMrAwDqL1ZiBgVEeQjNfZEhjYmBgAGIocGBABe7+/u4MDvK+8r5sDP8YGNLYZzExKDAwzgfJsVixbmBQAEJmAPBXCrcAAAB42mNgYGACYmYgFgGSjGCahUEBSLMAIZAv7/v/P4R8sBMszwAAVmAGzQAAAAABAAIACAAC//8ADwAFAGQAAAMoBbAAAwAGAAkADAAPAAAhIREhAxEBAREBAyEBNQEhAyj9PALENv7u/roBDOQCA/7+AQL9/QWw+qQFB/19Anf7EQJ4/V4CXogCXgAAAgB2/+wFCQXEABEAHwAAARQCBCMiJAInNTQSJDMyBBIVJxACIyICBxUUEjMyEjcFCZD++LCs/vaTApIBC6yvAQuQv9C7ttED07m6zAMCqdb+waipATnOadIBQqup/r/VAgEDARX+6/Zr+/7hAQ/9AAIAbwRwAskF1gAFAA0AAAETMxUDIwEzFRYXByY1AZF0xN9Z/t6oA1BJsgSUAUIV/sMBUlt7VTtfu////jL/7AVPBdYAJgAERgAABwAF/cMAAAABAAAAAiMS6JlwgF8PPPUAGQgAAAAAAMTwES4AAAAA1QFS9Pob/dUJMAhzAAAACQACAAAAAAAAeNpjYGRgYM/5x8PAwOn5S/qfF6cBUAQVsAMAb4UEbwADjABkAAAAAAAAAAAB+wAABYAAdgMgAG8Fxv4yAAAAKQApACkAKQBhAH4AigABAAAABwCPABYAVAAFAAEAAAAAAA4AAAIAAiQABgABeNpdjgNyAwAURF/tXqAcdVQbgzo2hrFtXSYHyemyMeabu8A2SdZYWd8BgjDOV9gnOM5XOSQ7ztfm+utz+QYXtMf5Jsd0x/khXnr8UKJMhyoZUqSpc849t9xJzjFQkqTIk1BlokiMa2Vf5CXnuKdXtWGVoCar0pSPc61OiaisLtOUFA3yRKjiH+7VyFCiOMS85o4HXviYMnhZuL9a+iBUSZl3biStoVxrUpbFNE2oKlElpWmejHoJitRIyG6wYuKHP+x45K+G+Ld9LnwzhgAAAHjaY2BmAIP/WQwpDFgAACofAdEA) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* roboto-greek-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./transcript4.woff2) format('woff2'), url(./transcript3.woff) format('woff');
  unicode-range: U+0370-03FF;
}

/* roboto-vietnamese-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./transcript5.woff2) format('woff2'), url(./transcript5.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* roboto-latin-ext-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./transcript6.woff2) format('woff2'), url(./transcript6.woff) format('woff');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* roboto-latin-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./transcript7.woff2) format('woff2'), url(./transcript7.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}.chatbox-container {
	--cb-bg-main: #e0eaf2;
	--cb-bg-bubble-dark: #047fb2;
	--cb-bg-bubble-light: #efefef;
	--cb-bubble-font-color-dark: #3d3d3d;
	--cb-bubble-font-color-light: #efefef;
	--cb-bubble-font-color-gray: #b0b0b0;
	--cb-scrollbar-color: #707070;
	--cb-font-size: 12px;
}

.chatbox-container {
	background-color: var(--cb-bg-main);
    border: 1px solid #ffffff;
    border-radius: 4px;
	color: #3d3d3d;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	height: 100%;
	max-width: 600px;
	min-width: 332px;
	position: relative;
}

.chatbox-container ::-webkit-scrollbar-track {
	margin: 8px 0;
}

.chatbox-container ::-webkit-scrollbar-thumb {
	background-color: var(--cb-scrollbar-color);
}

.chatbox-top {
	background-color: #ffffff;
	padding: 4px 8px;
	position: relative;
}

.chatbox-top .chat-actions-button {
	font-size: 0;
	position: absolute;
	top: 4px;
	right: 4px;
}

.chatbox-top .chat-actions-button:before {
	content: "\e5d4";
	font-family: "Material Icons";
	font-size: 24px;
}

.chat-actions-menu {
	background: #ffffff;
	border-radius: 4px;
	box-shadow: rgb(0 0 0 / 20%) 0px 5px 5px -3px, rgb(0 0 0 / 14%) 0px 8px 10px 1px, rgb(0 0 0 / 12%) 0px 3px 14px 2px;
	display: flex;
	flex-direction: column;
	padding: 8px 0;
	position: absolute;
	top: 8px;
	right: 12px;
	z-index: 100;
}

.chat-actions-menu .menu-item {
	cursor: pointer;
	display: block;
	padding: 8px 20px;
}
.chat-actions-menu .menu-item:hover {
	background-color: #efefef;
}


.chatbox-middle {
	background: linear-gradient(to top, var(--cb-bg-main) 90%, #ffffff);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow: hidden;
}

.chatbox-bottom {
	align-items: flex-end;
	column-gap: 8px;
	display: flex;
	max-height: 150px;
	padding: 16px;
}

.chatbox-input[contenteditable] {
	background-color: var(--cb-bg-bubble-light);
	box-shadow: 0px 2px 2px -1px #00000033;
	border-radius: 16px;
	color: var(--cb-bubble-font-color-dark);
	flex-grow: 1;
	font-size: var(--cb-font-size);
	line-height: 20px;
	height: 100%;
	overflow-y: auto;
	padding: 8px 16px;
	word-break: break-word;
}

.chatbox-input[contenteditable]:focus {
	box-shadow: inset 0 0 4px 0 #000000;
	outline: 0;
}

.chatbox-input[contenteditable]:empty:before {
	content: "Send a message...";
}
.chatbox-input[contenteditable]:focus:empty:before {
	content: "";
}

.chatbox-send {
	background-color: var(--cb-bg-bubble-dark);
	border-radius: 100%;
	box-shadow: 0px 2px 2px -1px #00000033;
	color: var(--cb-bubble-font-color-light);
	font-family: "Material Icons";
	font-size: 0;
	height: 40px;
	min-width: 40px;
	transform: rotate(-15deg);
	width: 40px;
}

.chatbox-send:before {
	content: "\e163";
	font-size: 20px;
}

.chatbox-send:active {
	box-shadow: inset 0 0 3px 2px #666666ab;
}@media screen and (max-width: 500px) {
	.chatbox-container {
		--cb-font-size: 16px;
		border-radius: 0;
		margin-top: 1px;
	}
}* {
	box-sizing: border-box;
	font-family: "Roboto", Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

button {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
}

#root {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.chatbox-container-window {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	height: 100%;
	padding: 8px;
}

/* Scroll bars */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-thumb {
    background-color: #efefef;
    border-radius: 12px;
}