/* shared classes ====================================================*/
/* colours --------------------------------------------------------*/
.background-online
{
	background-color: #1C781C;
	color: #FFFFFF;
}

.background-away
{
	background-color: #D08D30;
	color: #FFFFFF;
}

.background-offline
{
	background-color: #87000E;
	color: #FFFFFF;
}

.inverse-colours
{
	background-color: #428BCA;
	color: #FFFFFF;
}


/* spacing -----------------------------------------------------------*/

.vertical-gap-small {
	height: .75em;
}

.vertical-gap-medium {
	height: 1.5em;
}

.no-margins
{
	margin: 0px;
}

.padded-sides
{
	margin-left: 1em;
	margin-right: 1em;
}

/* overwrite some bootstrap classes to make height of columns consistent*/
.navbar
{
	margin-bottom: 4px;
}

/* resizing of text areas---------------------------------------------*/
.no-resize {
	resize: none;
}


/* horizontal line <hr> classes---------------------------------------*/
.content-separator 
{
	height: 1px;
	color: #C8C8C8;
	background-color: #C8C8C8;
	margin-left: -15px;
	margin-right: -15px;
	margin-top: 4px;
	margin-bottom: 4px;
}

/* other rules -------------------------------------------------------*/
/* note that this rule may not apply when a parent has class 'editing' */
.clickable 
{
	cursor: pointer;
}

.no-touch .clickable:hover
{
	background-color: #E5E5E5;
}

.clickable-always
{
	cursor: pointer;
}

.no-touch .clickable-always:hover
{
	background-color: #E5E5E5;
}

/* active panel headings are blue, so their hover over colour is a darker blue */
.no-touch .panel-heading.active.clickable:hover
{
	background-color: #125B9A;
}

.fades-in-on-load
{
	display: none;
}

#recentConversations, #conversationWindows, #contacts, #settings
{
	overflow-y: auto;
	overflow-x: hidden;
}

/* only show elements if a parent class has classes 'row' and 'active' */
.visible-in-active-row
{
	visibility: hidden;
}

.row.active .visible-in-active-row
{
	visibility: visible;
}

/* only show elements if a parent class has classes 'row' and 'updating' */
.visible-in-updating-row
{
	visibility: hidden;
}

.row.updating .visible-in-updating-row
{
	visibility: visible;
}

/* only show elements if a parent li has class 'active' */
.visible-in-active-li
{
	visibility: hidden;
}

li.active .visible-in-active-li
{
	visibility: visible;
}

.text-overflow-ellipsis
{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.push-p75em
{
	margin-left: .75em;
}

.disabled
{
	-webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
}

/* end of shared classes =============================================*/

/* main elements -----------------------------------------------------*/
#header
{
	padding-bottom: 4px;
}

#headerRow
{
	height: 30px;
	overflow: hidden;
}

#headerRow p
{
	line-height: 1.5em;
}

.nav-separator-border
{
	border-right-color: #C8C8C8;
	border-right-style: solid;
	border-right-width: 1px;
}


/* Chat page elements-------------------------------------------------*/
.conversationHeader
{
	text-align: center;
	font-weight: bold;
	margin-right: 0px;
	margin-left: 0px;
}


#messageInput
{
	-webkit-appearance: none;
	height: 4em;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
}

#sendMessageButton
{
	height: 4em;
}

.loadingRow
{
	padding-top: 4px;
	text-align: center;
}

.messages-area
{
}

.chat-area
{
}

.conversation-header-status
{
	color: white;
	font-size: 1.5em;
}

.partner-name 
{
	color: #777777;
	font-weight: bold;
}

.user-name 
{
	color: #428BCA; /*Alternate: #1859FF*/
	font-weight: bold;
}

.message 
{
	color: #444444;
	width: 100%;
	word-wrap: break-word;
}

.message-time 
{
	color: #aaaaaa;
}

.partner-message
{
	background-color: #F9F9F9;
	border-color: #A8A8A8;
	border-style: solid;
	border-width: 1px;
}

.user-message 
{
	background-color: #D7EAFF;
	border-color: #428BCA;
	border-style: solid;
	border-width: 1px;
}

.message-row
{
	margin-top: 6px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	padding-right: 8px;
}

.send-message-button-icon
{
	font-size: 2.9em;
}

.send-message-error
{
	border-color: #C20000;
	border-style: solid;
	border-width: 2px;
	color: #C20000;
	background-color: #FFC6C6;
	font-style: italic;
}

#conversationSeparator
{
	height: 10px;
}

/* Drag and Drop classes */
#droppedAttachments
{
	padding-bottom: 4px;
	padding-top: 4px;
}

.dragging-over-text-input
{
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	border: 1px solid rgba(81, 203, 238, 1);
}

.dropped-attachment
{
	border: 1px solid #428BCA;
	margin-right: 10px;
	margin-bottom: 2px;
	float: left;
	z-index: 500;	
}

.remove-dropped-attachment
{
	color: White;
	background-color: #428BCA;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 3px;
	padding-bottom: 3px;
	cursor: pointer;
}

.attachment-actions
{
	color: white;
	background-color: #428BCA;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 3.5px;
	padding-bottom: 3.5px;
	cursor: pointer;
}

.dropped-attachment-text
{
	background-color: white;
	color: #428BCA;
	padding-left: 2px;
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	margin-left: 1px;
	white-space: nowrap;
}

.message-attachments
{
	border-top-width: 0;
	padding-left: 4px;
	padding-top: 4px;
	padding-bottom: 2px;
}

.action-menu
{
	z-index: 1000;
	list-style: none outside none;
	position: absolute;
	border-color: #428BCA;
	border-style: solid;
	border-width: 1px;
	background-color: #D7EAFF;
	margin-bottom: 2px;
	margin-left: -1px;
	padding-left: 0px;
}

.action-item
{
	padding-left: 4px;
}

.action-item:hover
{
	background-color: #93C7FF;
}

.action-item.disabled
{
	background-color: #e5e5e5;
	color: #323232;
}

/* Recent Conversations elements -------------------------------------*/
.recent-conversations
{
	padding-bottom: 6px;
}

.recent-row:first-child
{
	margin-top: 0px;
}

.recent-row
{
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 8px;
	margin-top: 6px;
	padding-bottom: 8px;
	padding-left: 8px;
	border-color: #C8C8C8;
	border-style: solid;
	border-width: 1px;
}

.recent-row-from-user
{
	background-color: #F9F9F9; /*grey*/
}

.recent-row-from-partner
{
	background-color: #F9F9F9;
}

.recent-message
{
	max-height: 3.0em;
	overflow: hidden;
	padding-left: 4px;
	padding-right: 4px;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: nowrap;
}

.message-direction-icon
{
	font-size: 1.2em;
}

.message-direction-from-user
{
	color: green;
}

.message-direction-to-user
{
	color: red;
}

.recent-row-chevron-icon
{
	font-size: 2.0em;
	text-align: center;
	padding-top: 0.2em;
}

.recent-row-name
{
}

.recent-row-time
{
}

/* settings pane -----------------------------------------------------*/
.setting-row
{
	font-size: 1.25em;
}

.setting-row .status-icon
{
	font-size: 1.25em;
}

.setting-row .ion-checkmark
{
	line-height: 1.25em;
}

/* contacts pane -----------------------------------------------------*/
.contacts-panel, #visible-groups-panel
{
	border-top-color: #a8a8a8;
}

.group-row
{
	font-size: 1.25em;
}

/* don't highlight groups when editing groups*/
.editing-groups .panel-heading.clickable:hover
{
	background-color: #f5f5f5;
	cursor: default;
}

/* don't highlight members of personal groups when editing */
.editing #contacts-panel-personal .list-group-item.clickable:hover
{
	background-color: #FFFFFF;
	cursor: default;
}

.editing-members #contacts-panel-personal .ion-online:before,
.editing-members #contacts-panel-personal .ion-away:before,
.editing-members #contacts-panel-personal .ion-invisible:before
{
	/* x icon */
	content: "\f12a";
	
	/* btn btn-sm */
	display: inline-block;
	margin-bottom: 0;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	background-image: none;
	border: 1px solid transparent;
	-webkit-user-select: none;
	 -moz-user-select: none;
	  -ms-user-select: none;
	   -o-user-select: none;
		  user-select: none;
	padding: 5px 10px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;
	
	/* btn-default */
	color: #333333;
	background-color: #ffffff;
	border-color: #cccccc;
}

.editing-members #contacts-panel-personal .ion-online:hover:before,
.editing-members #contacts-panel-personal .ion-away:hover:before,
.editing-members #contacts-panel-personal .ion-invisible:hover:before
{
	color: #333333;
	background-color: #ebebeb;
	border-color: #adadad;
}

@media (min-width: 992px)
{
	.editing-members #contacts-panel-personal .ion-online:before,
	.editing-members #contacts-panel-personal .ion-away:before,
	.editing-members #contacts-panel-personal .ion-invisible:before,
	.editing-members #contacts-panel-personal .ion-close:before
	{
		content: "Delete";
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
	}
}

.editing-members #contacts-panel-system .ion-online:before,
.editing-members #contacts-panel-system .ion-away:before,
.editing-members #contacts-panel-system .ion-invisible:before,
.editing-members #contacts-panel-shared .ion-online:before,
.editing-members #contacts-panel-shared .ion-away:before,
.editing-members #contacts-panel-shared .ion-invisible:before
{
	/* + icon */
	content: "\f217";
	
	/* btn btn-sm */
	display: inline-block;
	margin-bottom: 0;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	background-image: none;
	border: 1px solid transparent;
	-webkit-user-select: none;
	 -moz-user-select: none;
	  -ms-user-select: none;
	   -o-user-select: none;
		  user-select: none;
	padding: 5px 10px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;
	
	/* btn-default */
	color: #333333;
	background-color: #ffffff;
	border-color: #cccccc;
}

.no-touch.editing-members #contacts-panel-system .ion-online:hover:before,
.no-touch.editing-members #contacts-panel-system .ion-away:hover:before,
.no-touch.editing-members #contacts-panel-system .ion-invisible:hover:before,
.no-touch.editing-members #contacts-panel-shared .ion-online:hover:before,
.no-touch.editing-members #contacts-panel-shared .ion-away:hover:before,
.no-touch.editing-members #contacts-panel-shared .ion-invisible:hover:before
{
	color: #333333;
	background-color: #ebebeb;
	border-color: #adadad;
}

@media (min-width: 992px)
{
	.editing-members #contacts-panel-system .ion-online:before,
	.editing-members #contacts-panel-system .ion-away:before,
	.editing-members #contacts-panel-system .ion-invisible:before,
	.editing-members #contacts-panel-system .ion-plus-round:before,
	.editing-members #contacts-panel-shared .ion-online:before,
	.editing-members #contacts-panel-shared .ion-away:before,
	.editing-members #contacts-panel-shared .ion-invisible:before,
	.editing-members #contacts-panel-shared .ion-plus-round:before
	{
		content: "Add to Group";
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	}
}

.visible-when-editing, .visible-when-editing-groups,
.visible-inline-when-editing-groups,
.visible-inline-when-editing-members,
.visible-when-editing-members
{
	display: none;
}

.editing .visible-when-editing
{
	display: inline;
}

.editing-groups .visible-when-editing-groups
{
	display: block;
}

.editing-groups .visible-inline-when-editing-groups,
.editing-members .visible-inline-when-editing-members,
.hidden-inline-when-editing-groups
{
	display: inline;
}

.editing .hidden-when-editing
{
	display: none !important;
}

.editing-members .hidden-when-editing-members,
.adding-members .hidden-when-editing-members,
.editing-groups .hidden-when-editing-groups,
.editing-groups .hidden-inline-when-editing-groups
{
	display: none !important;
}

.editing-members .visible-when-editing-members
{
	display: block;
}

.btn i
{
	font-size: 1.25em;
}

.editing-groups .group-row-main
{
	width: 16.666666666666664%;
}

@media (min-width: 768px) {
	.editing-groups .group-row-main
	{
		width: 66.66666666666666%;
	}
}

@media (min-width: 992px) {
	.editing-groups .group-row-main
	{
		width: 50%;
	}
}
/* miscellaneous ------------------------------------------------------*/
.unread-message-count
{
	background-color: #ffffff;
	color: #428bca;
}

.unread-message-icon
{
	background-color: #428bca;
	color: #ffffff;
}


.editing-members #contacts-panel-system .visible-in-personal-panel.visible-when-editing-members,
.editing-members #contacts-panel-shared .visible-in-personal-panel.visible-when-editing-members,
.editing-members #contacts-panel-personal .hidden-in-personal-panel.visible-when-editing-members 
{
	display: none;
}

.tooltip.bottomleft
{
	margin-left: -53em;
	margin-top: 3em;
}