/*	Make the chat area wider	*/
@media (min-width: 1440px) {
	.container-chat {
		max-width: 100%;
	}
}

@media (min-width: 1200px) {
	.container-chat {
		max-width: 100%;
	}

    .sidebar {
        border-left: 1px solid var(--brx-border-color);
        border-right: 1px solid var(--brx-border-color);
    }
}
/*	END OF Make the chat area wider	*/

/* FIX: animate-4.1.1.css breaks the Font-Awesome spin, so we have to fix it */
i.fa-spin {
    animation-duration: 2s !important;
    animation-iteration-count: infinite !important;
}


/*  !!! Scrollbars !!!
    WARNING: Use either scroll-box or scroll-wrapper + scroll-content
    scroll-box - this is styled native scrollbar
    scroll-wrapper + scroll-content - this is artifical scrollbar that hides automatically
*/

/*BEG>  Styled native Scrollbar */
/*
.scroll-box {
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0.375rem;
}

.scroll-box::-webkit-scrollbar {
    width: 0.5rem;
}

.scroll-box::-webkit-scrollbar-track {
    background: var( --brx-scrollbar-track-color );
    border-radius: 0.3rem;
}
.scroll-box::-webkit-scrollbar-thumb {
    background: var( --brx-scrollbar-thumb-color );
    border-radius: 0.3rem;
}
.scroll-box::-webkit-scrollbar-thumb:hover {
    background: var( --brx-scrollbar-thumb-hover-color );
}
*/
/*END>  Styled native Scrollbar */


/*BEG>  Custom Scrollbar autohide */
/**/
.scroll-wrapper {
    position: relative;
    border: none;
    overflow: hidden; /* hide native scrollbar */
/*  padding-right: 0.5rem;*/
}
    .scroll-wrapper:not(.full) {
        padding-right: 0.5rem;
    }


.scroll-content {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width:    none; /* Firefox   */
    -ms-overflow-style: none; /* IE и Edge */
    scrollbar-width:    none; /* Firefox   */
}

.scroll-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.custom-scrollbar {
    position: absolute;
    top: 0;
    right: 0px;
    width: 0.6rem;
    height: 100%;
    background: var( --brx-scrollbar-track-color );
    border-radius: 0.3rem;
    pointer-events: none;
    transition: opacity 0.8s ease;
    opacity: 0;
    pointer-events: auto;
}

.custom-scrollbar-thumb {
    position: absolute;
    top:  0;
    left: 0;
    width: 100%;
    min-height: 0.6rem; /* 2x border-radius */
    background-color: var( --brx-scrollbar-thumb-color );
    border-radius: 0.3rem;
}

.scroll-wrapper:hover .custom-scrollbar-thumb:hover {
    background: var( --brx-scrollbar-thumb-hover-color );
}

/*.scroll-wrapper:hover .custom-scrollbar,*/
.scroll-wrapper.scroll-active .custom-scrollbar {
    opacity: 1;
}
.scroll-wrapper .custom-scrollbar:hover {
    opacity: 1;
}

.scroll-wrapper.dragging .custom-scrollbar-thumb {
    background: var( --brx-scrollbar-thumb-hover-color );
}
.dragging .custom-scrollbar-thumb {
    background: var( --brx-scrollbar-thumb-hover-color );
}
/*END>  Custom Scrollbar autohide */


/*BEG> Photo-Viewer */
    .photo-viewer {
/*      position: fixed;*/
        position: relative; /* Inside LightBox */
        inset: 0;
/*      background: rgba(0, 0, 0, 0.5);*/
        display: flex;
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }

    .photo-viewer .viewer-overlay {
        position: relative;
        width:  100%;
        height: 100%;
        overflow: hidden;
    }

    .photo-viewer .viewer-track {
        display: flex;
        width:  200%;
        height: 100%;
/*        transition: none; */
    }

.slide-left-start {
    transition: none;
    transform: translateX(-50%);
}
.slide-left-end {
    transition: transform 0.3s linear;
    transform: translateX(0%);
}
.slide-right-start {
    transition: none;
    transform: translateX(0%);
}

.slide-right-end {
    transition: transform 0.3s linear;
    transform: translateX(-50%);
}

    .photo-viewer .viewer-img-frame {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50%;
        height: 100%;
    }
    .photo-viewer .viewer-img {
/*
        width:  100%;
        height: 100%;
*/
        display:block;
        object-fit: contain;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%
    }

    .photo-viewer .nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0,0,0, 0.2);
        color: var(--bs-white);
        font-size: 3rem;
        border: none;
        padding: 0.5rem 1.2rem;
        margin: 1px;
        justify-content: center;
        cursor: pointer;
        opacity: 0;
        transition: opacity 1.3s;
        border-radius: 0.5rem;
        text-align: center;
    }

    .photo-viewer .viewer-overlay:hover .nav {
        opacity: 1;
    }

    .photo-viewer .nav.prev {
        left: 0px;
    }

    .photo-viewer .nav.next {
        right: 0px;
    }
/*END> Photo-Viewer*/




.bg-badge-mypic {
    background: #909090;
}

.dropdown-divider {
    margin: 2px;
    height: 1px;
    border: none;
    color: var(--brx-dropdown-divider-color);
}

.dropdown-item-icon {
    width: 1rem;
    margin-right: 0.5rem;
}

.dropdown-toggle::after {
    position: absolute;
    top:   1.5rem;
    right: 1.0rem;
    margin-left: 0.2rem;
}

.form-control {
    color: var(--brx-input-color) !important;
    background-color: var(--brx-input-background-color) !important;
    color: var(--bs-body-color);
    border: none;
    border-radius: 0.8rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.form-control-lg {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.form-control:focus {
    background-color: var(--brx-input-background-color);
    color: var(--bs-body-color);
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding-top:    0.5rem;
    padding-bottom: 0.5rem;
}


/*  SEARCH  */
.left-round-search {
    padding-left: 1rem;
    padding-right: 0.3rem;
    border-start-start-radius: 1.2rem;
    border-end-start-radius: 1.2rem;
}

.right-round-search {
    padding-left: 0.3rem;
    padding-right: 1rem;
    border-start-end-radius: 1rem;
    border-end-end-radius: 1rem;
}


.input-group .search-box,
.input-group-text {
    color: var(--brx-input-color);
    background-color: var(--brx-input-background-color);
    border: 1px solid var(--brx-input-background-color);
}

/* Replace the browser defined color and background for "auto-filled input fileds" (Sign in screen) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    background-clip: text; /*  Chrome's nasty default background to not affect border   */
    -webkit-background-clip: text; /*  This also work as regular "background-clip:"    */
    -webkit-text-fill-color: var(--brx-input-autofill-color); /*  Text color  */
    -webkit-box-shadow: 0 0 0px 40rem var(--brx-input-autofill-background-color) inset; /*  Tricky way to make colorized background */
/*
    transition: background-color 5000s ease-in-out 0s;
*/
}

/*  FIX SEARCH when auto-fill  */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    border-radius: 1rem;
    caret-color: var(--brx-input-autofill-color); /*  Text color  */
}

.message-input {
    background: none;
    border: none !important;
    border-radius: 0;
    padding-left: 1rem;
    padding-right: 0;
    background-clip: text;
    white-space: normal;
}

.search-input {
    background: none;
    border: none !important;
    border-radius: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background-clip: text;
}


/*  Label inside text field (Profile name, email, phone, personal message)  */
.form-floating label {
    color: var(--brx-placeholder-color);
}

/*  Placeholder in SEARCH, MESSAGE   */
.message-input::placeholder,
.search-icon,
.search-input::placeholder {
    color: var(--brx-placeholder-color);
    font-weight: 60;
}

.message-input:focus,
.search-input:focus {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    color: var(--bs-body-color);
}

.form-control .search-input {
    background: transparent !important;
    background-clip: content-box;
    border: none;
}

.search-box {
    border: 1px solid var(--brx-input-background-color);
    border-radius: 1.2rem;
    background: var(--brx-input-background-color);
}

.search-box:focus-within {
    border: 1px solid var(--brx-input-border-color);
}


.input-group-text {
    padding-top:    0rem;
    padding-bottom: 0rem;
}


/* Search in message - highlight the matching word */
.search-match-list {
    color: var( --brx-search-message-match-list-color );
    font-weight: bold;
    background: none;
    border: none;
}

.search-match {
    background: var( --brx-search-message-match-background );
    color: var( --brx-search-message-match-color );
/*
    border: 1px solid var( --brx-search-message-match-border-color );
    border-radius: 0.4rem;
    padding-left:  0.1rem;
    padding-right: 0.1rem;
    padding-top:    0.2rem;
    padding-bottom: 0.2rem;
*/
}

.search-match-alt {
    color: var( --brx-search-message-match-color-alt );
}

.search-match-balloon {
    border: var( --brx-search-message-balloon-border-size ) solid var( --brx-search-message-balloon-border-color ) !important;
    animation: search-match-balloon-pulse 0.5s ease-in-out 1;
}

.search-match-balloon-alt {
    border: var( --brx-search-message-balloon-border-size ) dashed var( --brx-search-message-balloon-border-color-alt ) !important;
}

.search-mode {
    border: 3px solid var( --brx-search-message-chat-content-border-color );
    background: var( --brx-search-message-chat-content-background-color );
}

@keyframes search-match-balloon-pulse {
    0% {
        transform: scale(1.0);
        opacity: 1;
    }

    45% {
        transform: scale(1.5);
        opacity: 1;
    }
    55% {
        transform: scale(1.5);
        opacity: 1;
    }

    100% {
        transform: scale(1.0);
        opacity: 1;
    }
}

/* *************** */

/* Search Progress Overlay */
.search-progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba( var(--brx-chat-window-background), 0.4 );
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050; /* По-високо от други елементи */
    backdrop-filter: blur(1px) grayscale( 50% );
}

.spo-spinner{
    width: 3rem;
    height: 3rem;
}

.blurred
{
    filter: blur(4px);
}


/* SweetAlert2 pop-up */
.swal2-popup {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* SweetAlert2 buttons border */
.swal2-styled.swal2-deny:focus,
.swal2-styled.swal2-cancel:focus,
.swal2-styled.swal2-default-outline:focus,
.swal2-styled:focus {
    box-shadow: none !important;
    outline: 0 !important;
}
/* No need. Inherits color from popup
.swal2-html-container {
    color: var(--bs-body);
}
*/
/* SweetAlert2 buttons style */
.swal2-styled.swal2-confirm {
    background: var(--bs-primary);
    color: var(--brx-btn-primary-color);
    box-shadow: none;
}
.swal2-styled.swal2-deny,
.swal2-styled.swal2-cancel {
    background: var(--bs-secondary);
    color: var(--brx-btn-secondary-color);
}

/* Remove contact modal, name of the peer */
.name-accented {
    color: var(--brx-name-accented-color) !important;
}

/*  Add Contacts - Search result    */
.btn-add-contacts-search {
    width: 4rem;
    height: 100%; /*    height: 4rem;*/
    border-radius: 30%;
    font-size: larger;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--brx-text-muted);
    background: none;
}
    .btn-add-contacts-search:hover {
        color: var(--brx-btn-hover-color)!important;
    }

    .btn-add-contacts-search:disabled,
    .btn-add-contacts-search:disabled:hover
    {
        color: var(--brx-placeholder-color);
    }

    .table-wrapper {
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        border: 1px solid var(--brx-border-color);
        max-height: 90%; /* total height including header */
        display: flex;
        flex-direction: column;
        border-radius: 0.8rem;
        overflow: hidden;
    }

/* Table structure */
.flex-table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.flex-table-row {
    display: grid;
    grid-template-columns: auto 1fr 5rem; /* status | name | button */
    align-items: stretch; /* default, but ensures equal height */
    border-bottom: 1px solid var(--brx-border-color);
    padding: 0;
}

.flex-table-row:last-child {
    border-bottom: none;
}

    .flex-table-row:hover:not(.flex-table-header) {
        color: var(--brx-table-row-hover-color);
        background-color: var(--brx-table-row-hover-bg-color);
    }

    .flex-table-row:not(:hover):not(.flex-table-header):nth-child(odd) {
        background: var(--brx-table-row-odd);
    }

    .flex-table-row:not(:hover):not(.flex-table-header):nth-child(even) {
        background: var(--brx-table-row-even);
    }


.flex-table-cell {
    padding: 0.2rem 0.6rem;
    font-size: large;
    border-right: 1px solid var(--brx-border-color);
    flex: 1;
    display: flex;
    align-items: center; /* center content vertically */
    justify-content: left;
}
    .flex-table-cell:last-child {
        border-right: none;
        justify-content: center;
    }

.acus-btn-cell {
}

.acus-btn {
    line-height: 1rem;
    font-size: xx-large;
    padding: 0 0.8rem;
    background: transparent;
    color: var(--brx-btn-color) !important;
}

.acus-btn .disabled {
    background: transparent;
}

.flex-table-row:hover .acus-btn,
.acus-btn:hover {
    color: var(--brx-btn-hover-color) !important;
}


    /* Other columns expand */
    .flex-table-cell:not(.status):not(.acus-btn-cell) {
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Header (fixed, not scrolling) */
.flex-table-header {
    line-height: 2.4rem;
    background-color: var(--brx-add-contacts-table-header-bg-color) !important;
    border-top-left-radius: 0.8rem;
    border-top-right-radius: 0.8rem;
}
.flex-table-footer {
    height: 1em;
    background-color: var(--brx-add-contacts-table-header-bg-color) !important;
    border-top: 1px solid var(--brx-border-color);
}

/* Body (scrollable) */
.flex-table-body {
    overflow-y: auto;
    flex: 1 1 auto;
}

.add-contacts-user-status {
    flex: 0 0 auto;
    text-align: center;
    border-radius: 50%;
    border: 2px solid var(--bs-body-bg);
    width: 1.5rem;
    height: 1.5rem;
}

.acus-none {
    background: transparent;
    border-color: var(--brx-border-color);
}

.acus-offline {
    background: var(--bs-status-offline);
}

.acus-online {
    background: var(--bs-status-online);
}

.acus-away {
    background: var(--bs-status-away);
}

.acus-busy {
    background: var(--bs-status-busy);
}


/* *************** */

/*	Change the chat-window background	*/
#bchat-chatwindow, #bchat-welcome {
    background-color: var(--brx-chat-window-background);
}
.chat-footer::before {
	background-color: var(--brx-chat-window-background);
	opacity: 0.85;
}

/*	Change the menu-bar background	*/
.navigation {
	background-color: var(--brx-menu-bar-background);
}



/*	Styles for Welcome screen	*/
@media (min-width: 1200px) {
	.main-welcome {
		height: 100vh;
	}
}

.main-welcome {
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.main-welcome {
	overflow: hidden;
}




/*	Base styles	*/

.absolute-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
}

.mirror {
	transform: scaleX(-1);
}


.btn-modal {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    padding-left: 2em;
    padding-right: 2em;
    min-width: 8em;
    width: 8em;
}

.modal-screenshot
{
/*
    max-width:  90%;
    max-height: 90%;
*/
}

/* Remove borders for modals */
.modal-header,
.modal-footer {
    border-color: var(--brx-modal-separator-color);
}

/*	<body> modifications when a modal is open	*/
.modal-open {
}

/*	Make modal backdrop darker	*/
.modal-backdrop {
	background-color: var(--brx-modal-backdrop-color);
/*  Too heavy for old computers.
    backdrop-filter: blur( 4px );
*/
}

	.modal-backdrop.show {
		opacity: 1;
	}

/*	Fix the color of btn-success
	The theme defines it with a color between red and orange
*/
:root {
	--bs-success: #42ba96;
	--bs-success-rgb: 66, 186, 150;
	--bs-status-online: #00CC00;
	--bs-status-offline: #9F9FA1;
	--bs-status-away: rgb(var(--bs-warning-rgb));
	--bs-status-busy: rgb(var(--bs-danger-rgb));
	--brx-scroll-opacity: 0.5;
}

.btn-success {
	color: #fff;
	background-color: #42ba96;
	border-color: #42ba96;
}

.btn-success:hover {
	color: #fff;
	background-color: #389e7f;
	border-color: #389e7f;
}

.btn-success:focus, .btn-success.focus {
	color: #fff;
	background-color: #389e7f;
	border-color: #389e7f;
	-webkit-box-shadow: 0 0 0 0 rgba(94, 196, 166, 0.5);
	box-shadow: 0 0 0 0 rgba(94, 196, 166, 0.5);
}

.btn-success.disabled, .btn-success:disabled {
	color: #fff;
	background-color: #42ba96;
	border-color: #42ba96;
}

.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
	color: #fff;
	background-color: #359478;
	border-color: #359478;
}

.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
	-webkit-box-shadow: 0 0 0 0 rgba(94, 196, 166, 0.5);
	box-shadow: 0 0 0 0 rgba(94, 196, 166, 0.5);
}


.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-left: 0;
    padding-right: 0;
}


.text-muted {
	color: var(--brx-text-muted) !important;
}

.alert-success {
	color: #fff !important;
	background-color: rgb(var(--bs-success-rgb)) !important;
	border-color: rgb(var(--bs-success-rgb)) !important;
}

/*	END OF Base styles	*/



/* CSS animations */

@keyframes popinout {
	0% { height: 0; opacity: 0; }
	10% { height: 100%; opacity: 1; }
	90% { height: 100%; opacity: 1; }
	100% { height: 0; opacity: 0; }
}

@keyframes errorblink {
	0% { border-color: rgba(220, 53, 69, .85); }
	15% { border-color: rgba(252, 242, 43, .85); }
	30% { border-color: rgba(220, 53, 69, .85); }
	45% { border-color: rgba(252, 242, 43, .85); }
	60% { border-color: rgba(220, 53, 69, .85); }
	70% { border-color: rgba(252, 242, 43, .85); }
	80% { border-color: rgba(220, 53, 69, .85); }
	90% { border-color: rgba(252, 242, 43, .85); }
	100% { border-color: rgba(220, 53, 69, .3); }
}

@keyframes successblink {
	0% { border-color: rgba(66, 186, 150, .3); }
	15% { border-color: rgba(1, 118, 255, .6); }
	30% { border-color: rgba(66, 186, 150, .3); }
	45% { border-color: rgba(1, 118, 255, .6); }
	60% { border-color: rgba(66, 186, 150, .3); }
	75% { border-color: rgba(1, 118, 255, .6); }
	90% { border-color: rgba(66, 186, 150, .3); }
	100% { border-color: rgba(1, 118, 255, .2); }
}

@keyframes jump {
	0% {
		height: 10px;
		top: -5px;
	}
	100% {
		top: -15px;
		height: 30px;
	}
}

@keyframes toolbarout {
	0%		{ transform: translate3d(0, 0, 0); }
	75%		{ transform: translate3d(0, 0, 0); }
	100% 	{ transform: translate3d(0, -100%, 0); }
}

@keyframes uplaod {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(-25px);
	}
}

@keyframes grow {
	0% {
		width: 30%;
		height: 30%;
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	100% {
		width: 80%;
		height: 80%;
		opacity: 0;
	}
}

@keyframes blinker {
	50% {
		opacity: 0.3;
	}
}

/* EOF CSS animations */



/* Sidebar */
#sidebar-pinned-messages.sticky-top {
	background: inherit;
	padding-top: 1.25rem;
}

	#sidebar-pinned-messages.sticky-top:empty {
		padding-top: 0;
	}

/*	EOF Sidebar */


/*	Make the focused input item glow in blue	*/
input[type=text].form-control,
input[type=password].form-control,
input[type=email].form-control,
textarea.form-control,
div[contenteditable=true].form-control {
    border: 1px solid var(--brx-input-background-color);
}

input[type=text].form-control:focus,
input[type=password].form-control:focus,
input[type=email].form-control:focus,
textarea.form-control:focus,
div[contenteditable=true].form-control:focus {
	border: 1px solid var(--brx-input-border-color);
}

.btn:disabled {
	cursor: not-allowed;
}
/*	Make the focused input item glow in blue	*/



/*	Put a border around the contacts list elements	*/
.bchat-contact-link {
	cursor: pointer;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-radius: 0.3rem;
}
/*	END OF Put a border around the contacts list elements	*/



/*	Define additional styles for the avatar: Online, Offle, Away, Busy	*/

/* Try to remove the masks, defined in the theme as it is upper-right positioned and don't look good.
	We use our own approach at bottom-right. */
.avatar-online .avatar-img, .avatar-offline .avatar-img,
.avatar-away .avatar-img, .avatar-busy .avatar-img {
	-webkit-mask-image: none;
	mask-image: none;
	-webkit-mask-size: 0 0;
	mask-size: 0 0;
}

.avatar-online::before, .avatar-offline::before,
.avatar-away::before, .avatar-busy::before {
	position: absolute;
	border-radius: 50%;
	display: block;
	content: "";
	height: 30%;
	width: 30%;
	top: 70%;
	right: 1%;
	border: 2px solid white;
}

.avatar-offline::before, .avatar-offline::after {
	background: var(--bs-status-offline);
}

.avatar-online::before, .avatar-online::after {
	background: var(--bs-status-online);
}

.avatar-away::before, .avatar-away::after {
	background: var(--bs-status-away);
}

.avatar-busy::before, .avatar-busy::after {
	background: var(--bs-status-busy);
}
/*	END OF Define additional styles for the avatar: Online, Offle, Away, Busy	*/

/*  Profile status color - the badge under the peer profile picture   */
.bg-offline {
    background: var(--bs-status-offline);
}

.bg-online {
    background: var(--bs-status-online);
}

.bg-away {
    background: var(--bs-status-away);
}

.bg-busy {
    background: var(--bs-status-busy);
}

.bchat-status-badge {
    width: 0.8rem;
    height: 0.8rem;
}

.bchat-mood {
    padding-top: 0.3rem;
}

.message-inner {
    margin-left: 0.5rem; /*  Reduce distance between avatar and message text */
    margin-right: 0;
    max-width: 80% !important;
}

.message-out .message-inner {
    margin-left: 0;
    margin-right: 0.5rem; /*  Reduce distance between avatar and message text */
    max-width: 80% !important;
}


/*	Format links in chat messages	*/
.message-text a {
	text-decoration: underline;
}
.message-text a {
	color: var(--brx-links-color);
	text-decoration: underline
}

.message-text a:hover {
	color: var(--brx-links-hover-color);
}
/*	END OF Format links in chat messages	*/


/*	Format geo position in chat messages	*/
html [class^="message-content"] .geo-position {
	border-radius: 12px;
	text-decoration: none;
}
/*	END OF Format geo position in chat messages	*/


/*	Format attached files in chat messages	*/
.send-files-notification {
	vertical-align: middle;
	background: var( --bs-blue );
	color: var( --bs-white );
	height: 32px;
	line-height: 26px;
	bottom: 0;
	left: 0;
	display: none;
}

.message-content .attached-files {
	list-style: none;
}

.message-content .attached-files li:not(:first-child) {
	border-top: 1px solid #f5f6fa;
}

.message-content.bg-primary .attached-files li:not(:first-child) {
	border-top-color: #0176ff;
}


.chat-files .dz-upload {
/*	border: 1px solid white;*/
    border: none;
	height: 100%;
	width: 0%;
/*	border-radius: 3px;*/
}

.chat-files .dz-progress {
	display: none; /* This will be switched to 'block' when upload starts (by brosixdropzone.js)*/
	left: 0;
	width: 100%;
	height: 1rem;	/*0.8rem*/ /* default is 0.5rem which is too tiny */
	/*    opacity: 0.9;*/
    background: var(--brx-progress-bg);
    border: 1px solid var( --brx-progress-border-color );
	border-radius: 3px;
}

.chat-files .progress {
    font-size: 0.8rem;
}

.chat-files .dz-error .progress-bar {
    background: var( --brx-progress-error-bg );
}

.chat-files .dz-processing .fe-paperclip {
	display: none;
}

.chat-files .dz-processing .fa-circle-notch {
	display: flex;
}

.chat-files .dz-processing .fa-circle-notch {
	display: flex;
	top: 0;
	font-size: 16px;
}

.chat-files .dz-processing .dropzone-image-preview .fa-circle-notch {
	top: 0;
	font-size: 16px;
}

.chat-files .dz-processing .dropzone-image-preview .avatar-img {
	opacity: 0.4;
}

.chat-files .fa-circle-notch,
.chat-files .dz-complete .fa-circle-notch {
	display: none;
}

.chat-files .dz-complete .fe-paperclip {
	display: flex;
}

.chat-files .dz-success-mark,
.chat-files .dz-error-mark {
	height: 0;
	opacity: 0;
	width: 50px;
	bottom: 0;
	overflow: hidden;
	right: 0;
}

.chat-files .dz-success .dz-success-mark,
.chat-files .dz-error .dz-error-mark {
	animation-name: popinout;
	animation-duration: 4s;
}

.chat-files .dz-success-mark .fa {
	top: 50%;
	transform: translateY(-50%);
}

.chat-files .dz-success .card {
	border: 1px solid rgba(1, 118, 255, .2);
	animation-name: successblink;
	animation-duration: 3s;
}

.chat-files .dz-error .card {
	border: 1px solid rgba(220, 53, 69, .3);
	animation-name: errorblink;
	animation-duration: 3s;
}

.chat-files .dz-error .dz-error-mark {
	left: 0;
	bottom: 0;
	height: 0;
	color: #fff;
	background: rgba(220, 53, 69, .3);
}

.chat-files .dz-error-message {
	max-width: 100%;
}

.chat-files .dz-filename,
.chat-files .dz-size {
	max-width: 10rem;
}

[data-dz-size] > strong {
	font-weight: 800;
}

/*	Format Dropzone for profile picture upload	*/
.dropzone-form-js-profile .dz-preview {
	border-bottom-left-radius: 1.2rem;
	border-bottom-right-radius: 1.2rem;
}
/*	END OF Format attached files in chat messages	*/


/*	Make sure chat images are not too high.
	We also copy styles from img-thumbnail.
*/
.bchat-image {
    max-height: 25vh;
    max-width: 100%;
    height: auto;
    padding: 0.1rem;
/*
    background-color: #fff;
	border: 1px solid #bec2c6;
*/
    background: transparent;
    border: none; /*1px solid var(--bs-body-color);*/
    border-radius: 0.35rem;
}

.bchat-image-holder {
    height:    25vh; /* 25% of viewport height fixed size ensure no height change */
    min-width:  5vw; /* 5% of viewport width ensure enough space */
    margin-left:  auto;
    margin-right: auto;
}

.bmedia-location-holder {
    min-width:  5vw; /* 5% of viewport width ensure enough space */
    min-height: 5rem; /* 20% of viewport height fixed max size */

    width: 100%;
    border: none;
    background: transparent;
}

.bmedia-location {
    width: 50%;
    height: auto;
}

.bmedia-image-holder {
    max-height: 21vh; /* 20% of viewport height fixed max size */
    min-width: 5vw; /* 5% of viewport width ensure enough space */
/*
    margin-left:  auto;
    margin-right: auto;
*/
    border: none;
    background: transparent;
}

.bmedia-image {
    max-height: 20vh;
    max-width: 100%;
    height: auto;
    padding: 0;/*0.1rem;*/
    background: transparent;
    border: none;/*1px solid var(--bs-body-color);*/ /*#bec2c6;*/
    border-radius: 0.35rem;
}

.bmedia-card-body {
    padding: 0.2rem;
/*  background: rgba( 0,0,0, 0.1 );
    border-radius: 0.5rem;
*/
}

.bmedia-user-row {
    vertical-align: middle;
    width: 100%;
    height: 2rem;
/*    border: 1px solid orange;
    border-radius: 0.5rem;     */
/*
    background: rgba( 255,255,255, 0.5 );
    border: 1px solid #e0e0e0;
    overflow: hidden;
    font-size: 1rem !important;
*/
}

.media-video-holder {
    max-height: 20vh;
    min-width:   5vw;
    margin-left: auto;
    margin-right: auto;
}

.bmedia-file-icon {
    color: var( --brx-file-color ) !important;
}

.bchat-image-preview {
    max-width:  80vw; /* 80% of viewport width ensure enough space */
    max-height: 80vh; /* 80% of viewport height ensure enough space */
}
.modal-media-preview {
	max-width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

/* This is used to ommit modal-media-preview */
.modal-images-preview {
    max-width: 90%;
    max-height: 90%;
    width: 90%;
    height: 90%;
}

.modal-add-contacts {
    max-width: 90%;
    max-height: 90%;
    min-width: 50%;
    width: 100%;
    height: 50%;
    min-height: 50%;
    max-height: 90%;
}

.modal-images-preview .modal-content{
    -webkit-box-shadow: none;
    box-shadow: none;
}
/*.modal-dialog .modal-content {*/
.modal-blur-background {
    background-color: var(--brx-image-preview-bg-color) !important;
/*  This is too heavy on old machines. And the effect is barely visible.
    backdrop-filter: blur( 4px );
*/
}
/*
.zoom-overlay-open .zoom-overlay {
    filter: "alpha(opacity=70)";
    opacity: 0.7;
}
img.zoom-img
{
    border: 1px solid #aeb2bb;
    border-radius: 3px;
    background: #ffffff;
    padding: 1px;
}
*/

.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s linear;
    transition: -webkit-transform .3s linear;
    transition: transform .3s linear;
    transition: transform .3s linear,-webkit-transform .3s linear;
    -webkit-transform: none;
    transform: none;
}

.message .avatar,
.message .avatar:focus,
.message .avatar > img {
	border: 0;
	outline: none;
}

/*
	Media messages
*/

.message-content .media-message {
	width: 280px;
}

.media-message.audio-message-container {
	background: #3f97fc;
}

.media-message .video-message {
	max-width: 100%;
}

.media-message .video-play-overlay {
	top: 0;
	left: 0;
	outline: 0;
	background: transparent;
}

.video-play-overlay .fa-play {
	background: rgba(1, 118, 255, 0.75);
}

.video-play-overlay:hover {
/*	background: var(--brx-primary-overlay);*/
    background: rgba( 0,0,0, 0.4 );
}

.video-play-overlay:hover .fa-play {
	transform: translate3d(-50%, -50%, 0) scale3d(1.1, 1.1, 1.1);
}

.btn-play-video {
    width: 4rem;
}
.btn-play,
.btn-play-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 1/1;
    height: auto;
}
    .btn-play::before,
    .btn-play-video::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transition: none;
        transform: translate(-46%, -46%);
    }

    .btn-play:hover /* .fa-play*/,
    .btn-play-video:hover /* .fa-play*/ {
        transition: 0.3s ease;
        transform: translate3d(-50%, -50%, 0) scale3d(1.1, 1.1, 1.1);
    }
    .btn-play:not(:hover) /* .fa-play*/,
    .btn-play-video:not(:hover) /* .fa-play*/ {
        transition: 0.3s ease;
        transform: translate3d(-50%, -50%, 0) scale3d(1.0, 1.0, 1.0);
    }


.media-message .audio-controls {
	display: grid;
	grid-template-columns: 50px 1fr;
	column-gap: 0.5rem;
	grid-template-areas:
		"play name name"
		"play bar bar"
		"play info info";
    align-items: center;
}

.audio-controls .play-pause {
	grid-area: play;
    aspect-ratio: 1/1;
}

.audio-controls .media-name {
	grid-area: name;
	font-size: 14px;
}

.audio-controls .progress {
	grid-area: bar;
	height: .7rem;
}

.audio-controls .media-info {
	grid-area: info;
	font-size: 12px;
}

/*
	EOF Media messages
*/


/*
	Brodix Media Lightbox
*/
.lb-audio {
	height: 10em;
}

.lb-media {
	--plyr-control-radius: 50%;
	--plyr-color-main: #0176ff;
	--plyr-progress-loading-background: #edeef6;
	--plyr-video-progress-buffered-background: #d3d7e9;
	
	padding: 0;
}

.plyr--audio .plyr__control {
	background: #fff;
}

.lb-media .plyr, .lb-media.lb-img {
	border-bottom-left-radius: 11px;
	border-bottom-right-radius: 11px;
}

.lb-media .plyr:not(:fullscreen) video,
.lb-media .plyr:not(:-webkit-full-screen) video,
.lb-media.lb-img:not(:fullscreen),
.lb-media.lb-img:not(:-webkit-full-screen) {
	max-height: calc(100vh - 110px);
}

.lb-audio .plyr--audio {
	position: relative;
	z-index: 1;
	margin: 25px auto;
}

.lb-audio .plyr__controls {
	background: transparent;
}

.lb-audio .plyr__control {
	padding: 12px;
}

.lb-video .plyr__controls {
    background: var(--brx-primary-overlay);
    opacity: 0.8;
    padding-top: 12px;
}


.lb-img {
	min-width: 12em;
}

.lb-img .image-toolbar {
	transform: translate3d(0, -100%, 0);
	transition: transform 500ms;
	background: rgba(46, 92, 145, .5);
	animation-name: toolbarout;
	animation-duration: 3s;
}

.lb-img:hover .image-toolbar {
	transform: translate3d(0, 0, 0);
}

.image-toolbar .btn {
	color: #f5f6fa;
	text-shadow: 1px 1px 1px rgba(46, 92, 145, .75);
}

.equalizer {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

	.equalizer .bar {
		position: relative;
		float: left;
		background-color: var(--plyr-color-main);
		height: 10px;
		margin-left: 1px;
		margin-right: 1px;
		width: 4px;
		animation: jump 0ms -800ms linear infinite alternate;
	}

		.equalizer .bar:nth-child(1) {
			animation-duration: 492ms;
		}

		.equalizer .bar:nth-child(2) {
			animation-duration: 465ms;
		}

		.equalizer .bar:nth-child(3) {
			animation-duration: 496ms;
		}

		.equalizer .bar:nth-child(4) {
			animation-duration: 439ms;
		}

		.equalizer .bar:nth-child(5) {
			animation-duration: 484ms;
		}

		.equalizer .bar:nth-child(6) {
			animation-duration: 448ms;
		}

		.equalizer .bar:nth-child(7) {
			animation-duration: 474ms;
		}

		.equalizer .bar:nth-child(8) {
			animation-duration: 486ms;
		}

		.equalizer .bar:nth-child(9) {
			animation-duration: 467ms;
		}

		.equalizer .bar:nth-child(10) {
			animation-duration: 490ms;
		}

		.equalizer .bar:nth-child(11) {
			animation-duration: 483ms;
		}

		.equalizer .bar:nth-child(12) {
			animation-duration: 440ms;
		}

		.equalizer .bar:nth-child(13) {
			animation-duration: 478ms;
		}

		.equalizer .bar:nth-child(14) {
			animation-duration: 446ms;
		}

		.equalizer .bar:nth-child(15) {
			animation-duration: 451ms;
		}

		.equalizer .bar:nth-child(16) {
			animation-duration: 466ms;
		}

		.equalizer .bar:nth-child(17) {
			animation-duration: 441ms;
		}

		.equalizer .bar:nth-child(18) {
			animation-duration: 491ms;
		}

		.equalizer .bar:nth-child(19) {
			animation-duration: 490ms;
		}

		.equalizer .bar:nth-child(20) {
			animation-duration: 446ms;
		}

.plyr--paused + .equalizer .bar {
	animation-play-state: paused;
}

/*
	EOF Brodix Media Lightbox
*/



/*
	Emoticons
*/
button[data-icons-btn] .toggeable0,
button[data-icons-btn] .toggeable1 {
	transition: opacity 1.3s ease-in-out;
}

button[data-icons-btn] .toggleable0 {
	display: inline-block;
	opacity: 1;
}

button[data-icons-btn].open .toggleable0 {
	display: none;
	opacity: 0;
}

button[data-icons-btn] .toggleable1 {
	display: none;
	opacity: 0;
}

button[data-icons-btn].open .toggleable1 {
	display: inline-block;
	opacity: 1;
}

.emoji-container {
	width: 310px;
	z-index: 800;
	transition: .2s;
	transform-origin: 0 0;
	transform: rotateX(90deg) translate(0, -100%);
	opacity: 0;
	box-shadow: 0px 0px 1px rgba(36, 41, 57, .25);
/*	top: -1rem; This offset is because the original theme has extra space taken for gradient	*/
    top: 0; /* Reset the offset */
	right: 0;
}

	.emoji-container.open {
		transform: rotateX(0deg) translate(0, -100%);
		opacity: 1;
	}

.emoji-nav {
	padding: 0.3rem;
}

	.emoji-nav [data-bs-toggle="tab"] {
		flex: 1;
		padding: 4px 0 2px 0px;
		margin: 2px 2px;
		border: none;
		border-bottom: 2px solid transparent;
	}

	.emoji-nav [data-bs-toggle="tab"]:not(:hover) img {
		filter: grayscale(75%);
		opacity: .75;
	}

	.emoji-nav [data-bs-toggle="tab"].active {
		border-color: #0176ff;
	}

	.emoji-nav [data-bs-toggle="tab"].active img {
		filter: grayscale(0);
		opacity: 1;
	}


.emoji-content .tab-pane {
	height: 28vh;
}

/* Style scrollbar for IE and Firefox */
.emoji-panel {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
	overflow-y: auto;
	overflow-x: hidden
}
	/* Style scrollbar for Chrome, Safari, Edge and Opera */
	.emoji-panel::-webkit-scrollbar {
		width: 4px; /* width of the entire scrollbar */
	}
	.emoji-panel::-webkit-scrollbar-track {
		/*background: orange; / * color of the tracking area */
	}
	.emoji-panel::-webkit-scrollbar-thumb {
		background-color: rgba(var(--bs-body-color-rgb),var(--brx-scroll-opacity)); /* color of the scroll thumb */
		border-radius: 20px; /* roundness of the scroll thumb */
	}



.img-emoji {
	width: 32px;
	height: 32px;
}

.btn-emoji {
	border: none;
	background: transparent;
	text-align: center;
	vertical-align: middle;
	padding: 0.25rem;
	margin: 0;
}
/*
	EOF Emoticons
*/


/*
	Chat footer
*/

.upload-in-progress-overlay {
	top: 0;
	left: 0;
	z-index: 9999;
	cursor: not-allowed;
	display: none;
	background: rgba(46, 92, 145, .6);
	font-size: 1.1rem;
}

#chat-bar-bottom.uploading .upload-in-progress-overlay {
	display: flex;
}

.upload-in-progress-overlay .sky {
	width: 75px;
	height: 75px;
	margin: 5px 0 0;
	overflow: hidden;
	background: #0399E5;
	border-radius: 100%;
}

.upload-in-progress-overlay .cloud {
	width: 50px;
	height: 20px;
	border-radius: 10px;
	margin: 30px auto 0;
	box-shadow: 0px 0px #0277b3, 1px 1px #0277b3, 2px 2px #0277b3, 3px 3px #0277b3, 4px 4px #0277b3, 5px 5px #0277b3, 6px 6px #0277b3, 7px 7px #0277b3, 8px 8px #0277b3, 9px 9px #0277b3, 10px 10px #0277b3, 11px 11px #0277b3, 12px 12px #0277b3, 13px 13px #0277b3, 14px 14px #0277b3, 15px 15px #0277b3, 16px 16px #0277b3, 17px 17px #0277b3, 18px 18px #0277b3, 19px 19px #0277b3, 20px 20px #0277b3, 21px 21px #0277b3, 22px 22px #0277b3, 23px 23px #0277b3, 24px 24px #0277b3, 25px 25px #0277b3, 26px 26px #0277b3, 27px 27px #0277b3, 28px 28px #0277b3, 29px 29px #0277b3, 30px 30px #0277b3, 31px 31px #0277b3, 32px 32px #0277b3, 33px 33px #0277b3, 34px 34px #0277b3, 35px 35px #0277b3, 36px 36px #0277b3, 37px 37px #0277b3, 38px 38px #0277b3, 39px 39px #0277b3, 40px 40px #0277b3, 41px 41px #0277b3, 42px 42px #0277b3, 43px 43px #0277b3, 44px 44px #0277b3, 45px 45px #0277b3, 46px 46px #0277b3, 47px 47px #0277b3, 48px 48px #0277b3, 49px 49px #0277b3, 50px 50px #0277b3, 51px 51px #0277b3, 52px 52px #0277b3, 53px 53px #0277b3, 54px 54px #0277b3, 55px 55px #0277b3, 56px 56px #0277b3, 57px 57px #0277b3, 58px 58px #0277b3, 59px 59px #0277b3, 60px 60px #0277b3, 61px 61px #0277b3, 62px 62px #0277b3, 63px 63px #0277b3, 64px 64px #0277b3, 65px 65px #0277b3, 66px 66px #0277b3, 67px 67px #0277b3, 68px 68px #0277b3, 69px 69px #0277b3, 70px 70px #0277b3, 71px 71px #0277b3, 72px 72px #0277b3, 73px 73px #0277b3, 74px 74px #0277b3, 75px 75px #0277b3, 76px 76px #0277b3, 77px 77px #0277b3, 78px 78px #0277b3, 79px 79px #0277b3, 80px 80px #0277b3, 81px 81px #0277b3, 82px 82px #0277b3, 83px 83px #0277b3, 84px 84px #0277b3, 85px 85px #0277b3, 86px 86px #0277b3, 87px 87px #0277b3, 88px 88px #0277b3, 89px 89px #0277b3, 90px 90px #0277b3, 91px 91px #0277b3, 92px 92px #0277b3, 93px 93px #0277b3, 94px 94px #0277b3, 95px 95px #0277b3, 96px 96px #0277b3, 97px 97px #0277b3, 98px 98px #0277b3, 99px 99px #0277b3, 100px 100px #0277b3;
}

	.upload-in-progress-overlay .cloud:before {
		content: '';
		position: absolute;
		background: #636262;
		border-radius: 2px;
		width: 24px;
		height: 2px;
		z-index: 2;
		left: 0;
		right: 0;
		bottom: 6px;
		margin: auto;
	}

	.upload-in-progress-overlay .cloud:after {
		content: '';
		position: absolute;
		width: 30px;
		height: 20px;
		border-radius: 20px 20px 0 0;
		top: -10px;
		background: #fff;
		left: 10px;
	}

.upload-in-progress-overlay .file {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 5;
	top: 14px;
	width: 20px;
	height: 25px;
	display: inline-block;
	overflow: hidden;
}

	.upload-in-progress-overlay .file:before {
		content: '';
		background: #E2E3E3;
		color: #E2E3E3;
		width: 14px;
		height: 2px;
		position: absolute;
		left: 0;
		right: 0;
		top: 4px;
		z-index: 3;
		margin: auto;
		animation: uplaod 3s linear infinite;
		box-shadow: 0 5px, 0 10px;
	}

	.upload-in-progress-overlay .file:after {
		content: '';
		position: absolute;
		background: #577FC0;
		width: 20px;
		height: 20px;
		left: 0;
		top: 0;
		border-radius: 0 0 3px 3px;
		-webkit-animation: uplaod 3s linear infinite;
		animation: uplaod 3s linear infinite;
	}

    .scroll-to-bottom-btn {
	    top: 0px;
	    opacity: 0;
	    pointer-events: none;
	    transition: top 0.5s ease-out, opacity 0.5s ease-out;
    }

	.scroll-to-bottom-btn.show-scroll-btn {
		top: -3.6rem;
		opacity: 1;
		pointer-events: initial;
	}

/*
	EOF Chat footer
*/



/*
	Online conversation
*/

.chat-media-conversation {
    height: 0;
    position: sticky;
    margin: 0 0;
    background: var( --brx-call-bg-color );
}

.chat-media-conversation.open {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height:0; /*when other chat is opened. customstyle will omit this*/
}

.sidebar-is-open .chat-media-conversation:not(:-webkit-full-screen),
.sidebar-is-open .chat-media-conversation:not(:fullscreen) {
    position: fixed;
    z-index: 2000;
    margin: 0;
    bottom: 0;
    right: 0;
    top: auto;
    left: auto;
    width: 350px;
    height: 0; /*when other chat is opened. customstyle will omit this*/
}

.text-call {
    color: var( --brx-text-call-color ) !important;
    background: var( --brx-text-call-background-color ) !important;
}

.text-call-missed {
    color: var( --brx-text-call-missed-color ) !important;
    background: var( --brx-text-call-missed-background-color ) !important;
}

.text-call-rejected {
    color: var( --brx-text-call-rejected-color ) !important;
    background: var( --brx-text-call-rejected-background-color ) !important;
}

.chat-media-conversation .call-navbar {
    background: black;
    opacity: 80%;
    border-radius: 1rem;
    border: none;
    max-width: fit-content;
    padding-left: 1em !important;
    padding-right: 1em !important;
    padding-top: 0.6em; /*  Little correction - Font Awesome Y axis issue   */
    padding-bottom: 0.4em;
    margin-bottom: 0.4em;
}

.call-navbar .btn  {
    padding: 0;
    border: none !important;
    width: 4em;
    height: 4em;
    color: #A0A0A0;
    align-content: center;
}
.call-navbar .btn:hover {
    color: var(--brx-btn-hover-color);
}

.call-navbar .pressed {
    color: #ffffff;
}

.call-navbar .pressed:hover {
    color: var(--brx-btn-hover-color);
}

.call-navbar .btn .brx-vidbtn-icon {
    line-height: normal;
}

.call-navbar.call-navbar-spacer {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    background: transparent;
    border: none;
    max-width: fit-content;
    max-height: fit-content;
    /*    background: green;*/
    /*    border: 1px dotted yellow;*/
}

.navbar-spaced {
	position: absolute;
	width: 100%;
	bottom: 0;
	opacity: 1;
	transition: opacity 0.5s;
}

.navbar-spaced.hidden {
	opacity: 0;
	transition: opacity 3s;
	transition-delay: 2s;
}


.sidebar-is-open .chat-media-conversation:not(:-webkit-full-screen) .callee-user-screen, .sidebar-is-open .chat-media-conversation:not(:fullscreen) .callee-user-screen {
    /*	top: 25%;
	transform: translate3d(-50%, -70%, 0);
*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d( -50%,-50%,0 );
}

.sidebar-is-open .chat-media-conversation:not(:-webkit-full-screen) .call-navbar .btn,
.sidebar-is-open .chat-media-conversation:not(:fullscreen) .call-navbar .btn {
	padding: 0.6em;
	width: 3em;
}

.chat-media-conversation .connecting-interaction {
	font-size: 2vw;
	animation: blinker 1s linear infinite;
}

.chat-media-conversation .remote-mic-indicator {
	top: 3vh;
	left: 1.5vw;

    border-radius: 50%;
    background-color: #ffffffB0;
    color: #404040;
    padding: 0.4em;

    align-content: center;
    text-align: center;

    width: 2em;
    height: 2em;
}

.btn-screencast.paused {
/*    color: var(--brx-screencast-btn-color-paused);
    background-color: var(--brx-screencast-btn-background-color-paused);
*/
    border-radius: 50%;
}

.btn-screencast.pressed {
    color: var(--brx-screencast-btn-color);
    background-color: var(--brx-screencast-btn-background-color);
    border-radius: 50%;
}


.callee-user-screen .remote-user-avatar {
	max-width: 200px;
}

.self-view-video {
	background: #3e455b;
	position: absolute;
	right: 0.2rem;	/*    right: 0;*/
	bottom: 0.2rem;	/*    bottom: 100px;*/
	width: 16vw;
	height: auto;

	border-radius: 2%;

	opacity: 1;
	transition: opacity 0.5s;
}

.self-view-video.hidden {
	opacity: 0;
	transition: opacity 0.5s;
}

.sidebar-is-open .chat-media-conversation:not(:-webkit-full-screen) .self-view-video,
.sidebar-is-open .chat-media-conversation:not(:fullscreen) .self-view-video {
	display: block;
	position: static;
	width: 100%;
	max-height: 28vh;
    border-radius: 0;
}

.remote-view-video {
	background: #3e455b;
	position: absolute;
	width: 100%;
	height: 100%;
}

.sidebar-is-open .chat-media-conversation:not(:-webkit-full-screen) .remote-view-video,
.sidebar-is-open .chat-media-conversation:not(:fullscreen) .remote-view-video {
	position: static;
	display: block;
	max-height: 28vh;
}

.sidebar-is-open .chat-media-conversation:not(:-webkit-full-screen) .btn .fa-2x,
.sidebar-is-open .chat-media-conversation:not(:fullscreen) .btn .fa-2x {
	font-size: 1.2rem;
}

[data-manage-fullscreen] .fa-compress {
	display: none;
}

.chat-media-conversation:fullscreen [data-manage-fullscreen] .fa-compress,
.chat-media-conversation:-webkit-full-screen [data-manage-fullscreen] .fa-compress {
	display: inline-block;
}

.chat-media-conversation:fullscreen .call-navbar {
	bottom: 0px;
}

.chat-media-conversation:fullscreen [data-manage-fullscreen] .fa-expand,
.chat-media-conversation:-webkit-full-screen [data-manage-fullscreen] .fa-expand {
	display: none;
}


.fa-phone-alt.missed {
	transform: rotate(135deg);
}

/*
	EOF Online conversation
*/


/*
	Incoming call modal
*/

.incomming-call-modal .circle-container {
	height: 300px;
	width: 300px;
}

.incomming-call-modal .remote-user-avatar {
	width: 30%;
	height: 30%;
}

.incomming-call-modal .circle {
	border-radius: 50%;
	border: 3px solid rgb(1, 118, 255);
	animation-name: grow;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-duration: 1.5s;
}

.incomming-call-modal .circle1 {
	animation-delay: 0.2s;
}

.incomming-call-modal .circle2 {
	animation-delay: 0.4s;
}

.incomming-call-modal .circle3 {
	animation-delay: 0.6s;
}

.incomming-call-modal .circle4 {
	animation-delay: 0.8s;
}
/*
	EOF Incoming call modal
*/

input::placeholder {
    font-weight: bold;
    opacity: 0.5;
    color: red;
}
.form-control-plaintext {
    color: red;
}
.form-select {
    color: red;
}
.form-select-disabled {
    color: red;
}


.btn {
    color: var(--brx-btn-color);
}

.btn:hover {
    color: var(--brx-btn-hover-color);
}

.btn-danger, .btn-warning, .btn-success,
.btn-danger:hover, .btn-warning:hover, .btn-success:hover {
    color: white;
}

/*  Camera, Chat tools buttons (emoji, send file)   */
.btn-tool {
	color: var(--brx-btn-tool-color);
	font-size: 18px;
	background: transparent;
}

.btn-tool:hover {
    color: var(--brx-btn-tool-hover-color);
}

.btn-primary {
    color: var(--brx-btn-primary-color);
}

.btn-primary:hover {
    color: var(--brx-btn-primary-color);
}


.btn-tool .switcher-icon    {
    font-size: 24px;
}

.border-left    {
    border-left: 1px solid var(--brx-border-color) !important;
}

.border-right {
    border-right: 1px solid var(--brx-border-color) !important;
}

.bg-light   {
    background-color: var(--brx-chat-window-background) !important;
}

.chatbar-bottom {
    border-top: 1px solid var(--brx-border-color);
}

.chat-form {
    background: var(--brx-chat-window-background) !important;
    border-radius: 0;
    border-top: 1px solid var(--brx-border-color);
    --bs-bg-opacity: 0;
}

.end-of-chat{
    height: 3em;
}

/*
/*  Camera, Chat tools buttons (emoji, send file)   */
/*
.btn-tool {
    color: #65676b;
    font-size: 18px;
    background: transparent;
}

.btn-tool:hover {
    color: #569BC7;
}

.btn-tool {
	color: #95aac9;
	background: transparent;
}

.btn-tool:hover {
	color: #758aa9;
}
*/

/*  Paperclip just before the text area for writing messages
    Small correction of the size 18px -> 24px
*/
.btn-paperclip {
    font-size: 1.6em;
}

/*  Navigation bar icons: Chats, Contacts, Settings */
.btn-nav-icon {
    font-size: 1.5em;
    padding-bottom: 0.2em
}

/* Align the avatar */
.message {
    align-items: flex-start;
    -webkit-box-align: start;
}

/* Username in the chat-balloon */
.sender-name {
    color: var(--bs-gray-800);
}


/*	Custom text color and background for Chat-balloon */
.message .message-text {
/*  We decided to try without these nice borders
    border: 1px solid var(--brx-message-in-border-color);
*/
    background: var(--brx-message-in-background-color);
    color: var(--brx-message-in-text-color);

    overflow: visible;	/*For [pic messages: Expand to show the whole picture*/
}

.message-out .message-text {
/*  We decided to try without these nice borders
    border: 1px solid var(--brx-message-out-border-color);
*/
    background: var(--brx-message-out-background-color);
    color: var(--brx-message-out-text-color);

    overflow: visible;	/*For [pic messages: Expand to show the whole picture*/
}


/* Chat-balloon */
.message .message-text {
    padding: 0.4rem 1.2rem; /*  Reduce the size of the message balloon  */
    border: var( --brx-search-message-balloon-border-size ) solid transparent; /*  Comprensate selection border of search-message highlighted  (class search-match-balloon)  */
}
.message-out .message-text {
    padding: 0.4rem 1.2rem; /*  Reduce the size of the message balloon  */
}


/* Sharp edge of the chat-balloon, pointing to the avatar */
.message .message-content .message-text {
    border-radius: 1rem;
    border-top-left-radius: 0;
}

/* Sharp edge of the chat-balloon, pointing to the avatar */
.message-out .message-content .message-text {
    border-radius: 1rem;
    border-top-right-radius: 0;
}

/*	Replied-To message chat-balloon	*/
.message-reply-content {
	border-radius: .6rem;
}


/* Color of the geo-position pin, next to chat-balloon */
.geo-position {
	color: var(--bs-black);
}

.geo-position:hover {
	-webkit-transition: all .3s;
	transition: all .3s;
	color: #195DE7;
/*  color: var(--bs-primary);
*/
}

/*
.message-out .message-text:before,
.message .message-text:before {
    content: "";
    width: 0px;
    height: 0px;
    position: relative;
    border-left: 10px solid #00bfb6;
    border-right: 10px solid transparent;
    border-top: 10px solid #00bfb6;
    border-bottom: 10px solid transparent;
    right: -19px;
    top: 6px;
}
*/


/* Big avatar in chat-info side-panel */
.avatar.avatar-xxl {
	height: 10rem;
	width: 10rem;
}
.avatar.avatar-xl {
	height: 8rem;
	width: 8rem;
}
/*	Small avatar in Mention Picker*/
.avatar.avatar-sm {
	height: 1.5rem;
	width: 1.5rem;
}
.avatar.avatar-xs {
	height: 1.0rem;
	width: 1.0rem;
}

/* New theme has too wide min-width (400px) */
.offcanvas-aside.show {
	min-width: 350px;
}
.offcanvas-body {
	padding: 1.25rem 1.25rem;
}

.chat-footer {
	background: transparent;
    position: relative !important;
}

/* Reduce space between text-balloon and DateTime footer */
.message-footer {
	margin-top: 0.1rem;
}

.btn-close1 {
	background: transparent;
	border: none;
    color: var(--brx-btn-color );
}

.btn-close1:hover {
    background: transparent;
    border: none;
    color: var(--brx-btn-hover-color );
}

/* Fix visible double border when open file upload */
.dz-preview.dz-preview-moved+.chat-form::before {
    height: 0px;
    display: none;
}

.dz-preview.dz-preview-moved {
/*    margin-bottom: -1.6rem;   */
/*    margin-bottom: 0rem;*/
    border: 1px solid var(--brx-border-color) !important;
    border-bottom: none;
    padding-left: 1rem;
    padding-right: 1rem;
}

.dz-preview .dz-round-box {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	background: var(--brx-file-bg);
    border: 1px solid var(--brx-file-border-color);
/*	border: 1px solid #dAeAf0;*/
	opacity: 0.9;
}

.badge-top-right {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(25%, -25%);
/*	border: 4px solid rgb(var(--bs-light-rgb));
*/
    border: none;
	font-size: 0.9em;
}


/*  Theme's emoji picker (unicode symbols)  */
.emoji-picker {
	width: 100%;
	/*    --bs-bg-opacity: 1;*/
	/*    background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity)) !important;*/
	/*    border: 2px solid var(--bs-secondary);*/ /*#292d34;*/
}

#emoji_section_extra_emojis {
	overflow: hidden;
}

.emoji-picker::before {
	width: 0;
	height: 0;
	visibility: hidden;
	--bs-bg-opacity: 0;
	background-color: transparent;
	backdrop-filter: none; /* Clear the nasty blur, defined in original theme */
	-webkit-backdrop-filter: none; /* Clear the nasty blur, defined in original theme */
}
.emoji-picker__search-container
{
    border-color: var(--bs-secondary);
}
.emoji-picker__search:focus {
	border: 1px solid var(--brx-input-border-color);
}


/*	Show/hide labels menu next to messages	*/
.message-menu-labels, .message-menu-like, .message-menu-reply {
	visibility: hidden;
}
.message:hover .message-menu-labels {
	visibility: visible;
}
.message:hover .message-menu-like {
	visibility: visible;
}
.message:hover .message-menu-reply {
	visibility: visible;
}

.message-preview {
	border-top-left-radius: 1.2rem;
	border-top-right-radius: 1.2rem;
	position: relative;
	display: flex;
	margin-bottom: -1.6rem;
	padding-bottom: 1.6rem;
	border-left: 0.6rem solid transparent;
	border-right: 0.6rem solid transparent;
}



/*	Mentions	*/
.user-mention {
	font-weight: bold;
	cursor: pointer;
}
.user-mention-compose {
	font-weight: bold;
}

button[data-mention-btn] .toggeable0,
button[data-mention-btn] .toggeable1 {
	transition: opacity 1.3s ease-in-out;
}

button[data-mention-btn] .toggleable0 {
	display: inline-block;
	opacity: 1;
}

button[data-mention-btn].open .toggleable0 {
	display: none;
	opacity: 0;
}

button[data-mention-btn] .toggleable1 {
	display: none;
	opacity: 0;
}

button[data-mention-btn].open .toggleable1 {
	display: inline-block;
	opacity: 1;
}

.mention-picker-container {
	width: 300px;
	z-index: 800;
	transition: .2s;
	transform-origin: 0 0;
	transform: rotateX(90deg) translate(0, -100%);
	opacity: 0;
	box-shadow: 0px 0px 1px rgba(36, 41, 57, .25);
	top: -1rem;
	right: 0;
}

.mention-picker-container.open {
	transform: rotateX(0deg) translate(0, -100%);
	opacity: 1;
}
.mention-picker-container.at-open {
	position: absolute;
	left: 0;
	top: 0;
}


.mention-picker-results {
	padding: 0 0.75rem;
	--row-count: 8;
	--row-size: 1.125rem;
}

.mention-picker-results {
	height: calc(var(--row-count) * var(--row-size) + (0.75rem * var(--row-count)));
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1
}
/* Style scrollbar for IE and Firefox */
.mention-picker-results {
	-ms-overflow-style: none; /* IE and Edge */
	/*	scrollbar-width: none; / * Firefox */
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-color: inherit;
	scrollbar-width: thin; /* Firefox */
}

/* Style scrollbar for Chrome, Safari, Edge and Opera */
.mention-picker-results::-webkit-scrollbar {
	width: 4px;		/* width of the entire scrollbar */
}
.mention-picker-results::-webkit-scrollbar-track {
	/*background: orange; / * color of the tracking area */
}
.mention-picker-results::-webkit-scrollbar-thumb {
	background-color: rgba(var(--bs-body-color-rgb),var(--brx-scroll-opacity)); /* color of the scroll thumb */
	border-radius: 20px; /* roundness of the scroll thumb */
}


.mention-picker__category-name {
	font-weight: 400;
	font-size: .875em;
	padding: 12px 0;
	margin: 0;
}

.mention-picker-item {
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	border-left: 2px solid transparent;
	border-right: 2px solid transparent;
	border-radius: 0.3rem;
}


/*  ScreenShot  */
/*
.screenshot-container {
    width: 300px;
    height: 200px;
    border: 1px solid red;
    z-index: 800;
    transition: .2s;
    transform-origin: 0 0;
    transform: rotateX(90deg) translate(0, -100%);
    opacity: 0;
    box-shadow: 0px 0px 1px rgba(36, 41, 57, .25);
    top: -1rem;
    right: 0;
    position: absolute;
    display: none;
}

.screenshot-container.open {
    transform: rotateX(0deg) translate(0, -100%);
    opacity: 1;
    display: contents;
	top: -1rem;
	right: 0;
}
*/
.screenshot-canvas {
   max-width:  100%;
   max-height: 100%;
   border: 2px solid orange;
   box-sizing: content-box;
}

div[contenteditable="true"]::before {
    color: var(--brx-placeholder-color); /*  Color of the input placeholder text     */
    content: attr(placeholder); /* this will take the placeholder attribute of the div element and use as content */
    cursor: text;
}


/*	Make Contacts List smaller	*/
.card-list .card + .card {
    margin-top: 0.5rem; /*  Leave space between contacts (the original is 1rem and is too big space)   */
    margin-right: 0.5rem; /*  Leave space for the red dot to go outside the contact   */
    margin-left: 0.5rem; /*  Make left and right side symmetric   */
}
.card-body {
	padding: 0.6rem 0.6rem;
}

.avatar {
    width: 48px;	/*	64px	We will use slightly reduced avatar	*/
    height: 48px;	/*	64px	We will use slightly reduced avatar	*/
}

/* SETTINGS: Profile avatar, name, mood LOGOUT buton*/
.card-profile {
    padding: 0.6rem 0;
}

.avatar-profile {
    width: 6em;
    height: 6em;
}

.bapp-myname
{
    font-size: 1.2em;
}

/*	END OF Make Contacts List smaller	*/


/*	Make emoticons inside typebox smaller	*/
#bchat-typebox img[data-brx-emo]
{
	height:22px;
}




/*	Style the Seen-By-List box	*/
.seenby-results {
	padding: 0 0rem;
	--row-count: 5;
	--row-size: 1.750rem;
}

.seenby-results {
	max-height: calc(var(--row-count) * var(--row-size) + (0.75rem * var(--row-count)));
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1
}
/* Style scrollbar for IE and Firefox */
.seenby-results {
	-ms-overflow-style: none; /* IE and Edge */
	/*	scrollbar-width: none; / * Firefox */
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-color: inherit;
	scrollbar-width: thin; /* Firefox */
}
	/* Style scrollbar for Chrome, Safari, Edge and Opera */
	.seenby-results::-webkit-scrollbar {
		width: 4px; /* width of the entire scrollbar */
	}

	.seenby-results::-webkit-scrollbar-track {
		/*background: orange; / * color of the tracking area */
	}

	.seenby-results::-webkit-scrollbar-thumb {
		background-color: rgba(var(--bs-body-color-rgb),var(--brx-scroll-opacity)); /* color of the scroll thumb */
		border-radius: 20px; /* roundness of the scroll thumb */
	}
/*	END OF Style the Seen-list box	*/


/*  RECENT, CONTACTS icon face change */
.nav-link.active .btn-morph-selected,
.nav-link        .btn-morph-noselected {
    display: inline-block;
}

.nav-link        .btn-morph-selected,
.nav-link.active .btn-morph-noselected {
    display: none;
}