@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap');

*,
:after,
:before {
	/* 	box-sizing: content-box !important; */
}

img {
	height: auto;
	/*     max-width: 100%; */
}

a {
	color: #2F4858;
}

a:hover {
	color: #489bdf;
	;
	text-decoration: none !important;
}

a:focus {
	/* color: #489bdf;; */
	text-decoration: none !important;
}

.font-awesome-unicode {
	font-family: 'Font Awesome 5 Free' !important;
	font-style: normal !important;
	font-weight: bold !important;
}

.link {
	color: #489bdf;
}

.link:hover {
	color: #2FC6E1;
}

.clickable,
.click {
	cursor: pointer;
}

.blue {
	color: blue;
}

.teal {
	color: teal;
}

.green {
	color: green;
}

.red {
	color: red;
}

.orange {
	color: orange;
}

.gray,
.grey {
	color: gray;
}

.silver {
	color: silver;
}

.purple {
	color: purple;
}

.white {
	color: white;
}

.auto-width {
	width: auto !important;
}

.inline-block {
	display: inline-block !important;
}

.container-fluid {
	max-height: calc(100vh - 51px);
	overflow: hidden;
}

.no-overflow {
	overflow: hidden;
}

.no-background {
	background-color: transparent !important;
}

.clean-list {
	list-style: none;
}

.nowrap {
	white-space: nowrap !important;
}

.wordwrap {
	word-wrap: break-word;
}

.noborder {
	border: 0 !important;
}

.nopad {
	padding: 0 !important;
}

.noshadow {
	box-shadow: none !important;
}

.open {
	display: block;
}

.slim {
	margin: 0 !important;
}

.mr-0 {
	margin-right: 0px !important;
}

.ml-0 {
	margin-left: 0px !important;
}

.p-0 {
	padding: 0px;
}

.pl-0 {
	padding-left: 0px !important;
}

.pr-0 {
	padding-right: 0px !important;
}

.p-5 {
	padding: 5px;
}

.mr-xs {
	margin-right: .5rem;
}

.mr-1 {
	margin-right: 1px;
}

.mr-2 {
	margin-right: 1rem;
}

.mb-1 {
	margin-bottom: 1rem;
}

.pad {
	padding: 1em !important;
}

.pad-top {
	padding-top: 1em !important;
}

.pad-left {
	padding-left: 1em !important;
}

.pad-right {
	padding-right: 1em !important;
}

.half-pad {
	padding: .5em !important;
}

.frame {
	margin: 1em !important;
}

.frame-top {
	margin-top: 1em !important;
}

.frame-right {
	margin-right: 1em !important;
}

.frame-left {
	margin-left: 1em !important;
}

.frame-bottom {
	margin-bottom: 1em !important;
}

.top-spacer {
	margin-top: .5em !important;
}

.relative {
	position: relative;
}

.tooltip_templates {
	display: none;
}

.tabbed_container {
	margin-top: 1em;
}

.emoji_no_drop {
	display: inline-block;
	text-align: left;
	min-width: 300px;
	max-height: calc(100vh - 220px);
	overflow-y: auto;
}

.emoji_no_drop>.emoji_groups {
	display: inline-block;
	background-color: white;
	text-align: left;
}

.emoji_no_drop>.emoji_groups>.emoji_buttons {
	display: inline-block;
	width: 100%;
}

.emoji_no_drop>.emoji_groups>.emoji_buttons>.emoji_group_button.active {
	border-bottom: 2px solid white !important;
	padding-bottom: 5px !important;
}

.emoji_buttons {
	border-bottom: 1px solid rgb(0, 140, 186);
}

.emoji_group_button {
	color: silver;
}

.emoji_group_button:hover {
	cursor: pointer;
	color: rgb(0, 140, 186);
}

.emoji_group_button.active {
	color: rgb(0, 140, 186);
	border-top: 1px solid rgb(0, 140, 186);
	border-left: 1px solid rgb(0, 140, 186);
	border-right: 1px solid rgb(0, 140, 186);
	border-bottom: 1px solid white;

	-moz-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;

	padding: 3px 6px 0 6px !important;
}

.emoji {
	cursor: pointer;
}

/* -------------------- Stefano Reusables */

/* -------------------- Variables */
:root {
	--icyblue: #1DC1DF;
	--primary: #4CA4EE;
}

.primary-text {
	color: var(--primary);
}

.primary-bg {
	background: var(--primary) !important;
	border-color: var(--primary) !important;
}

.icyblue-text {
	color: var(--icyblue);
}

.icyblue-bg {
	background: var(--icyblue) !important;
	border-color: var(--icyblue) !important;
}

.mb-15 {
	margin-bottom: 15px !important;
}

.overflow {
	overflow: visible !important;
}

.p-2 {
	padding: 3px 6px !important;
}

.w-100 {
	width: 100% !important;
}

.primary-bg:hover {
	transition: all .2s;
	background: #387CB4 !important;
}

.message_action_buttons {
	font-size: 14px;
	padding: 9px;
}

.dropdown-col div {
	display: flex;
	flex-direction: column;
}

.tag {
	box-sizing: border-box;
	font-size: .7em !important;
}

.tag:hover {
	transition: all .4s;
	background-color: var(--icyblue) !important;
	color: rgb(79, 79, 79) !important;
}

.far {
	border: none !important;
	;
}

.contact_search_wrapper {
	display: flex;
}

.contact_search_field {
	max-height: 36px;
}

/* .btn-primary {
	padding: 8px;
} */
.btn-primary:hover {
	background: #4CA4EE;
	transition: all .3s;
	border-color: #4CA4EE;
}

.live-msg-more:hover {
	transition: all .3s;
	background: lightgray;
}

.wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}

.wrap-right {
	display: flex;
	justify-content: right;
	align-items: center;
}

tbody tr {
	box-sizing: border-box;
	max-height: 52px !important;
}

tbody tr+tr {
	height: 52px !important;
	vertical-align: none;
}

tbody>tr>td {
	vertical-align: middle !important;
}

.contact_search_table_header {
	width: 2% !important;
}

/* Fix for horizontal scroll on contact details */
#contact_content td {
	word-break: break-word;
	width: 10%;
}

.table-no-header tr {
	height: 52px !important;
}

/* Accounts edit page table was breaking without this */
td:first-child {
	word-break: normal
}

textarea {
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	padding-left: 15px;
	padding-top: 8px;
	max-height: 100%;
	overflow-y: auto;
	width: 100%;
	outline: none;
	border-width: 1px;
	/* 	resize: none; */
	border-color: transparent;
	box-sizing: border-box;
	height: 60px;
	line-height: 18px;
	font-size: 1.1em;
	background: #8080802a;
}

textarea::placeholder {
	display: flex;
	line-height: 18px;
	align-items: center !important;
	height: 100%;
}

textarea:focus {
	transition: all .5s;
	border-width: 1px;
	border-color: #4CA4EE;
	/* 	border-right-color: transparent; */
}

.media_count {
	margin-left: 10px;
}

.message_total_characters {
	margin-right: 10px;
}

.icon-wrap {
	height: 60px;
	color: rgba(107, 107, 107, 0.884);
	box-sizing: border-box;
	border-top: 1px solid rgba(211, 211, 211, 0.548);
	border-bottom: 1px solid rgba(211, 211, 211, 0.548);
	border-left: 1px solid rgba(211, 211, 211, .548);
	width: 55px;
	cursor: pointer;
	font-size: 1.5em;
	display: flex;
	justify-content: center;
	align-items: center;
}

.icon-wrap:hover {
	background: rgba(211, 211, 211, 0.548);
	color: #4CA4EE;
	/* 	border-color: #4CA4EE; */
	transition: all .4s;
	cursor: pointer;
}

.icon-wrap:hover i {
	transition: transform .3s;
	transform: scale(1.1);
}

.icon-wrap.icon-head {
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
}

.icon-wrap.icon-head:hover {
	/* 	border-right: 1px solid #4CA4EE; */
}

.icon-wrap.icon-tail {
	border-right: 1px solid rgba(211, 211, 211, 0.548);
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
}

.send-icon {
	height: 60px;
	background: #4CA4EE;
	color: rgba(107, 107, 107, 0.884);
	border: 1px solid #4CA4EE;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	width: 55px;
	box-sizing: border-box;
	font-size: 1.5em;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	border-left-style: none;
}

.send-icon i {
	padding-right: 5px;
}

.send-icon:hover {
	background: rgb(48, 107, 155);
	color: #4CA4EE;
	border-color: rgba(48, 107, 155, 0.548);
	transition: all .2s;
	cursor: pointer;
}

.send-icon:hover i {
	transition: transform .3s;
	transform: scale(1.3);
}


tr {
	color: #545454
}

tr a {
	color: #545454;
}

th {
	color: #000;
}

/* Flex Reusable classes */
.flex {
	display: flex;
}

.f-jc-sb {
	justify-content: space-between;
}

.flex-jc-e {
	display: flex;
	justify-content: flex-end;
	flex: 1;
}

.flex-ai-c {
	display: flex;
	align-items: center;
}

.flex-r {
	width: 100%;
	display: flex;
	flex-direction: row;
}

.f-wrap {
	flex-wrap: wrap;
}

.gray {
	color: #808080 !important;
}

#contact_content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#contact-search-container span {
	display: flex;
	align-items: center;
	max-height: 36px;
}

#contact-search-container {
	display: flex;
	margin-top: 10px;
}

#contact-search-container input,
span,
select {
	margin: 0px 5px 0px 0px;
}

.line {
	content: '';
	display: block;
	width: 100%;
	background: #4CA4EE;
}

.multiselect-container {
	position: relative;
}

/* .accordion-submenu>a:hover .accordion-submenu>a::after {
	color: green !important;
	border: 1px solid lightgray;
} */

/* .live-tabs div li .active::after {
	content: '';
	height: 2px;
	background: #4CA4EE;
	width: 100%;
} */

/* Max width: 905px tabs start overflowing */

.live-tabs {
	width: 100%;
	height: 43px;
	margin-bottom: 0px;
	padding-left: 0px;
}

.animated-link .line::after {
	content: '';
	display: block;
	height: 2px;
	margin-bottom: -2px;
	color: #4CA4EE !important;
}

.live_menu .active {
	/* height: 50px; */
}

.animated-link {
	display: inline-block;
	max-height: 50px;
	text-decoration: none;
}

.animated-link::after {
	content: '';
	display: block;
	width: 0;
	height: 2px;
	background: #4CA4EE;
	transition: width .3s;
}

.chat-tab.active::after {
	width: 100%;
}

.animated-link:hover::after {
	width: 100%;
	transition: width .3s;
}

.live-col-left {
	display: flex;
	flex-direction: column;
}

.live-col-left-header {
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid lightgray;
	padding-left: 10px;
}

.live-col-left-header div {
	position: absolute;
	right: 0px;
}

.live-col-left-tabs {
	/*
	display: flex;
	justify-content: center;
	align-items: center;
*/
	height: 43px;
	text-align: center;
	box-shadow: 0 4px 2px -2px gray;
	margin-bottom: 2px;
}

@media (max-width: 1390px) {
	.live-col-left-tabs {
		font-size: .8em;
	}
}

.live-col-left-tabs ul {
	list-style: none;
	/*
	display: flex;
	justify-content: center;
	flex-direction: row;
*/
	vertical-align: middle;
	/* 	width: 100%; */
	/* 	padding: 0px; */
	align-items: center;
	/* margin-left: -20px; */
	/* 	position: relative; */
}

.live-col-left-tabs ul div {
	/*
	display: flex;
	align-items: center;
*/
	/* 	position: absolute; */
	top: 47%;
	transform: translateY(-50%);
	max-width: 70px;
}

.live-col-left-tabs ul div:hover {
	color: var(--icyblue);
}

.live-col-left-tabs li {
	padding: 10px;
	cursor: pointer;
}

.st-3x {
	font-size: 1.2em !important;
}

.min-pad-icon {
	padding: 8px !important;
}

.posturl-input {
	border: none;
	width: 350px;
	background: transparent;
}

/* .fa-edit {
	background: transparent !important;
	color: black !important;
} */
.header {
	font-family: 'Montserrat';
	font-weight: 'bold';
	/* font-weight: 700; */
}

/* .btn.btn-stm, .btn-primary.btn-stm > .fa-edit {
	color: black;
	font-size: 1.1em;
	border: none;
	background: transparent;
}
.btn.btn-stm, .btn-primary.btn-stm > .fa-edit:hover {
	transition: all .4s;
	background:transparent !important;
	transform: scale(1.1);
} */
.fa-box {
	color: #fff;
	font-size: 1.1em;
	border: none;
	/* background: transparent; */
}

.btn-danger.btn-stm:hover {
	color: #AA4A24;
	/* transform: scale(1.3); */
	transition: all .4s;
	background: transparent;
}

/* tbody tr td:last-child {
	text-align:right;
	padding-right:20px !important;
}
tr th:last-child {
	padding-right:25px !important;
	text-align: right;
} */
.table-no-header tbody tr td:last-child {
	text-align: right !important;
	padding-right: 25px;
}

.slim-text {
	font-size: 10px;
	font-weight: 400;
	line-height: 1.1;
}

.fa-cog {
	color: #000 !important;
}

.fa-cog:hover {
	color: gray !important;
	transition: all .2s;
}

.live_chat {
	position: relative;
	padding: .3em;
	height: 64px;
	width: 100%;
	display: flex;
	cursor: pointer;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #EAEAEA;
}

.live_chat:hover {
	background: rgba(211, 211, 211, 0.616);
	transition: all .3s;
}

.live_chat.active {
	border-bottom: 1px solid rgba(76, 165, 238, 0.451);
	background-color: #8080801f;
	border-right: 7px solid #4CA4EE;
	padding-right: 0px;
	color: #000 !important;
}

.live_chat.active>div:first-of-type {
	margin-right: 0px;
	padding-right: 12px;
}

.vcard-cell-element {
	color: #000;
	display: flex;
	font-size: 1.25rem;
	align-items: center !important;
	margin-bottom: 3px;
}

.vcard_cell {
	height: 150px !important;
	width: 215px !important;
}

.remove_vcardvalue:hover {
	opacity: .7;
}

.audio_cell {
	height: 75px !important;
	width: 200px !important;
	position: relative;
}

.vcard-cell-element>p {
	font-size: .9em;
	white-space: nowrap;
	overflow: hidden;
}

.audio-cell-element {
	position: relative;
}

#media-vcard-library>li,
#media-document-library>li,
#media-video-library>li {
	border: none !important;
	/* width: 155px; */
	padding: 0px;
}

/* #media-vcards .btn-success {
	 padding: 8px 2px;
} */
#media-client div.cell {
	border-radius: 6px !important;
}

#chats_content {
	height: calc(100vh - 143px);
}

#StartLiveChatForm .message_characters {
	/* 	margin-top: -6px; */
	margin-right: 0px;
}

#StartLiveChatForm .message_total_characters {
	/* 	margin-top: -6px; */
	/* 	margin-right: 50px; */
}

.start_search_btn:hover {
	border: 1px solid gray !important;
	transition: all .3s;
	background: #1DC1DF !important;
}

@media (max-width: 1200px) {
	#chats_container {
		height: calc(100vh - 50px);
		overflow-y: hidden;
		overflow-x: visible;
	}

	#chats_content {
		height: calc(100vh - 180px);
	}
}

#chats_content {
	margin-top: 2px;
}

.load_more_padding {
	padding-bottom: 55px;
}

#contact_container {
	/* width: 50%; */
}

#messages_container {
	width: 50%;
}

.max_message_container {
	width: 100% !important;
}

.live_chat_section {
	background-color: #fff;
}

.live_chat_section_header {
	margin-right: 15px;
	padding-right: 15px;
	border-bottom: 1px solid lightgray;
	height: 35px;
	display: flex;
	align-items: center;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	background: #fff;
	z-index: 9;
}

.live_messages_wrapper {
	margin-top: 30px;
	overflow: hidden;
}

.scheduled_messages_wrapper {
	margin-top: 15px;
	overflow: hidden;
}

.live_chat_section_header .st-icon+.st-icon {
	position: absolute;
	right: 15px;
}

.live_chat_section .st-icon {
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border: 1px solid rgb(0, 0, 0);
	border-radius: 5px;
}

.live_chat_section_header span:hover {
	transition: all .2s;
	border-color: #4CA4EE;
}

.live_chat_section_header span:hover i {
	transition: all .2s;
	color: #4CA4EE;
}

.live_chat_title {
	margin: 0 auto;
	padding: 6px 12px;
}


.slab {
	/*
    border-style: solid;
    border-width: 1px;
    border-color: #d8d8d8;
*/
	margin-bottom: 2.0rem;
	padding: 1.25rem;
	background: #F1F0F0;
	/* #f2f2f2; */
	color: #777;
	position: relative;

}

.slab.callout {
	/*
	    border-style: solid;
	    border-width: 1px;
	    border-color: #d8d8d8;
*/
	background: #1B3179;
	/* #3884F7; */
	/* #ecfaff; */
	background: #147efb;
	/* #ecfaff; */
	color: white;
	/* #333; */
}

.slab.warn {
	background: #EF8441;
	color: white;
}

.slab.success {
	background: #01d64a;
	color: white;
}

foundation.min.css .slab.radius {
	border-radius: 3px;
}

.slab.round {
	border-radius: 1.3em;
}

.slab.incoming.speech {
	display: inline-block;
	/* float: left; */
	min-width: 55px;
	margin-left: 20px;
	padding: 5px 12px;
	margin-bottom: 25px;
	margin-top: 10px;
}

/* .slab.incoming.speech:after{
	content: "";
	position: absolute;
	bottom: -15px;
	left: 25px;
	border-width: 15px 15px 0 0;
	border-style: solid;
	border-color: #F1F0F0 transparent;
	display: block;
	width: 0;
} */

.slab.outgoing.speech {
	/* display: inline-block; */
	float: right;
	min-width: 122px;
	margin-right: 20px;
	padding: 5px 12px;
	margin-bottom: 25px;
	margin-top: 10px;
}

/* .slab.callout.outgoing.speech:after{
	content: "";
	position: absolute;
	bottom: -15px;
	right: 25px;
	border-width: 15px 0 0 15px;
	border-style: solid;
	border-color: #1B3179 transparent;
	display: block;
	width: 0;
} */

/* .slab.success.outgoing.speech:after{
	content: "";
	position: absolute;
	bottom: -15px;
	right: 25px;
	border-width: 15px 0 0 15px;
	border-style: solid;
	border-color: #01d64a transparent;
	display: block;
	width: 0;
} */

/* .slab.warn.outgoing.speech:after{
	content: "";
	position: absolute;
	bottom: -15px;
	right: 25px;
	border-width: 15px 0 0 15px;
	border-style: solid;
	border-color: #EF8441 transparent;
	display: block;
	width: 0;
} */

.add_new_tag_button,
.tag_search {
	display: inline-block;
}

.gravatar-replacement {
	border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
	width: 36px;
	height: 36px;
	text-align: center;
}

.gravatar-replacement>span {
	position: relative;
	top: 8px;
	color: white;
}

#chats_container {
	width: 21%;
	border-right: 1px solid #EAEAEA;
	overflow-y: auto;
}

#messages_container {
	width: 50%;
}

#load_more_chats {
	position: absolute;
	bottom: 4px;
	width: 100%;
	display: flex;
	justify-content: center;
}

.live_chat_message {
	margin-top: 5px;
	position: relative;
}

.live_chat_message_info {
	border-radius: 0px 0px 3px 3px;
	-moz-border-radius: 0px 0px 3px 3px;
	-webkit-border-radius: 0px 0px 3px 3px;
	padding: 6px 6px;
	font-size: 12px;
	text-transform: uppercase;
	position: absolute;
	right: -22px !important;
	bottom: -6px !important;
}

.live_chat_message_info.incoming {
	right: -38px !important;
	/* bottom: -14px !important; */
}

.live_chat_message_info.incoming .tip-down {
	visibility: hidden;
	position: absolute;
	top: -28px;
	right: 0;
	width: 40px;
}

.scheduled_chat_message_icon_left {
	position: absolute;
	left: 8px;
}

.live_chat_message_info_bottom {
	font-size: .9em;
	visibility: hidden;
	color: #808080;
	position: absolute;
	left: 8px;
	bottom: -30px;
	width: 140px;
}

.live_chat_message:hover .live_chat_message_info_bottom {
	visibility: visible;
}

.live_chat_message.incoming:hover .tip-down {
	visibility: visible;
}

.live_chat_message.incoming i:hover {
	opacity: 1;
	transition: all .3s;
	transform: scale(1.2);
}

.live_chat_message_info.incoming i {
	padding-bottom: 2px;
	margin-bottom: 3px;
	color: #808080;
	font-size: 1.3em;
	opacity: .6;
}


.live_chat_message_info.incoming:hover {
	opacity: 1;
	transition: all .5s;
}

.live_chat_message_info.outgoing {
	bottom: -12px;
	right: -12px;
	color: gray;
}

.scheduled_chat_message_info.outgoing {
	bottom: -12px;
	left: 12px;
	color: rgb(128, 128, 128);
}

.live_chat_message_info.outgoing .fa-check-circle {
	color: #4C84EF;
}

.live_chat_message_info.outgoing .fa-exclamation-triangle {
	color: #ed6d77;
}

.live_message_icon {
	position: absolute;
	top: -8px;
}

.live_message_icon.right {
	/* right: -15px;
	top: -15px;
	opacity: .7; */
	display: none;
}

.live_message_icon.right:hover {
	opacity: 1;
	transition: all .5s;
}

.live_message_icon.left {
	left: -10px;
}

.messenger_note {
	text-align: center;
	font-size: 12px;
	margin-bottom: 1em;
	color: rgba(0, 0, 0, .40);
}

.messenger_note>span {
	padding: 0 2px;
}

.pill {
	display: inline-block;
	font-family: "Muli", Helvetica, Roboto, Arial, sans-serif;
	font-weight: normal;
	margin-bottom: auto;
	position: relative;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	padding: 0.25rem 0.5rem 0.25rem;
	background-color: #008CBA;
	color: #fff !important;
	font-size: 10px;
}

.pill.radius {
	border-radius: 3px
}

.pill.round {
	border-radius: 1000px
}

.pill.primary {
	background-color: #1B3179;
	color: #fff
}

.pill.ios-blue {
	background-color: #147efb;
	color: #fff
}

;

.pill.alert {
	background-color: #f04124;
	color: #fff
}

.pill.warning {
	background-color: #f08a24;
	color: #fff
}

.pill.warning.click:hover {
	background-color: #ef9723;
}

.pill.success {
	background-color: #43AC6A;
	color: #fff
}

.pill.secondary {
	background-color: #e7e7e7;
	color: #333
}

.pill.info {
	background-color: #a0d3e8;
	color: #333
}



.procedure {
	margin: 1em;
	height: auto;
	min-height: 200px;
}

.procedure_title {
	padding: .5em 1em;
	border-left: 1px solid #ddd !important;
	border-right: 1px solid #ddd !important;
	border-top: 1px solid #ddd !important;
	background: #efefef url('/images/leftNavBg.png') repeat-x;
	font-size: 14px;
	border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
}

.close_procedure {
	/*
	background-color:gray;
	color:white;
	text-align: center;
	padding:2px 6px;
	border:1px solid black;
	cursor: pointer;
	border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
*/
}

.procedure_content {
	padding: 1em;
	border: 1px solid #ddd !important;
	background-color: #fafafa;
}

.procedure_buttons {
	padding: 1em;
}

.procedure_buttons .btn {
	margin-left: 6px;
}


.cell {
	font-size: 12px;
	line-height: 0;
	display: inline-block;
	border-radius: 4px;
	word-wrap: break-word;
	/* border: 1px solid lightgray; */
	/* background-color: rgba(211, 211, 211, 0.348); */
	width: 108px;
	height: 108px;
	transition: all .3s ease-out;
	margin: auto;
	background-position: fill;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

.cell.media_library_cell {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	color: #000;
}

.cell>img {
	/* height: 100%;
	width: 100%; */
}

/* .cell:hover,.th:focus{
	box-shadow:0 0 6px 1px rgba(0,140,186,0.5);
} */
/* .cell.radius{border-radius:4px;} */
.media_container {
	overflow: hidden;
}

.media_content {
	box-sizing: border-box;
	max-height: 150px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	background-position: fill;
	display: flex;
	align-items: center;
	padding: 6px 5px 5px 5px;
}

.media_content>span[id^="media-"] {
	margin: 0px 10px 5px 0px;
	position: relative;
}

.view_on_hover {
	visibility: hidden;
}

.show_on_hover:hover .view_on_hover {
	visibility: visible;
}

.remove_media_content {
	position: absolute;
	top: 0px;
	font-size: 1.75rem;
	color: #C8543B;
	right: 4px;
	cursor: pointer;
	visibility: hidden;
	z-index: 999;
}

.remove_media_content:hover {
	opacity: .6;
}

.media_content .cell:hover .remove_media_content {
	visibility: visible;
}

.media_content>span .cell:hover .remove_media_content {
	visibility: visible !important;
}

.media_content>span .cell {
	height: 108px;
	width: 108px;
	line-height: normal !important;
	text-align: center;
	padding: 12px 6px;
	border-radius: 5px;
	position: relative;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.36);
}

.media_content .cell.small,
.live_messages_wrapper .cell.small {
	height: 108px !important;
	padding: 0px 3px !important;
	width: 108px;
	font-size: 12px !important;
	margin: 1em 2em .5em .5em;
	text-align: left;
}

.media_content .cell.small.vcard,
.live_messages_wrapper .cell.small.vcard {
	width: 75px !important;
	height: 50px;
}

.cell.small>i {
	display: none;
}

.st-vcard {
	cursor: pointer;
	display: flex;
	justify-content: flex-start;
	padding-left: 10px;
	margin-right: 25px;
	width: 135px;
	align-items: center;
	height: 33px;
	flex-direction: row;
}

.cell.small>img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	/* height: auto; */
	max-height: 100%;
	/* max-width: 100%; */
}

.cell.small {
	height: 108px;
	width: 108px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.36);
}

.cell.small.vcard>.nowrap {
	border: 1px solid lightgray;
	position: relative;
	top: 2px;
}

.cell.vcard {
	border: 1px solid gray;
}

.media_content .cell>img,
.media_content .cell>span.nowrap>span>img,
#media-client .cell>img,
.live_messages_wrapper .cell>img {
	position: absolute;
	top: -9999px;
	bottom: -9999px;
	left: -9999px;
	right: -9999px;
	margin: auto;
	height: auto;
	max-height: 100%;
	/* width: 100%; */
}

.media_content>span>div.label.secondary.radius {
	margin-bottom: 6px !important;
	margin-right: 6px !important;
}

#media-vcards .cell,
#media-documents .cell,
#media-videos .cell,
#media-audio .cell {
	line-height: normal !important;
	overflow: hidden;
}

#media-vcard-library>li,
#media-document-library>li,
#media-video-library>li {
	line-height: normal !important;
	border: 1px solid lightgray;
	/* margin: 0 1em 1em 1em; */
}

.sortable {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 60%;
}

.sortable li {
	margin: 0 5px 5px 5px;
	padding: 5px;
	font-size: 1.2em;
}

.gu-mirror {
	position: fixed !important;
	margin: 0 !important;
	z-index: 9999 !important;
	opacity: .8;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80)
}

.gu-hide {
	display: none !important
}

.gu-unselectable {
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	user-select: none !important
}

.gu-transit {
	opacity: .2;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20)
}


.alert-box {
	border-style: solid;
	border-width: 1px;
	display: block;
	font-size: 0.8125rem;
	font-weight: normal;
	margin-bottom: 1.25rem;
	padding: 0.875rem 1.5rem 0.875rem 0.875rem;
	position: relative;
	transition: opacity 300ms ease-out;
	background-color: #008CBA;
	border-color: #0078a0;
	color: #fff;
}

.alert-box.info {
	background-color: #a0d3e8;
	border-color: #74bfdd;
	color: #4f4f4f;
}

.alert-box .close {
	right: 0.25rem;
	background: inherit;
	color: #333;
	font-size: 1.375rem;
	line-height: .9;
	margin-top: -0.6875rem;
	opacity: 0.3;
	padding: 0 6px 4px;
	position: absolute;
	top: 50%;
}

.alert-box .close:hover,
.alert-box .close:focus {
	opacity: 0.5
}

.alert-box.radius {
	border-radius: 3px
}

.alert-box.round {
	border-radius: 1000px
}

.alert-box.success {
	background-color: #43AC6A;
	border-color: #3a945b;
	color: #fff
}

.alert-box.alert {
	background-color: #f04124;
	border-color: #de2d0f;
	color: #fff
}

.alert-box.secondary {
	background-color: #e7e7e7;
	border-color: #c7c7c7;
	color: #4f4f4f
}

.alert-box.warning {
	background-color: #f08a24;
	border-color: #de770f;
	color: #fff
}

.alert-box.info {
	background-color: #a0d3e8;
	border-color: #74bfdd;
	color: #4f4f4f
}

.alert-box.alert-close {
	opacity: 0
}

.live-tabs div {
	position: relative;
}

.counter-bubble {
	background-color: #FA3E3E;
	color: #FFF;
	position: absolute;
	font-size: 11px;
	border-radius: 2px;
	padding: 0px 4px;
	z-index: 12;
}

.live-tabs .counter-bubble {
	bottom: 0px;
}

.chat-tab .counter-bubble {
	top: 5px;
	right: 0px;
}

.live_chat .counter-bubble {
	right: 35px;
	bottom: 13px;
}

.live_menu {
	position: relative;
	height: 50px;
	/* New Standard top menu color */
	color: #1d2129 !important;
	display: flex;
	align-items: center;
}

.live_menu a {
	text-align: center;
	height: 100%;
}

.live_menu .counter-bubble {
	top: 5px;
	right: -13px;
	line-height: 16px;
}

.live_menu.active {
	/* height: 100%; */
	position: relative;
	bottom: 0px;
}

.nav-item {
	margin: 0px 10px;
}

.navbar-nav {
	display: flex;
	align-items: center;
}

.navbar {
	margin-bottom: 0px;
}

.nav {
	display: flex;
	align-items: center;
}

.circlize {
	align-items: center;
	background-color: rgba(0, 0, 0, .05);
	border-radius: 50%;
	display: inline-block;
	justify-content: center;
	overflow: hidden;
}

.bottom-right {
	position: absolute;
	bottom: 0;
	right: 0;
}

.yeti-panel {
	border-style: solid;
	border-width: 1px;
	border-color: #d8d8d8;
	margin-bottom: 1.25rem;
	padding: 1.25rem;
	background: #f2f2f2;
	background-color: rgb(242, 242, 242);
	color: #333;
}

.yeti-panel.radius {
	border-radius: 3px;
}

.panel.highlight:hover {
	background-color: #0b2163;
	color: white;
}

.panel-heading {
	box-shadow: none;
	border: none;
	overflow: hidden;
}

.panel-primary {
	overflow: auto;
	margin-top: 22px;
	border: none;
	box-shadow: 0 1px 35px 0 rgba(154, 161, 171, .55);
}

.panel-primary>.panel-heading {
	display: flex;
	position: relative;
	align-items: center;
	color: white;
	background-color: rgb(72, 155, 223);
	border-color: rgb(72, 155, 223);
	overflow: hidden;
	height: 44px;
	box-shadow: 0 0 35px 0 rgba(154, 161, 171, .15);
}

a:hover {
	transition: all .2s;
	color: #1DC1DF;
}

.panel-right-icon {
	margin-right: 15px;
	position: absolute;
	right: 0px;
}

.panel-right-icon .btn {
	font-size: .9em;
	font-weight: 600;
}

.panel-right-icon i {
	margin-top: 3px;
}

.panel-right-icon a {
	box-sizing: border-box;
	background: transparent;
	border: 1px solid rgb(242, 242, 242);
	color: rgb(242, 242, 242);
}

.panel-right-icon a:hover {
	transition: all .4s;
	border: 1px solid #1DC1DF;
	background: #1DC1DF;
	color: rgb(79, 79, 79);
}

.active {
	color: var(--icyblue) !important;
}

.btn-del:hover {
	color: #fff !important;
	background: #C8543B !important;
	border-color: #C8543B !important;
}

/* Live Chat Specific  */
.live_chat_messages {
	padding-top: 15px;
	height: calc(-160px + 100vh);
	overflow-y: auto;
	padding-right: 1.5em;
	/* - 260px once media attachments */
}

.live_chat_messages.iframe-owned {
	height: calc(-1px + 100vh) !important;
}

.live_chat_messages.iframe-unowned {
	height: calc(-60px + 100vh) !important;
}

.live_chat_messages.iframe-owned .live_messages_wrapper {
	margin-top: 0px !important;
	overflow: hidden scroll !important;
	height: 80% !important;
}

.live_chat_messages.iframe-unowned .live_messages_wrapper {
	margin-top: 0px !important;
	overflow: hidden scroll !important;
	height: 95% !important;
}

.live_chat_messages .w_media {
	height: calc(100vh - 260px);
}

#large-chat-buttons>.chat-tab.active {
	color: #4CA4EE !important;
	/* #216a94; */
}

#large-chat-buttons {
	font-size: .55em !important;
	margin-right: 10px;
}

div>#large-chat-buttons {
	display: flex;
	align-items: center;
	top: 0px !important;
}

#large-chat-buttons a {
	margin-right: 10px;
}


/* Response Messages */
.messages {
	width: 100%;
	display: block;
}

.message {
	border: 1px solid;
	margin: 0 0 1em 0;
}

.message p {
	padding: 20px 0px 20px 52px !important;
	margin: 0 !important;
}


.message.success {
	background: #E6EFC2 url(/images/highlight_line.gif) repeat-x scroll 0 0;
	border-color: #C6D881;
}

.message.success p {
	background: transparent url(/images/24_tick.png) no-repeat scroll 15px 16px;
}

.message.warning {
	background: #FFF6BF url(/images/highlight_line.gif) repeat-x scroll 0 0;
	border-color: #FDD845;
}

.message.warning p {
	background: transparent url(/images/24_alert.png) no-repeat scroll 15px 17px;
}

.message.error {
	background: #FBE3E4 url(/images/highlight_line.gif) repeat-x scroll 0 0;
	border-color: #FBC7C9;
}

.message.error p {
	background: transparent url(/images/24_x_false.png) no-repeat scroll 15px 17px;
}

.message.tip {
	background: #A8B2C5 url(/images/highlight_line.gif) repeat-x scroll 0 0;
	border-color: #8497BF;
}

.message.tip p {
	background: transparent url(/images/24_information.png) no-repeat scroll 15px 17px;
}


.play-recording,
.text-click,
.fa.clickable,
.fas.clickable,
.far.clickable {
	color: #535453;
}

.play-recording:hover,
.text-click:hover,
.fa.clickable:hover,
.fas.clickable:hover,
.far.clickable:hover {
	cursor: pointer;
	color: silver;
}

.yeti-popover {
	position: absolute;
	background-color: white;
	text-align: left;
	z-index: 1000;
	min-width: 300px;
	max-width: 80%;
	max-height: 400px;
	overflow-y: auto;
	padding: 16px;
	/* this is now dynamically set in js
	bottom:15px;
	right:2px;
*/
}

/*
				OVERRIDES
*/
/*
#intercom-container .intercom-launcher-discovery-frame{
	background-color: #1B3179 !important;
}
*/

.ui-autocomplete {
	max-height: 400px;
	max-width: 250px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
	position: absolute;
	cursor: default;
	z-index: 1100 !important;
}

.ui-menu-item {
	border-bottom: 1px solid #eee;
	padding: 3px;
}

.ui-menu-item:hover {
	background-color: #F5F8FA !important;
}

.ui-state-active,
.ui-state-hover,
.ui-state-focus {
	border: 1px solid #F5F8FA !important;
}

/*
			RYANS CSS
*/

#cellphone_wrapper {
	width: 100%;
	max-width: 400px;
	position: relative;
	border: 3px solid #1B3179;
	border-radius: 54px;
	background: #FFF;
	padding: 69px 20px 65px 0px;
	margin: 20px 0 15px 0;
	height: calc(100vh - 100px);
	overflow-y: hidden;
	overflow-x: hidden;
}

#cellphone_wrapper>.speaker {
	position: absolute;
	top: 24px;
	left: calc(50% - 27px);
	width: 54px;
	height: 6px;
	border-radius: 3px;
	background: #1B3179;
}

#cellphone_wrapper>.camera {
	position: absolute;
	top: 22px;
	left: calc(50% - 50px);
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #1B3179;
}

#cellphone_wrapper>.screen {
	width: calc(100% - 30px);
	max-width: 360px;
	height: calc(100% - 110px);
	border: 2px solid #1B3179;
	position: absolute;
	top: 46px;
	left: 15px;
	background: #FFF;
	border-radius: 5px;
}

#cellphone_wrapper>.homebutton1 {
	position: absolute;
	bottom: 12px;
	left: calc(50% - 25px);
	width: 50px;
	height: 50px;
	border-radius: 25px;
	border: 2px solid #1B3179;
}

#cellphone_wrapper>.homebutton1>.homebutton2 {
	position: absolute;
	top: 13px;
	left: 13px;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	border: 2px solid #1B3179;
}

#cellphone_wrapper>.cellphone_buttons {
	position: absolute;
	top: 50px;
	right: 25px;
}

#cellphone_wrapper>.cellphone_buttons.hidden-xs {
	position: absolute;
	top: 20px;
	right: 13px;
	height: 50px;
	width: 50px;
	border-radius: 50%;
	background: #147efb;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.25rem;
	cursor: pointer;
}

#cellphone_wrapper>.cellphone_buttons.hidden-xs a {
	color: white;
}

#cellphone_wrapper>.cellphone_buttons.hidden-md.hidden-sm.hidden-lg.hidden-xl {
	position: absolute;
	top: 20px;
	right: 13px;
	height: 50px;
	width: 75px;
	border-radius: 50%;
	background: #147efb;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: center;
	font-size: 2.25rem;
	cursor: pointer;
	color: #fff !important;
}

.cellphone_buttons.hidden-md.hidden-sm.hidden-lg.hidden-xl a {
	color: white !important;
}

#cellphone_wrapper>.cellphone_buttons .fa-cog {
	color: white !important;
}

.cellphone_buttons a:hover {
	color: var(--icyblue);
}

#cellphone_wrapper>.cellphone_title {
	position: absolute;
	top: 50px;
	left: 25px;
	color: #1A3179;
	font-weight: bold;
}

#cellphone_wrapper>.cellphone_title_top {
	position: absolute;
	top: 8px;
	left: calc(50% - 60px);
	color: #1A3179;
	font-weight: bolder;
	font-style: oblique;
	font-size: large;
}

#cellphone_wrapper>.cellphone_title_bottom {
	position: absolute;
	top: 54px;
	left: calc(50% - 60px);
	color: #1A3179;
	font-weight: bolder;
	font-style: oblique;
	font-size: large;
}

#cellphone_wrapper>ul {
	/* max-height: 550px; */
	height: calc(100vh - 260px);
	overflow-y: auto;
	overflow-x: hidden;
}

.dropdown-submenu {
	position: relative;
}

.dropdown-menu li {
	width: 100%;
	min-height: 40px;
	display: flex;
	align-items: center;
}

.dropdown-menu li a {
	display: flex;
	align-items: center;
	height: 40px;
	width: 100%;
}

.dropdown-menu li a i {
	color: #1D2129;
	width: 30px;
}

.dropdown-submenu>.dropdown-menu {
	top: 0;
	margin-top: -6px;
	margin-left: -1px;
	-webkit-border-radius: 0 6px 6px 6px;
	-moz-border-radius: 0 6px 6px;
	border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
	display: block;
}

.dropdown-submenu>a:after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: #555;
	margin-left: 15px;
	padding-left: 25px;
}

.dropdown-submenu:hover>a::after {
	border-left-color: #fff;
}

.accordian-submenu a i::after {
	padding-left: 15px;
}

.dropdown-submenu.pull-left {
	float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
	left: -100%;
	margin-left: 100px;
	-webkit-border-radius: 6px 0 6px 6px;
	-moz-border-radius: 6px 0 6px 6px;
	border-radius: 6px 0 6px 6px;
}

.accordion-submenu {
	position: relative;
}

.accordion-submenu>a {
	background-color: transparent !important;
}

.accordion-submenu>a:hover {
	background-color: #f5f5f5 !important;
}

.accordion-submenu>.accordion-menu {
	display: none;
	list-style: none;
	padding: 0;
	position: absolute;
	right: -131px;
	top: 0px;
	width: 130px;
	background: white;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.accordian-submenu>.accordion-menu li {
	display: flex;
	align-items: center;
	justify-content: center;
}

.accordion-submenu:focus>.accordion-menu {
	display: block;
}

.accordion-submenu>.accordion-menu>li>a {
	/* display: block; */
	padding: 3px 20px;
	clear: both;
	font-weight: normal;
	line-height: 1.6;
	color: #333333 !important;
	white-space: nowrap;
	text-decoration: none;
	background-color: transparent;
}

.accordion-submenu>.accordion-menu>li>a:hover {
	background-color: #f5f5f5;
}

.accordion-submenu>a::after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: #555;
	margin-left: 10px;
}

.accordion-submenu>a:hover:after {
	border-left-color: #1DC1DF;
}

.details-xs {
	display: none;
	visibility: hidden;
}

.details-xs-2 {
	visibility: visible;
}

#chats_container {
	overflow-y: hidden;
}

#chats_content {
	height: calc(100vh - 130px);
}

.back_to_msg {
	display: none;
}


/* -----------Individual Cells in Media Library ------------- */
#media-client div.cell {
	position: relative;
	margin-top: 5px;
	margin-bottom: 10px;
	width: 175px;
	height: 175px;
	border-radius: 0px;
	border: 1px solid rgba(0, 0, 0, 0.46);
}

/* -----------Individual Cells Actions ------------- */
.media_actions {
	margin-top: 10px;
	position: relative;
	display: flex;
	align-items: baseline;
}

.media_actions .pull-left {
	position: absolute;
	bottom: 0px;
	left: 0px;
	display: flex;
	justify-content: flex-start;
	flex: 1;
}

.media_actions .pull-right {
	position: absolute;
	right: 0px;
	bottom: 0px;
	display: flex;
	justify-content: flex-end;
	flex: 1;
}

.active_media {
	box-shadow: 0 0 6px 1px rgba(20, 183, 41, 0.9);
}

/* .active_media:hover {
	box-shadow: 0 0 6px 1px rgba(219, 15, 15, 0.9);
} */
.selected_media {
	opacity: .5;
	/* Hightlight image slightly */
}

.selected_media_check {
	color: var(--icyblue) !important;
	font-size: 1.5em;
	position: absolute;
	top: 22px;
	left: 5px;
}

@media (min-width: 1740px) {
	.live-col-left-tabs ul {
		display: flex;
		justify-content: center;
		flex-direction: row;
	}

	.live-col-left-tabs ul div {
		top: 72%;
	}
}

/* --------- Media Queries ---------- */
@media (max-width: 1199px) {
	.hide-txt {
		display: none;
	}

	.live-col-left-tabs .counter-bubble {
		bottom: 0px;
		left: 10px !important;
		line-height: 16px;
	}

	.live-col-left-tabs {
		height: 100%;
	}

	.live-col-left-tabs ul {
		/* 		margin-left: -20px; */
	}

	.live-col-left-header {
		justify-content: flex-start;
	}

	.live-col-left-header h4 {
		font-size: 14px;
	}

	.live-tabs {
		height: 23px;
		padding-left: 1em;
	}
}

@media (max-width: 1000px) {
	.hide-name {
		display: none;
	}

	.hide-number {
		display: none;
	}
}

@media (max-width: 1500px) {
	.live-col-left-header {
		justify-content: flex-start !important;
	}

	.live-col-left-header h4 {
		float: left;
	}
}

@media (max-width: 1435px) and (min-width: 768px) {
	.accordion-submenu>.accordion-menu {
		display: none;
		list-style: none;
		padding: 0;
		position: absolute;
		left: -131px;
		top: 0px;
		width: 130px;
		background: white;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		z-index: 999999;
	}

	.live-col-left-header h4 {
		float: left;
	}
}

@media (max-width: 568px) {
	#media-client div.cell {
		position: relative;
		margin-top: 5px;
		margin-bottom: 10px;
		width: 110px;
		height: 110px;
		border-radius: 0px;
		border: 1px solid rgba(0, 0, 0, 0.46);
	}
}

@media (max-width: 768px) and (min-width: 569px) {
	#media-client div.cell {
		position: relative;
		margin-top: 5px;
		margin-bottom: 10px;
		width: 125px;
		height: 125px;
		border-radius: 0px;
		border: 1px solid rgba(0, 0, 0, 0.46);
	}
}

@media (max-width: 991px) and (min-width: 768px) {
	#media-client div.cell {
		position: relative;
		margin-top: 5px;
		margin-bottom: 10px;
		width: 150px;
		height: 150px;
		border-radius: 0px;
		border: 1px solid rgba(0, 0, 0, 0.46);
	}

	.navbar-brand {
		margin-left: -35px !important;
	}

	/* ul.nav.navbar-nav.navbar { */
	/* position: absolute; */
	/* left: 0px; */
	/* margin-left: 15px; */
	/* } */
	ul.nav.navbar-nav.navbar-right {
		position: absolute;
		right: 0px;
		margin-right: 11px;
		margin-top: 2px;
		font-size: 12px;
	}
}

@media (max-width: 991px) {
	#messages_contact_container {
		position: relative;
		width: calc(100% - 100px) !important;
		max-height: calc(100% - 50px);
		overflow: auto;

	}

	#chats_container {
		width: 100px;
		overflow-y: hidden;
	}

	#messages_container {
		width: 50%;
	}

	.live-tabs {
		/* 		flex-wrap: wrap; */
		height: 23px;
		padding-left: 1em;
	}

	.gravatar-replacement>span {
		margin-right: 0px;
	}

	#chats_content {
		height: calc(100vh - 245px) !important;
		overflow-y: auto;
	}
}

@media (max-width: 940px) {
	.navbar {
		margin-left: -10px;
		font-size: 14px;
	}

	.navbar li {
		margin: 0px 5px;
	}

	.menu_billing a {
		padding-right: 0px !important;
		margin-right: -5px !important;
	}
}

@media (min-width: 768px) {
	#contact_container {
		width: 50%;
	}
}

@media (max-width: 767px) {
	.back_to_msg {
		/* scroll to top */
		display: inline;
	}

	.live-col-left-tabs {
		font-size: .65em;
		height: 100%;
	}

	.live-col-left-header {
		display: flex;
		font-size: .50em;
	}

	.live-col-left-header h4 {
		font-size: 14px;
		margin-left: -8px;
	}

	.xs-c-d {
		/* Hide contact details */
		display: none;
	}

	.details-xs {
		/* contact details */
		visibility: visible;
		display: inline;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.details-xs-2 {
		/* contact details */
		display: none !important;
		visibility: hidden;
	}

	.custom-float {
		/* float: left !important; */
	}

	#messages_contact_container {
		position: relative;
		width: calc(100% - 100px) !important;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
	}

	#messages_container {
		width: 100% !important;
	}

	#contact_container {
		width: 100% !important;
	}
}

.btn-primary {
	color: #fff;
	background-color: #1B3179;
	border-color: #182c68;
}

.inputfile {
	opacity: 0;
	height: 25px;
	width: 100px;
}

.inputfile::after {
	background: blue;
	content: 'Upload an Image';
}

.inputfile+.file_label {
	font-size: 1.25em !important;
	font-weight: 700 !important;
	color: white !important;
	background-color: black !important;
	display: inline-block !important;
}

.inputfile:focus+.file_label,
.inputfile+.file_label:hover {
	background-color: red !important;
}

[hidden] {
	display: none !important;
}

.popoutCopied {
	/* background: #f6e340; */
	/* border-radius: 4px; */
	padding-top: .65em;
	color: #211f08;
	width: 130px;
}

.video_task_content {
	padding-top: 15px;
	height: calc(-160px + 100vh);
	overflow-y: auto;
	padding-right: 1.5em;
	/* - 260px once media attachments */
}

.video_task_content.iframe-owned {
	height: calc(-1px + 100vh) !important;
}

.video_task_content.iframe-unowned {
	height: calc(-60px + 100vh) !important;
}

.video_task_content.iframe-owned .live_messages_wrapper {
	margin-top: 0px !important;
	overflow: hidden scroll !important;
	height: 80% !important;
}

.video_task_content.iframe-unowned .live_messages_wrapper {
	margin-top: 0px !important;
	overflow: hidden scroll !important;
	height: 95% !important;
}

.video_task_content .w_media {
	height: calc(100vh - 260px);
}

.video_recorder {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.recordButton {
	position: absolute;
	bottom: 10px;
	/* Adjust the distance from the bottom */
	background-color: red;
	/* Choose your button color */
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.controlsContainer {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.7);
	/* Semi-transparent black background */
}

.playPauseButton {
	color: white;
	background-color: transparent;
	border: none;
	cursor: pointer;
	font-size: 16px;
	padding: 10px;
}

.restartRecord {
	color: black;
	position: absolute;
	top: 5px;
	/* Adjust the distance from the bottom */
	padding: 10px 10px;
	cursor: pointer;
	z-index: 1;
}

.videoRecordingDuration {
	color: white;
	position: absolute;
	top: 5px;
	/* Adjust the distance from the bottom */
	padding: 10px 10px;
	z-index: 1;
}