/**
 * Global CSS rules
 *
 * @author Pierre HUBERT
 */

.txt-center {
    text-align: center;
}

/**
 * <a> elements
 */
a, .cursor-pointer {
    cursor: pointer;
}

/**
 * <a> like elements
 */
.a {
    cursor: pointer;
    outline: none;
    text-decoration: none;
    color: #3c8dbc;
}

.a:focus, .a:hover {
    color: #72afd2;
}

.cursor-pointer {
    cursor: pointer;
}

/**
 * Sceditor iframe
 */
.sceditor-iframe-body {
    padding: 5px;
    padding-bottom: 0px;
}


/**
 * Adapt menu bar to small screens
 */
@media screen and (max-width: 767px) {
    #pageTarget {
        margin-top: 50px;
    }
}
/**
 * Errors pages stylesheet
 *
 * @author Pierre HUBERT
 */

.error-page .error-content p {
	word-wrap: break-word;
}
/**
 * Wait splash screen style sheet
 *
 * @author Pierre HUBERT
 */

/**
 * Full splash screen
 */
.waitSplashScreen {
    background-color: #001F3F;
    color: white;
    padding-top: 10%;
    text-align: center;
}


/**
 * Transparent wait splash screen
 */
.transparentWaitSplashScreen {
    background-color: #0C0C0C;
    z-index: 1100;
    text-align: center;
    opacity: 0.5;
    padding-top: 30%;
    position: absolute;
    top: 0%;
    left: 0%;
    display: block;
    width: 100%;
    height: 100%;
}

/**
 * Wait message
 */
.waitSplashScreen .text {
    padding: 50px;
    font-size: 200%;
}
/**
 * Network error stylesheet
 *
 * @author Pierre HUBERT
 */

#networkErrorMessage {
	position: fixed;
	bottom: 2px;
	left: 1px;
	width: 300px;
	max-width: 100%;
	text-align: justify;
	z-index: 999;
}
/**
 * Menubar stylesheet
 *
 * @author Pierre HUBERT
 */

/**
 * adminLTE fixes
 */
@media (max-width: 767px) {
 	.fixed .content-wrapper {
		padding-top: 50px !important;
	}
}

/**
 * Authenticated users
 */
header .dropdown .fa-gear {
	vertical-align: middle;
}

.main-header .alternate-latest-posts-button {
	display: none;
}

@media (max-width: 360px) {
	.main-header[forActiveUser="true"] .navbar-brand {
		display: none;
	}

	.main-header .alternate-latest-posts-button {
		display: block;
	}

	.nav > li > a {
		padding: 10px 10px;
	}

	.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
		width: 100%;
		left: 0px;
	}
}

@media (max-width: 767px) {
  .skin-blue .main-header .navbar .dropdown-user-menu-action .dropdown-menu li a {
    color: #333 !important;
  }
}


/**
 * Not authenticated users
 */

/**
 * Login form
 */
.menubar-loginForm .form-control {
	margin-right: 1px;
}
/**
 * Global banner
 *
 * @author Pierre Hubert
 */

.banner {
    padding: 1px 15px;
    text-align: left;
    min-height: unset !important;
    margin-bottom: 0px;
}

.banner button {
    right: unset !important;
}

.banner a {
    margin-left: 5px;
}

.content-wrapper + .content-wrapper,
.content-wrapper + div + .content-wrapper,
.content-wrapper + div + div + .content-wrapper,
.content-wrapper + div + div + div + .content-wrapper {
    padding-top: 1px;
}

@media screen and (max-width: 767px) {
    .banner.content-wrapper {
        margin-top: 50px;
    }

    .content-wrapper + .content-wrapper,
    .content-wrapper + div + .content-wrapper,
    .content-wrapper + div + div + .content-wrapper,
    .content-wrapper + div + div + div + .content-wrapper {
        margin-top: 0px !important;
        padding-top: 2px !important;
    }
}
/**
 * Language picker modal stylesheet
 *
 * @author Pierre HUBERT
 */

.pick-language-modal .modal-body {
	text-align: center;
}
/**
 * Search form styles
 *
 * @author Pierre HUBERT
 */

.searchBoxResultsContainer {
	position: relative;
	overflow: hidden;
	width: auto;
	height: 200px;
}

.searchBoxResultsContainer .menu {
	overflow: hidden;
	width: 100%;
	height: 200px;
}
/**
 * Friends bar style sheet
 *
 * @author Pierre HUBERT
 */

/**
 * For computers / tablets (any size)
 */
@media screen and (min-width: 513px)  {

	#friendsList {
		position: fixed;
		right: 0px;
		border-left: 1px black solid;
		z-index: 999;
		top: 0px;
		height: 100%;
		padding-top: 50px;
	}

	#friendsList:hover {
		z-index: 1001;
	}
}

/**
 * For big screens
 */
@media screen and (min-width: 1200px) {

	#friendsList {
		width: 230px !important;
		transition: right 1s;
		right: -175px;
		background-color: #fff3ff80;
		display: block !important;
	}

	#friendsList:hover {
		background-color: #ffffff;
		right: 0px;
	}

	/**
	 * Hide friend button toggle
	 */
	.friendToggleButton {
		display: none !important;
	}

}

/**
 * For small screens / tablets
 */
@media screen and (max-width: 1200px) and (min-width: 513px)  {
	#friendsList {
		right: 0px;
		background-color: #ffffff;
		min-width: 200px;
	}
}

/**
 * Common to small screen / tablets / smartphones
 */
@media screen and (max-width: 1200px) {
	#friendsList {
		display: none;
	}

	#friendsList.visible-bar {
		display: block;
		z-index: 1001;
	}
}

/**
 * Very small computers / tablets / smartphones
 */
@media screen and (max-width: 513px)  {
	#friendsList {
		background-color: #ffffff;
		padding-top: 50px;
		position: fixed;
		height: 100%;
		width: 100% !important;
		top: 0px;
		left: 0px;
	}
}

#friendsList ul {
	padding-left: 0px;
}

#friendsList li {
	list-style: none;
}

#friendsList li:hover {
	background: #f4f4f4;
	text-decoration: none;
}

#friendsList .account-image {
	margin: auto 10px auto auto;
	max-width: 40px;
	height: 40px;
	border-radius: 50%;
	visibility: visible
}

#friendsList h4 {
	padding: 0;
	margin: 0 0 0 45px;
	color: #444444;
	font-size: 15px;
	position: relative;
}

#friendsList a {
	border-bottom: 1px solid #f4f4f4;
	display: block;
	white-space: nowrap;
	padding: 5px 5px 5px 5px;
}
/**
 * Friends list modal stylesheet
 *
 * @author Pierre HUBERT
 */

.friends-list-ro .friend {
	display: inline-block;
	width: 170px;
	max-width: 100%;
	margin: 5px;
}

.friends-list-ro .friend a {
	color: white;
}

.friends-list-ro .friend a:hover {
	color: #001F3F;
}

.friends-list-ro .friend img {
	margin: auto 10px auto auto;
	max-width: 40px;
	height: 40px;
	border-radius: 50%;
	visibility: visible;
}

.friends-list-ro .friend .friends-name {
	display: inline-block;
	white-space: normal;
	max-width: 100px;
	text-align: left;
	vertical-align: middle;
}
/**
 * Friends list script file
 *
 * @author Pierre HUBERT
 */

.personnal-friends-list .friend a {
	color: white;
}
.personnal-friends-list .friend a:hover {
	color: #001F3F;
}

.personnal-friends-list .friend img {
	margin: auto 10px auto auto;
	max-width: 40px;
	height: 40px;
	border-radius: 50%;
	visibility: visible;
}

.personnal-friends-list .friend .friends-name {
	display: inline-block;
	white-space: normal;
	max-width: 100px;
	text-align: left;
	vertical-align: middle;
}

.personnal-friends-list .friend {
	margin-bottom: 10px;
}

.personnal-friends-list .friend .friends-name {
	width: 200px;
	max-width: 200px;
}

.personnal-friends-list .friend .friends-actions {
	display: inline-block;
	width: 250px;
}

.personnal-friends-list .friend .friends-actions .btn {
	width: 100px;
}
/**
 * Conversations manager stylesheet
 *
 * @author Pierre HUBERT
 */

#conversationsElem {
	position: fixed;
	bottom: 0px;
	text-align: right;
	padding-right: 5px;
	z-index: 1000;
	right: 0px;
}

#conversationsElem .open-conversation-button {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	vertical-align: bottom;

	padding-left: 6px;
	padding-right: 6px;
	padding-top: 3px;
	padding-bottom: 3px;
}
/**
 * Conversations windows
 * 
 * @author Pierre HUBERT
 */


/**
 * Main definition
 */
#conversationsElem .box {
	width: 250px;
	height: 350px;
	max-width: 100%;
	/*display: inline-block;*/
	display: inline-table;
	margin-left: 5px;
	text-align: justify;
	margin-bottom: 0px;
}

#conversationsElem .chat-window .box-title {
	font-size: 15px !important;
}

/**
 * Conversations create message form
 */

#conversationsElem .box-footer {
	position: absolute;
	bottom: 0;
}

#conversationsElem .create-message-form .btn {
	padding-left: 8px;
	padding-right:8px;
}

#conversationsElem .create-message-form .btn.btn-add-emoji,
#conversationsElem .create-message-form .btn.btn-add-image {
	background: none;
	color: #808080;
}

#conversationsElem .create-message-form .btn.btn-add-emoji:hover,
#conversationsElem .create-message-form .btn.btn-add-image:hover{
	color: black;
}

#conversationsElem .create-message-form .btn.btn-add-emoji {
	padding-left: 4px;
	padding-right: 2px;
}

#conversationsElem .create-message-form .btn.btn-add-image {
	padding-left: 2px;
	padding-right: 5px;
}

#conversationsElem .create-message-form .btn-primary {
	border-color: var(--primary-blue);
}

#conversationsElem .create-message-form .btn-primary:hover {
	background-color: var(--primary-blue);
	border-color: var(--primary-blue);
}



/**
 * Conversation settings pane 
 */
#conversationsElem .conversation-settings-pane {
	-webkit-transform: translate(101%, 0);
	-ms-transform: translate(101%, 0);
	-o-transform: translate(101%, 0);
	transform: translate(101%, 0);
	position: absolute;
	top: 0;
	bottom: 0;
	height: 250px;
	width: 100%;
	background: #FFFFFF;
	overflow: auto;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
	padding: 10px;
}

#conversationsElem .conversation-settings-pane.open {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
}

#conversationsElem .conversation-settings-pane .conversation-image-settings {
	text-align: center;
}

#conversationsElem .conversation-settings-pane .conversation-image-settings .btn {
	margin: 5px;
	width: 100%;
}

/**
 * Conversations messages
 */

#conversationsElem .date-conversation-message {
	margin-top: 2px;
	text-align: center;
	font-size: 70%;
	font-style: italic;
}

#conversationsElem .conversation-msg-image {
	max-height: 90px;
	max-width: 150px;
}

#conversationsElem .direct-chat-text {
	word-break: break-all;
}

#conversationsElem .direct-chat-text .emoji {
	height: 1em;
}

#conversationsElem .direct-chat-text a, #conversationsElem .direct-chat-text .a {
	color: inherit;
}

#conversationsElem .direct-chat-text.not-first-message::before, 
#conversationsElem .direct-chat-text.not-first-message::after {
	display: none;
}

#conversationsElem .direct-chat-msg.not-last-message-from-user {
	margin-bottom: 0px;
}

#conversationsElem .direct-chat-msg.not-last-message-from-user .direct-chat-img {
	margin-bottom: -5px;
}

#conversationsElem .direct-chat-msg.open .dropdown-menu {
	margin-top: -20px;
}

#conversationsElem .direct-chat-msg .server_message {
	text-align: center;
	font-size: 90%;
	font-style: italic;
}
/**
 * Conversations list
 *
 * @author Pierre HUBERT
 */

.conversations-list-box ul {
	max-height: 250px;
}

.conversations-list-box .last-activity {
	margin-left: 5px;
	color: #777;
	font-size: 10px;
}

.conversations-list-box .conversations-members-numbers .fa.fa-users {
	margin-right: 2px;
}

.conversations-list-box .conversations-members-numbers {
	margin-bottom: 0px;
}
/**
 * Unread conversations dropdown stylesheet
 *
 * @author Pierre HUBERT
 */

.no-unread-conversation-msg {
	padding: 20px;
}

.new-conversations-dropdown .message-content {
	white-space: normal;
	font-style: italic;
}
/**
 * Conversation message writing notifier
 */

.user-writing-message {
    font-size: 80%;
    font-style: italic;
}

#conversationsElem .user-writing-message {
    margin-top: -12px;
}
/**
 * Users select
 *
 * @author Pierre HUBERT
 */

.user-select-image {
	border-radius: 50%;
	width: 25px;
}
/**
 * Emojies parser
 *
 * @author Pierre HUBERT
 */

/**
 * Emoji images global style
 */
.emoji {
	width: auto !important;
	height: 2em !important;
}
/**
 * Emoji picker stylesheet
 *
 * @author Pierre HUBERT
 */

#emojiPicker {
	height: 0;
}

.wdt-emoji-popup {
	z-index: 1000;
	margin-top: 7px;
}

/**
 * Posts UI stylesheet
 *
 * @author Pierre HUBERT
 */

/**
 * Top right actions
 */
.post .top-right-buttons div {
	display: inline-block;
	padding-right: 10px;
}

.post .top-right-buttons div .btn-group {
	padding-right: 0px;
}

/**
 * For the visibility
 */
.post .visibility .read-only {
	color: #b5bbc8;
}

/**
 * Posts deletion and edition
 */
.post .del-post-div a,
.post .edit-post-div a {
	color: #b5bbc8;
}
.post .del-post-div a:active,
.post .edit-post-div a:active {
	color: black;
}

/**
 * For the post content
 */
.post .post_content {
	text-align: center;
}

.post .post-buttons {
	text-align: center;
}

.post .post-image {
	width: 100%;
}

.post .post-video {
	text-align: center;
}

.post .post-video video {
	max-width: 100%;
	height: 300px;
}

.post .post-pdf {
	text-align: center;
}

.post .post-youtube.post-youtube-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	background-color: #3c8dbc;
	color: white;
	border-radius: 5px;
}

.post .post-youtube.post-youtube-placeholder .title {
	font-size: 150%;
}

.post .post-youtube {
	width: 100%;
	height: 300px;
}

.post .post-countdown {
	text-align: center;
	padding: 10px;
}


/**
 * Survey specific rules
 */
.post .post-survey-question {
	text-align: center;
}

.post .post-survey-chart-container {
	margin-bottom: 10px;
}

.post .survey-given-response {
	text-align: center;
}
/**
 * Posts creation form
 *
 * @author Pierre HUBERT
 */

/**
 * Message text form
 */
.post-form .new-message {
	width: 100%;
	min-height: 100px;
	font-size: 14px;
	line-height: 18px;
	border: 1px solid #dddddd;
	padding: 10px;
	margin-bottom: 10px;
}

.post-form .new-message-content-container {
	margin-bottom: 15px;
}

/**
 * Message type chooser
 */
.post-form .post-types {
	text-align: center;
}

.post-form .post-types label {
	margin: 5px;
}

.post-form .post-form-choice input {
	display: none;
}

.post-form .post-form-choice input:checked ~ span {
	color: #72afd2;
	font-size: 110%;
}


/**
 * Post-types specific
 */
.post-form .post-image,
.post-form .post-youtube,
.post-form .post-weblink,
.post-form .post-pdf,
.post-form .post-countdown,
.post-form .post-survey {
	display: none;
}

.post-form .post-survey .select2-dropdown {
	/* Hide select2 suggestions*/
	display: none;
}

/**
 * Visibility choice
 */
.post-form .post-visiblity-container {
	display: inline-block;
	margin-right: 10px;
}

.post-form .post-visiblity-container label {
	margin-left: 5px;
}

.post-form .post-visiblity-container input {
	display: none;
}

.post-form .post-visiblity-container span {
	color: #b5bbc8;
}

.post-form .post-visiblity-container input:checked ~ span {
	color: #111111;
}
/**
 * Posts edition stylesheet
 *
 * @author Pierre HUBERT
 */

.edit-post-modal .editor {
	width: 100%;
	min-height: 100px;
	font-size: 14px;
	line-height: 18px;
	border: 1px solid #dddddd;
	padding: 10px;
	margin-bottom: 10px;
}
/**
 * Post target picker
 *
 * @author Pierre HUBERT
 */

.posts-target-picker {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
}

.posts-target-picker .title {
	width: 100%;
	margin-bottom: 10px;
	margin-top: 20px;
}

.posts-target-picker .title:first-child {
	margin-top: 0px;
}

.posts-target-picker > div {
	padding: 5px;
	cursor: pointer;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 95px;
	text-align: center;
}

.posts-target-picker > div:hover {
	background-color: #0003;
}

.posts-target-picker > div:active {
	background-color: black;
	color: white;
}

.posts-target-picker img {
	height: 30px;
	width: 30px;
	margin-right: 5px;
}
/**
 * Comments UI
 *
 * @author Pierre HUBERT
 */

.post-comments {
	padding: 10px;
}

.post-comments .comment-img-container {
	text-align: center;
}

.post-comments img.comment-img {
	width: 100px !important;
	height: auto !important;
	float: none;
}

.post-comments .delete-comment-link,
.post-comments .edit-comment-link {
	margin-left: 5px;
	color: #b5bbc8;
}

.post-comments .delete-comment-link:active,
.post-comments .edit-comment-link:active {
	color: black;
}

.post-comments .comment-content .emoji {
	float: none;
    height: 1em !important;
    width: auto !important;
}
/**
 * Comments form stylesheet
 *
 * @author Pierre HUBERT
 */

.comment-creation-form {
	margin-top: 10px;
}

.comment-creation-form:first-child {
	margin-top: 0px;
}

.comment-creation-form .input-group-btn .comment-emoji-select .btn {
	padding-left: 4px;
	padding-right: 2px;
}
.comment-creation-form .input-group-btn .comment-image-select .btn {
	padding-left: 2px;
	padding-right: 5px;
}

.comment-creation-form .comment-image-select {
	margin-bottom: -2px !important;
}

.comment-creation-form .comment-image-select input[type="file"]{
	display: none;
}

.comment-creation-form .comment-image-select a,
.comment-creation-form .comment-emoji-select a {
	color: black;
}
/**
 * Notifications dropdown stylesheet
 *
 * @author Pierre HUBERT
 */

.no-notification-msg {
	text-align: center;
	padding: 20px;
}
/**
 * Notifications UI
 *
 * @author Pierre HUBERT
 */

.notification-container p {
	white-space: normal;
}

.notification-container .notification-creation-time {
	color: #888888;
}
/**
 * Incognito mode stylesheet
 *
 * @author Pierre HUBERT
 */

#incognito-block {
	z-index: 900;
	position: fixed;
	left: 10px;
	bottom: 54px;
	text-align: center;
	background-color: #001F3F;
	padding: 10px;
	color: white;
}

#incognito-block i {
	font-size: 200%;
}

#incognito-block span {
	display: block;
}
/**
 * Call window
 */

#callsTarget {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	visibility: hidden;
	z-index: 1000;
}

.call-window {
	width: 338px;
	min-width: 300px;
	max-width: 100%;
	min-height: 174px;
	position: absolute;
	top: 100px;
	right: 10px;
	z-index: 100;
	border: 1px black solid;
	display: flex;
	flex-direction: column;
	background-color: #000000b3;
	visibility: visible;
}

.call-window.audio-only {
	min-height: unset;
}

/* This could be moved to conversation page stylesheet also */
.call-window.embedded {
	position: unset;
	top: unset !important;
	left: unset !important;
	width: 90%;
	height: 150px;
	margin: 10px auto;
}
.call-window.embedded.audio-only {
	height: 90px;
}

.call-window .head {
	color: white;
	padding: 5px;
	margin-left: 5px;
	margin-right: 5px;
}

.call-window .head .fa-phone {
	margin-right: 5px;
	vertical-align: middle;
}

.call-window .head .title {
	cursor: default;
}

.call-window .head a {
	color: inherit;
}

.call-window .head .time {
	font-size: 80%;
}

.call-window .record-label {
	color: red;
	margin-left: 10px;
	text-align: center;
}

.call-window .record-label a {
	margin-left: 5px;
	background-color: darkred !important;
	font-weight: bold;
	color: white;
}

.call-window .members-area {
	color: white;
	font-size: 80%;
	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.call-window .members-area span {
	margin: 0px 5px;
}

.call-window .members-area span.ready {
	color: rgb(1, 218, 1);
}

.call-window .members-area span.talking {
	font-weight: bold;
	text-decoration: underline;
}

.call-window .messages-area {
	color: white;
	margin: 1px 10px;
	text-align: center;
}

.call-window .videos-area {
	display: flex;
	flex-direction: row;
	max-width: 100%;
	flex-wrap: wrap;
	flex: 1;
	justify-content: center;
	overflow: hidden;
}

.call-window .videos-area .video {
	flex-shrink: 1;
	flex: 1;
	max-height: 100%;
	max-width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.call-window .videos-area .video video {
	border: 2px transparent solid;
}

.call-window .videos-area .video video.talking {
	border: 2px green solid;
}

.call-window .videos-area .video video {
	width: 100%;
	height: 100%;
}

.call-window .window-bottom {
	height: 40px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: black;
}

.call-window .window-bottom div {
	color: #fff6;
	flex: 1;
	text-align: center;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;	
}

.call-window .window-bottom div.selected {
	color: white;
}

.call-window .window-bottom div:hover {
	background-color: #ffffff4d;
}

.call-window .window-bottom div:active {
	background-color: #fff3;
}

.call-window .window-bottom div i {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.call-window .window-bottom div.hang-up-button {
	color: #dd4b39;
}

.call-window .window-bottom .dropdown-menu {
	left: -125px;
}

.call-window .window-bottom .dropdown-menu i {
	display: inline;
}

/**
 * Responsive mode
 */
@media screen and (max-width: 730px) {

	#callsTarget {
		z-index: 1030;
	}

	.call-window {
		width: 100%;
		position: fixed;
		left: 0px;
	}

	.call-window.embedded {
		height: unset;
	}

	.call-window .videos-area {
		flex-direction: column;
	}
}
/**
* Sidebar stylesheet
*
* @author Pierre HUBERT
*/

.main-sidebar > .sidebar {
	display: flex;
	flex-direction: column;
	position: absolute;
	height: 100%;
}

body.sidebar-collapse .main-sidebar > .sidebar {
	position: unset;
}


body.sidebar-collapse .main-sidebar > .sidebar .hide-on-collapse {
	display: none;
}

.main-sidebar .intermediate-label {
	color: #c3c3c3;
	padding: 10px 25px 0px 15px;
	font-size: 12px;
}


/**
 * Search form
 */
.sidebar-search-results {
	display: flex;
	height: 200px;
	background-color: white;
	position: absolute;
	z-index: 2;
	width: 90%;
	margin-top: -2px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.sidebar-search-results  .results-container {
	flex: 1;
}

.sidebar-search-results  .results-container > div {
	padding: 10px;
	cursor: pointer;
}

.sidebar-search-results  .results-container > div:hover {
	background-color: #0003;
}

.sidebar-search-results  .results-container > div img {
	height: 30px;
	margin-right: 5px;
}

/**
 * Memberships
 */
.main-sidebar .memberships-list {
	flex: 2;
	overflow: hidden;
}

body.sidebar-collapse .memberships-list,
body.sidebar-collapse .slimScrollDiv,
body.sidebar-collapse .sidebar-menu {
	overflow: unset !important;
}

.main-sidebar .memberships-list img {
	width: 20px;
	margin-right: 10px;
	margin-left: -4px;
}

.main-sidebar .memberships-list .subinfo {
	margin-left: 24px;
	font-size: 90%;
}


body.sidebar-collapse .main-sidebar .memberships-list .subinfo {
	display: none;
}

body.sidebar-collapse .main-sidebar .memberships-list li:hover .subinfo {
	display: block;
	background: #2c3b41;
	position: absolute;
	width: 180px;
	left: 50px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom-right-radius: 4px;
	margin: 7px -3px;
	padding-left: 20px;
}


.main-sidebar .memberships-list .btn-xs {
	padding-top: 0px;
	padding-bottom: 0px;
	height: 1.35em;
	width: 3em;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/**
 * Conversations entries
 */

/**
add left border
.main-sidebar .memberships-list .conversation_memberhsip.has-unread-msg::before {
	border: 2px white solid;
  border-radius: 2px 0px 0px 2px;
  content: " ";
  position: absolute;
  background-color: white;
  height: 100%;
  left: 1%;
}
*/

.main-sidebar .memberships-list .group-conversation {
	margin-left: 25px;
}

.main-sidebar .memberships-list .conversation_memberhsip.has-unread-msg {
	background-color: #00a65a30;
}
  

.main-sidebar .memberships-list .conversation_memberhsip a {
	padding: 5px 5px 5px 15px;
}

.main-sidebar .memberships-list .conversation_memberhsip span {
	font-size: 90%;
}

.main-sidebar .memberships-list .conversation_memberhsip .subinfo {
	font-size: 80%;
}

.main-sidebar .conversation_memberhsip.with-call .subinfo {
	display: none;
}



.main-sidebar .call_notice {
	background-color: #db8b0b82;
	margin-bottom: 5px;
}

.main-sidebar .call_notice a {
	padding-top: 0px;
	padding-bottom: 0px;
}

.main-sidebar .call_notice a:hover {
	background-color: #db8b0b82 !important;
}



/**
 * Conversations
 */
.main-sidebar .recents-conversations-list {
	flex: 1;
}
/**
 * Pacman stylesheet
 *
 * @author Pierre HUBERT
 */

.pacman-iframe {
	width: 342px;
	height: 426px;
	margin: auto;
	display: block;
}

.pacman-iframe + p {
	text-align: center;
}
/**
 * Password input
 */
/**
 * Main posts stylesheet
 *
 * @author Pierre HUBERT
 */

.page-container {
	max-width: 1500px;
	margin: auto;
}

.user-page-right-column {
	max-width: 800px;
}
/**
 * Access To Page Forbidden stylesheet
 *
 * @author Pierre HUBERT
 */

/**
 * User signed out
 */
.user_access_denied_signed_out {
	margin: auto;
	margin-top: 30px;
	max-width: 500px;
}

/**
 * User signed in
 */
.box-user-access-denied {
	margin: auto;
	margin-top: 30px;
	max-width: 350px;
}
/**
 * Profile information stylesheet
 *
 * @author Pierre HUBERT
 */

.user-tag-in-profile {
	color: #6f737b;
	text-align: center;
	font-size: 90%;
	margin-bottom: 10px;
}

.about-user-box {
	word-break: break-all;
}

.about-user-box .emoji {
	height: 1em !important;
}
/**
 * User posts stylesheet
 *
 * @author Pierre HUBERT
 */

.box-user-posts .second-user-area {
	display: none;
}
/**
 * Single post page stylesheet
 *
 * @author Pierre HUBERT
 */

.single-post-row {
	padding-top: 50px;
}

.single-post-row .col-md-6 {
	margin: auto;
	float: none;
}
/**
 * Conversations page main script file
 *
 * @author Pierre HUBERT
 */


.conversations-page #pageTarget {
    display: flex;
    flex-direction: column;
}

.conversations-page-container {
	max-width: 1000px;
	margin: auto;
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
	padding-bottom: 20px;
	padding-top: 20px;
}


.conversations-page-container .conv-list-loading-msg {
	text-align: center;
	padding: 10px;
}
/**
 * Conversations list pane
 *
 * @author Pierre HUBERT
 */

.conversations-page-container .conversations-list-box {
	max-height: 100%;
	max-width: 300px;
	margin: auto;
}

.conversations-page-container .conversations-list-box ul {
	max-height: 100%;
}

.conversations-page-container a.selected {
	background: #f7f7f7;
}
/**
 * Conversation pane stylesheet
 *
 * @author Pierre HUBERT
 */

.big-box-conversation {
	flex: 1;
	display: flex;
	flex-direction: column;
	max-width: 90%;
	margin: auto;
}

.big-box-conversation .box-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.big-box-conversation .direct-chat-messages {
	flex: 1 1 auto;
	height: 0px;
	overflow: auto;
	scroll-behavior: smooth;
}

.big-box-conversation .direct-chat-info span {
	margin-right: 10px;
}

.big-box-conversation .direct-chat-msg {
	margin-bottom: 15px;
}

.big-box-conversation .direct-chat-text {
	display: inline-block;
	margin-left: 10px;
	max-width: 150px;
	word-wrap: break-word;
}

.big-box-conversation .direct-chat-msg.curruser .direct-chat-text::after,
.big-box-conversation .direct-chat-msg.curruser .direct-chat-text::before {
	border-right-color: var(--primary-blue);
}

.big-box-conversation .direct-chat-msg.curruser .direct-chat-text {
	background: var(--primary-blue);
	border-color: var(--primary-blue);
	color: white;
}

.big-box-conversation .btn-primary {
	border-color: var(--primary-blue);
}

.big-box-conversation .btn-primary:hover {
	background-color: var(--primary-blue);
	border-color: var(--primary-blue);
}



.big-box-conversation .direct-chat-text .message-img {
	max-width: 100%;
	max-height: 200px;
	display: block;
	margin: auto;
}

.big-box-conversation .otheruser .direct-chat-text .a,
.big-box-conversation .otheruser .direct-chat-text a  {
	color: black;
}

.big-box-conversation .curruser .direct-chat-text .a,
.big-box-conversation .curruser .direct-chat-text a  {
	color: white;
}

.big-box-conversation .direct-chat-msg .srv-msg {
	text-align: center;
	font-style: italic;
}
/**
 * Groups main page stylesheet
 * 
 * @author Pierre HUBERT
 */

.groups-main-page {
    max-width: 450px;
    margin: auto;
    text-align: center;
    padding-top: 50px;
}

.groups-main-page .no-group-notice {
    margin-top: 10px;
    text-align: center;
}

.groups-main-page .group-item {
    text-align: justify;
    margin-top: 10px;
}

.groups-main-page .group-item .group-icon {
    max-width: 50px;
    margin-right: 10px;
}

.groups-main-page .group-item div {
    display: inline-block;
}

.groups-main-page .group-item .group-name {
    width: 180px;
    vertical-align: middle;
}

.groups-main-page .group-item .buttons-area {
    width: 20px;
}

.groups-main-page .group-item .buttons-area .fa {
    color: #b5bbc8;
}

.groups-main-page .group-item .buttons-area .fa:active {
    color: black;
}

@media screen and (max-width: 450px){

    .groups-main-page {
        max-width: 317px;
    }

    .groups-main-page .group-item .group-name {
        width: 120px;
    }
}

/**
 * Group conversation
 *
 * @author Pierre Hubert
 */

.group-page-conversation, .group-page-conversation .col-md-6  {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.group-page-conversation .col-md-6 {
    margin: auto;
    float: none;
}

.group-page-conversation .box {
    max-width: unset;
}
/**
 * Create groups page main stylesheet
 *
 * @author Pierre HUBERT
 */

.create-group-page {
	max-width: 450px;
	margin: auto;
	padding-top: 60px;
}

.create-group-page form {
	border: 1px #162935 solid;
	padding: 15px;
}

.create-group-page form h3 {
	text-align: center;
	margin-top: 0px;
}

.create-group-page .submit-button-container {
	text-align: center;
}
/**
 * Group page main stylesheet
 *
 * @author Pierre HUBERT
 */

.group-page {
    padding-top: 10px;
}

.group-page .col-md-6 {
    margin: auto;
    float: none;
}
/**
 * Group settings stylesheet
 *
 * @author Pierre HUBERT
 */

.group-settings-container {
    float: none;
    margin: auto;
}

.group-settings-container .separated-block {
    margin-top: 25px;
    margin-bottom: 30px;
    display: block;
}

.group-settings-container .submit-button-container {
    text-align: center;
}

.group-settings-container .groupLogoSettingsContainer {
    text-align: center;
}

.group-settings-container .group-logo-settings-img {
    width: 150px;
    margin: auto;
    margin-bottom: 10px;
    display: block;
}

.group-settings-container .delete-group-link-container {
    text-align: center;
    padding: 20px;
}

.group-settings-container .delete-group-link-container a {
    color: black;
}
/**
 * Groups members page stylesheet
 *
 * @author Pierre HUBERT
 */

.group-members-page {
	float: none;
    margin: auto;
}

.group-members-page .invite-user-form {
	margin-bottom: 30px;
}

.group-members-page .member {
	margin-bottom: 10px;
}

.group-members-page .member div {
	display: inline-block;
}

.group-members-page .member .user-image {
	border-radius: 50%;
	max-width: 50px;
	height: auto;
}

.group-members-page .member .member-name {
	margin-left: 5px;
	font-weight: bold;
	width: 150px;
}

.group-members-page .member .delete-link {
	cursor: pointer;
}

.group-members-page .member .delete-link:active {
	color: #3c8dbc;
}

.group-members-page .member .delete-link {
	width: 20px;
}

.group-members-page .member .btn-membership-level {
	width: 130px;;
}
/**
 * Access forbidden to page groups stylesheet
 *
 * @author Pierre HUBERT
 */

.group-forbidden-page-container {
    max-width: 300px;
    margin: auto;
    margin-top: 15px;
    text-align: center;
}

.group-forbidden-page-container .group-logo {
    width: 130px;
    margin: auto;
    display: block;
}

.group-forbidden-page-container .group-name {
    margin-bottom: 15px;
}
/**
 * About group page
 *
 * @author Pierre Hubert
 */

.about-group-page .props-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.about-group-page .props-list .prop {
    width: 50%;
    padding: 5px;
    margin-bottom: 5px;
    min-height: 70px;
    max-width: 200px;
}

.about-group-page .props-list .prop .title {
    font-weight: bold;
}
/**
 * Groups presence stylesheet
 *
 * This is a Forez feature
 *
 * @author Pierre Hubert
 */
/**
 * Groups header
 *
 * @author Pierre HUBERT
 */

.group-header {
    margin-bottom: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: none;
}

.group-header .group-icon {
    max-height: 150px;
}

.group-header .group-name {
    font-size: 200%;
}

.group-header .group-tag {
    color: #6f737b;
}

.group-header .col-info .fa,
.group-header .col-metadata .fa {
    margin-right: 10px;
    width: 10px;
}

.group-header .group-col-icon {
    text-align: center;
}

.group-header .group-col-icon span {
    display: block;
}

.group-header .box-body {
    display: flex;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.group-header .box-body .spacer {
    flex: 2;
}


.group-header .box-body .col-metadata {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
    min-width: 160px;
}
/**
 * Membership block stylesheet
 *
 * @author Pierre HUBERT
 */

.reject-group-invitation-link {
    color: #f56954;
}
/**
 * Groups posts section stylesheet
 *
 * @author Pierre HUBERT
 */

.box-group-posts .second-user-area {
	display: none;
}
/**
 * Groups page tabs
 *
 * @author Pierre Hubert
 */

.group-page.tabs-container {
    padding-top: 0px;
}

.group-page.tabs-container .nav-tabs-custom {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top: 1px solid #dddddd3d;
}


.group-page.tabs-container .nav-tabs-custom > .nav-tabs > li {
    border-bottom-color: var(--primary-blue) !important;
}

.group-page.tabs-container .nav-tabs-custom > .nav-tabs > li.active {
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
}

/**
 * General settings stylesheet
 *
 * @author Pierre HUBERT
 */

.box-general-settings .input-user-id {
	width: 29%;
	display: inline-block;
}

.box-general-settings .input-user-email {
	width: 70%;
	display: inline-block;
	margin-left: 1%;
}

.box-general-settings .submit-form {
	width: 100px;
	margin: auto;
	display: block;
}

invalidDirectory {
	color: red;
	font-size: 120%;
}
/**
 * Settings language section
 *
 * @author Pierre HUBERT
 */
/**
 * Custom emojis settings
 *
 * @author Pierre Hubert
 */

.box-emojis-settings td {
	height: 69px;
	text-align: center;
	vertical-align: middle !important;
}

.box-emojis-settings img.e {
	height: 2em;
}
/**
 * Security settings section
 *
 * @author Pierre HUBERT
 */


/**
 * Prompt user password box
 */
.box-security-settings .prompt-user-password h4,
.box-security-settings .prompt-user-password p {
	text-align: center;
}

.box-security-settings .prompt-user-password label {
	display: none;
}

.box-security-settings .prompt-user-password .submit-form {
	width: 100px;
	margin: auto;
	display: block;
}



/**
 * Global box rules
 */
.security-settings-form .submit-form {
	width: 150px;
	margin: auto;
	display: block;
}
/**
 * Settings password section stylesheet
 *
 * @author Pierre HUBERT
 */

.box-password-settings .submit-form {
	width: 150px;
	margin: auto;
	display: block;
}
/**
 * Notifications settings
 *
 * @author Pierre Hubert
 */

/**
 * Global logout section
 *
 * @author Pierre HUBERT
 */

.box-global-logout .form-submit {
	width: 170px;
	margin: auto;
	display: block;
}
/**
 * Account image settings section stylesheet
 *
 * @author Pierre HUBERT
 */

.box-account-image-settings .box-body {
	text-align: center;
}

.box-account-image-settings .settings-account-image-preview {
	max-width: 100%;
	display: block;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

.box-account-image-settings .account-image-visibility-form {
	text-align: justify;
}
/**
 * Settings privacy settings section
 *
 * @author Pierre HUBERT
 */

.box-export-account-data-settings .btn {
	float: right;
}

.box-delete-account-settings .btn {
	float: right;
}
/**
 * Latests post stylesheet
 *
 * @author Pierre HUBERT
 */

/**
 * Error message
 */
.latestPostsError {
	width: 100%;
	max-width: 500px;
	margin: auto;
	margin-top: 30px;
}

.latest-posts-row {
	padding-top: 15px;
}

.latest-posts-row .col-md-5 {
	margin: auto;
	float: none;
	width: 100%;
	max-width: 800px;
}
/**
 * Main settings styleesheet
 *
 * @author Pierre HUBERT
 */

.settings-page-container {
	max-width: 1000px;
	margin: auto;
	margin-top: 10px;
}
/**
 * Create account stylesheet
 *
 * @author Pierre HUBERT
 */

.create-account-form {
	border: 1px gray solid;
	max-width: 500px;
	margin: auto;
	margin-top: 30px;
	padding: 0px 10px 10px 10px;
}

.create-account-form h2 {
	text-align: center;
	margin-bottom: 20px;
}

.create-account-form p {
	text-align: center;
}

.create-account-form .callout p {
	text-align: justify;
}

.create-account-form .submit-form {
	text-align: center;
}

.create-account-form .bottom-form-links {
	text-align: center;
	margin-top: 15px;
}
/**
 * Password forgotten page main stylesheet
 *
 * @author Pierre HUBERT
 */

.box-password-forgotten {
	max-width: 350px;
	margin: auto;
	margin-top: 30px;
}
/**
 * Password forgotten prompt option section stylesheet
 *
 * @author Pierre HUBERT
 */

.password-reset-prompt-option-section p {
	text-align: justify;
}

.password-reset-prompt-option-section .btn {
	width: 100%;
	margin-top: 10px;
}
/**
 * Mail admin to reset password
 *
 * @author Pierre HUBERT
 */

.reset-password-by-mail-step .title {
	text-align: center;
	margin-top: 0px;
}

.reset-password-by-mail-step p {
	text-align: justify;
}

.reset-password-by-mail-step .btn-mail {
	width: 100%;
}
/**
 * Reset password main script
 *
 * @author Pierre HUBERT
 */

.reset-password-box {
	max-width: 300px;
	margin: auto;
	margin-top: 30px;
}

.reset-password-box .btn {
	display: block;
}
/**
 * Search page main stylesheet
 *
 * @author Pierre HUBERT
 */

.searchPage {
	max-width: 500px;
	margin: auto;
	margin-top: 30px;
}

.searchPage .results-container {
	margin-top: 30px;
}


.searchPage .results-container li a img {
	margin: auto 10px auto auto;
	max-width: 40px;
	height: 40px;
	border-radius: 50%;
	visibility: visible;
}