body {
    height: 100%;
}
html{
    height: auto;
}

body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body {
    user-select: none;
}

.chat-txt, .chat-poll, .file-caption, code {
    user-select: text;
}

img {
    user-drag: none; 
    -webkit-user-drag: none;
}

/*** iPhone and iOS Form Input Zoom Fixes ***/
/* Fix Input Zoom on devices older than iPhone 5: */
@media screen and (device-aspect-ratio: 2/3) {

    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"] {
        font-size: 16px;
    }
}

/* Fix Input Zoom on iPhone 5, 5C, 5S, iPod Touch 5g */
@media screen and (device-aspect-ratio: 40/71) {

    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"] {
        font-size: 16px;
    }
}

/* Fix Input Zoom on iPhone 6, iPhone 6s, iPhone 7  */
@media screen and (device-aspect-ratio: 375/667) {

    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"] {
        font-size: 16px;
    }
}

/* Fix Input Zoom on iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus, iPhone 8, iPhone X, XS, XS Max  */
@media screen and (device-aspect-ratio: 9/16) {

    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"] {
        font-size: 16px;
    }
}

a{
    transition: 0.3s;
}

#wrapper #content-wrapper {
    background-color: #ffffff;
    overflow-y: hidden;
}

.online-list, .fav-list {
    list-style: 6703;
    padding-left: 0px;
    margin-bottom: 0px;
}


.user-avatar {
    display: flex;
    align-items: center;
}

.user-avatar {
    display: flex;
    align-items: center;
    margin-right: auto;
}

.user-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 0px;
    justify-content: center;
    min-width: 0;
    padding: 0 16px 0 0;
    color: #acbdbd;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.user-list-item {
    display: flex;
    width: 100%;
    position: relative;
}

.chat-messages-col {
    /*
    border-right: 1px solid rgba(0, 0, 0, .10);
    border-left: 1px solid rgba(0, 0, 0, .10);
    */
    min-width: 265px;
    height: calc((var(--vh, 1vh) * 100) - 50px);
}

.lite-shadow {
    /*box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .10);*/
    box-shadow: 0 8px 8px -8px rgba(0, 0, 0, .10);
    background: #fff;
}

.medium-shadow {
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
}

footer {
    background: #c1c1c1;
    color: #fff;
}

.navbar-profile {
    padding: 0.1rem 0.3rem;
}

.chat-preview.chat-is-unread {
    font-weight: 700;
}

.chat-preview.chat-is-typing {
    color: #009688;
}

.chat-preview {
    font-size: 13px;
    display: flex;
}

.chat-preview span {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.chat-preview {
    opacity: 0.8;
}

.spacer-dot {
    color: #E0E0E0;
    font-size: 13px;
    margin-left: 4px;
    margin-right: 4px;
}

abbr.chat-time {
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
}

.chat-meta {
    padding-right: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    right: 0;
    top: 26px;
}

.message-content {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 10px;
    border-radius: 5px;
    background-color: #b3e5fc;
    padding: 5px 10px;
    position: relative;
    color: #000;
    font-size: 14px;
}

.message-content.sent {
    margin-right: 10px;
    background-color: #D4EEC1;
}

.message-time {
    color: rgba(10, 10, 10, 0.5);
    font-size: 10px;
}

.message-avatar {
    height: 30px;
    width: 30px;
}

.sent .message-meta {
    position: absolute;
    right: 38px;
    bottom: -18px;
}

.replies .message-meta {
    position: absolute;
    left: 38px;
    bottom: -18px;
}

ul.nav.nav-pills.nav-justified.nav-sidebar {
    background: #0000002b;
}

.message-avatar img {
    height: 30px;
    width: 30px;
    border: 1px solid #f5f6fa;
}

.online_icon {
    position: absolute;
    height: 15px;
    width: 15px;
    background-color: #4cd137;
    border-radius: 50%;
    bottom: 0.2em;
    right: 0.4em;
    border: 1.5px solid white;
}

.height-fix {
    height: calc(100vh - 50px);
    height: calc((var(--vh, 1vh) * 100) - 50px);
    overflow-y: scroll;
    overflow-x: hidden;
}

.messages.height-fix, .right-panel-messages.height-fix {
    overflow: hidden;
}

.mini-user-list {
    flex: 0 0 100px;
    max-width: 100px;
}

.mini-user-list .user-info {
    display: none;
}

.mini-user-list .chat-meta {
    margin-left: -25px;
}

.mini-user-list .profile-name {
    display: none !important;
}

.selected-chat-info {
    text-align: center;
}

.selected-chat-info img {
	width: 140px;
	border-radius: 50% !important;
	object-fit: cover;
	height: 140px;
}

.selected-chat-name {
    margin-top: 20px;
    font-size: 16px;
    color: #37474F;
    margin-bottom: 5px;
}

.active-user-departments {
	font-size: 14px;
	font-weight: 700;
}

.selected-chat-desc {
    margin-top: 20px;
    font-size: 12px;
    color: #37474F;
}

.speech-bubble {
    position: relative;
    background: #2b3036;
    border-radius: .4em;
    line-height: 1;
    font-size: 13px;
    padding: 10px;
    line-height: 1.5;
    color: #acbdbd;
}

.speech-bubble:after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-bottom-color: #2b3036;
    border-top: 0;
    border-left: 0;
    margin-left: -10px;
    margin-top: -20px;
}

.selected-chat-profile label {
    font-weight: bold;
}

.selected-chat-profile {
    margin-top: 20px;
}

.img-responsive {
    width: 100%;
}

.selected-chat-col.hide-selected-chat {
    right: -50vw;
    transition: right 0.5s ease;
}

.selected-chat-col {
    transition: right 0.5s ease;
}

.selected-chat {
    background: #f5f5f5;
    background: linear-gradient(180deg, #e9ebec 0%, #cfd3d6 100%);
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 1.25rem;
	position: relative;
}

h1.chat-title {
    font-size: 16px;
    margin-bottom: 0px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    align-self: center;
}

.chat-header {
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    width: 100%;
}

.chat-data-header {
    margin-top: 20px;
    background: #2b3036;
    padding: 10px;
    color: #acbdbd;
    border-radius: 5px;
    cursor: pointer;
}

.chat-list-col {
    background: #2b3037;

    padding: 0 !important;
}

.profile-name {
    font-weight: bold;
}

@media (max-width: 768px) {
    img.img-profile {
        width: 30px;
    }

    .user-info {
        font-size: 80%;
    }

    #userDropdown img {
        width: 30px;
    }

    .gse-row{
        margin-bottom: 44px;
    }
}

.enable-selected-chat {
    display: none;
}

@media screen and (max-width: 768px) {
    .enable-selected-chat {
        display: block;
    }
}

@media (max-width: 768px) {
    img.img-profile {
        width: 35px !important;
    }

    #userDropdown img {
        width: 35px;
    }

    .user-info {
        display: none;
    }

    .mobile-mini-user-list .user-info {
        display: flex;
    }

    .chat-meta {
        margin-left: -25px;
        padding-right: 10px;
        position: absolute;
    }

    .online-list li {
        height: 50px;
    }

    .adjust-height li {
        height: 50px !important;
    }

    .adjust-height .img-profile {
        width: 30px !important;
    }

    .adjust-height #userDropdown img {
        width: 30px;
    }

    /*
    .adjust-height #userDropdown {
         height: 3.375rem;
    }
    */

    .adjust-height .profile-name {
        display: block !important;
    }

    .status-change {
        display: none;
    }

    .mobile-chat-list-toggle {
        display: none;
    }

    .chat-link {
        max-width: 15ch !important;
    }

    #video-iframe {
        width: 100% !important;
        height: 200px !important;
    }

    .online-status {
        top: 33px !important;
    }
}

@media (max-width: 374px) {
    .online-status {
        top: 26px !important;
    }
}

.mobile-chat-list-toggle {
    display: none;
}

.rounded-circle {
    border-radius: 25% !important;
}

img.img-profile {
    width: 40px;
    border-radius: 5px;
}

input.write-message {
    width: 100%;
    height: 40px;
    padding: 10px;
}

.input-message-write {
    padding: 10px 0px;
    background: #dbdee0;
    z-index: 88;
    position: relative;
}


.message-input-col {
    margin-left: 10px;
    margin-right: 10px;
}

.messages .chats .sent, .messages .chats .replies, .right-panel-messages ul li {
    clear: both;
    float: left;
    width: 100%;
    font-size: 0.9em;
    display: flex;
    position: relative;
    margin-bottom: 25px;
    word-break: break-word;
}

.messages .chats .sent .avatar, .messages .chats .replies .avatar, .right-panel-messages ul li .avatar {
    width: 30px;
    height: 30px;
    border-radius: 25%;
}

.messages .chats .sent .message-data, .messages .chats .replies .message-data, .right-panel-messages ul li .message-data {
    display: inline-block;
    border-radius: 5px;
    max-width: 255px;
    line-height: 1;
    margin-bottom: 0px;
}

.messages .chats .sent .message-data, .right-panel-messages ul li.sent .message-data {
    float: right;
    order: 2;
    position: relative;
}

.chat-txt {
    padding: 5px 10px 5px 10px;
    display: block;
    border-radius: 5px;
}

.chat-img img {
    border-radius: 4px;
}

img.avatar-im {
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

img.avatar-agent {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

.avatar {
	position: relative;
}

.message-html, .chat-img, .chat-txt, .chat-gif, .chat-sticker {
    display: block;
    overflow: hidden;
}

.messages .chats .sent .avatar, .right-panel-messages ul li.sent .avatar {
    margin-left: 8px;
    float: right;
    order: 3;
}

.messages .chats .replies .avatar, .right-panel-messages ul li.replies .avatar {
    float: left;
    margin-right: 8px;
}

.messages .chats .replies .message-data, .right-panel-messages ul li.replies .message-data {
    float: left;
    position: relative;
}

.messages .chats, .right-panel-messages ul {
    padding: 0;
}

.sent {
    justify-content: flex-end;
}

.logo img {
    width: 100%;
}

.logo .small {
	display: none;
	width: 40px;
}

@media screen and (max-width: 768px) {
    .logo .small {
        display: block;
    }

    .logo .large {
        display: none;
    }

    .chat-gif img {
        width: 100px !important;
        height: 75px !important;
    }

    .emojionearea .emojionearea-picker {
        width: 100%;
    }

    .avatar {
        display: none
    }

    .chat-actions i {
        font-size: 12px;
    }

    .sent .chat-actions {
        margin-right: 5px;
    }

    .recieved .chat-actions {
        margin-left: 5px
    }

    .sent .retry-msg {
        margin-right: 5px;
    }
    

}

.topbar .nav-item .nav-link {
    height: auto;
}

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

.recent-chat {
    cursor: pointer;
}


.messages .chats .replies .message-data small, .right-panel-messages ul li.replies .message-data small {
    display: block;
    font-weight: bold;
    color: #4e73df;
    padding-left: 10px;
    padding-top: 5px;
    padding-right: 10px;
}

.message-status {
    font-size: 9px;
}

.message-status.read {
    color: #547fff;
}

ul.gif-list {
    padding: 0;
    list-style: none;
}

.gifs {
    height: 245px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.chat-gif img {
    border-radius: 5px;
    /* height: 120px;
    width: 150px; */
}

.sent div.chat-gif img {
    /* max-width: 200px;
    max-height: 200px; */
    object-fit: cover;
    object-position: center;
}

.replies span.message-status {
    display: none;
}

.type-message, .type-message-error {
    bottom: 0;
    left: 0;
    width: 100%;
    position: absolute;
    display: none;
    text-align: center;
    z-index: 99;
}

.type-message-error{
    display: none;
}

.type-message-error div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    background: #dbdee0;
    color: #e74a3b;
}

.chat-scroll {
    height: calc(100% - 54px);
    /* overflow-y: scroll;
    padding: 1.25rem;
    overflow-x: hidden; */
}

.messages, .right-panel-messages {
    padding: 0;
    border-top: 1px solid #d8dbdd;
}

.emojionearea>.emojionearea-editor {
    min-height: 32px;
    max-height: 180px;
    font-size: 13px;
    text-align: left;
    word-break: break-all;
}

.emojionearea .emojionearea-editor:empty:before {
    line-height: 1.6;
}

.popover {
    max-width: 100%;
    /* Max Width of the popover (depending on the container!) */
}

.dropzone.dz-clickable {
    cursor: pointer;
    min-height: calc(100% - 40px);
    position: relative;
}

.dropzone {
    border: dashed;
    border-width: 1px;
    border-bottom: 0;
}

.dropzone .dz-preview .dz-image {
    border-radius: 10px;
}

.dropzone .dz-preview .dz-progress {
    top: 75%;
}

.dropzone .dz-preview {
    margin: 10px;
}

.badge-online {
    font-size: 13px;
    padding: 6px 8px 4px;
    font-weight: normal;
}

.chatroom-card {
    margin-bottom: 20px;
}

@media screen and (min-width: 768px) {
    .chatroom-list {
        width: 100%;
    }
}

.chatroom-flex {
    height: 100%;
    overflow-y: auto;
}

figure {
    margin: 0;
}

.chat-img-grp .chat-img img {
    border-radius: 0px;
}

.chat-img-grp .chat-img:nth-child(1) img {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.chat-img-grp .chat-img:nth-child(2) img {
    border-bottom-left-radius: 5px;
}

.chat-img-grp .chat-img:nth-child(3) img {
    border-bottom-right-radius: 5px;
}

.chat-img-grp .chat-img:nth-child(n+2) {
    display: inline-block;
    width: 50%;
}

.chat-img-grp .chat-img:nth-child(n+2) img {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
}

.chat-img-sgl img {
    border-radius: 5px;
}

.chat-img-duo img {
    border-radius: 5px;
}

.chat-img-duo figure:nth-child(1) {
    margin-bottom: 5px;
}

.chat-img-grp {
    max-width: 240px;
    height: 420px;
}

.more-ovrlay {
    position: absolute;
}

.chat-img.more {
    position: relative;
}

.more-ovrlay {
    position: absolute;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -51%);
    -ms-transform: translate(-50%, -51%);
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f3f3f3;
    font-size: 24px;
}

.chat-img-duo .chat-img:nth-child(1) {
    margin-bottom: 5px;
}

.chat-img-duo, .chat-img-grp, .chat-img-sgl, .chat-gif {
    padding: 5px !important;;
    border-radius: 5px;
}

/* .replies .chat-img-grp, .replies .chat-img-duo, .replies .chat-img-sgl {
    background: #f5f5f5;
} */

.chat-img-sgl {
    height: 100%;
}

.chat-img-duo {
    min-height: 315px;
    height: 100%;
}

.chat-img-grp {
    min-height: 200px;
    height: 100%;
}

.chat-sticker {
    min-height: 100px;
    padding: 5px !important;
    object-fit: cover;
    object-position: center;
}

.replied-preview .chat-sticker {
    min-height: 60px;
    padding: 0px !important;
}

img.emojione {
    width: 18px;
}

.dz-message {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    margin: 0 !important;
}

.dz-message i {
    display: block;
    font-size: 50px;
    margin-bottom: 10px;
}

.new-date p {
	text-align: center;
	max-width: unset !important;
	padding: 2px 10px;
	width: auto;
	margin-left: auto;
	margin-right: auto;
    width: 170px;
	font-size: 12px;
}

.new-date {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    align-self: center;
}

.chat-name {
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.02rem;
    font-weight: 400;
}

.chat-gif {
    padding: 5px !important;
}

.chat-link {
    color: #4CAF50;
    display: inline-block;
    max-width: 30ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

#video-modal .modal-body {
    position: relative;
    padding: 0px;
}

#video-modal .modal-content {
    border: none;
    background: rgba(0, 0, 0, 0);
}

#video-iframe {
    width: 520px;
    height: 300px;
}

.nav-sidebar .nav-link.active {
	border-radius: 0px;
	background: transparent;
	border-bottom: 2px solid #1cc88a;
}

.nav-sidebar .nav-link {
    color: #fff;
}

.tab-content.tab-sidebar .tab-pane {
    padding: 0px;
}

@media screen and (min-width: 769px) {
    .nav-sidebar-mobile {
        display: none;
    }

    .mini-user-list .nav-sidebar-mobile {
        display: block;
    }
}

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

    .mini-user-list .nav-sidebar {
        display: flex;
    }
}

.mini-user-list .nav-sidebar {
    display: none;
}

.nav-sidebar li.nav-item {
    height: 40px !important;
    margin-bottom: 2px;
}

.chat-slug {
    font-weight: 400;
}

.is-typing {
	position: absolute;
	top: -22px;
	left: 0;
	background: #dbdee0;
	display: none;
	padding: 2px 15px;
	color: #607d8b;
	font-size: 12px;
	border-top-right-radius: 5px;
}

.send-sticker img {
    width: 75px;
    cursor: pointer;
}

.send-sticker {
    display: inline;
    position: relative;
}

.sticker-has-effect {
    position: relative;
}

.sticker-effect-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(255, 215, 0, 0.9);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    transition: all 0.2s ease;
}

.chat-sticker .sticker-effect-badge {
    width: 24px;
    height: 24px;
    font-size: 12px;
    top: 5px;
    right: 5px;
    cursor: pointer;
    pointer-events: auto;
}

.chat-sticker .sticker-effect-badge:hover {
    background: rgba(255, 215, 0, 1);
    transform: scale(1.15);
}

.chat-sticker .sticker-effect-badge i {
    font-size: 12px;
}

.sticker-has-effect:hover .sticker-effect-badge {
    background: rgba(255, 215, 0, 1);
    transform: scale(1.1);
}

.sticker-effect-badge i {
    font-size: 9px;
    animation: sparkle 1.5s infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 1; transform: rotate(0deg); }
    50% { opacity: 0.7; transform: rotate(180deg); }
}

.sticker-tab-content {
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
    height: 160px;
}

.sticker-nav .nav-item {
	margin-bottom: 0 !important;
    width: auto !important;
    margin-right: 10px;
}

.strickers {
	padding: 10px;
}

.sticker-tab-content .tab-pane {
    background: #fff;
}

.sticker-nav .nav-link {
    padding: 2px 5px;
}

.sticker-nav {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    padding-bottom: 10px !important;
}

.sticker-nav .nav-link {
    white-space: nowrap;
    border-radius: 3px;
}

.send-sticker img:hover{
    animation: pulse 1s;
}

.sticker-close {
	padding: 5px 6px!important;
	line-height: 10px;
	height: 22px;
	font-size: 10px;
}

.chat-sticker {
    position: relative;
    display: flex;
}

.chat-sticker img {
    width: 128px;
}

.nav-sidebar-mobile .dropdown-toggle {
    padding-left: 0;
}

.btn-msg {
    display: inline-block;
    padding: 0px 2px;
    line-height: 1;
}

.btn-msg img {
    width: 32px;
}

.chat-buttons {
    flex: 150px;
    text-align: left;
    align-self: center;
    cursor: pointer;
}

.message-input-col {
    display: flex;
}

.buttons-showhide {
    box-shadow: none !important;
    vertical-align: text-bottom;
}

/* @media screen and (max-width: 425px) {
	.btn-msg img{
		width: 24px;
	}
}

@media screen and (max-width: 375px) {
	.btn-msg img{
		width: 24px;
	}
}

@media screen and (max-width: 320px) {
	.btn-msg img{
		width: 20px;
	}
} */
.emojionearea .emojionearea-editor:empty:before {
    white-space: nowrap;
}

.type-blocked-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -51%);
    -ms-transform: translate(-50%, -51%);
    text-align: center;
    background: rgb(64 64 64 / 75%);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f3f3f3;
    font-size: 16px;
    z-index: 999;
}

.active-group-users {
    overflow-x: hidden;
    overflow-y: auto;
}

.online-status {
    position: absolute;
    font-size: 10px;
    top: 42px;
    /*left: -2px;*/
}

.online {
    color: #1cc88a;
}

.offline {
    color: #c8c8c7;
}

.busy {
    color: #e74a3b;
}

.away {
    color: #f6c23e;
}

span.current-status {
    font-size: 10px;
}

.mobile-sidebar-icon {
    padding-right: 4px;
    padding-left: 8px;
}

.bg-join-image {
    background: url('../img/welcome_chat.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.bg-kicked-image {
    background: url('../img/kicked_chat.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.bg-inactive-image {
    background: url('../img/inactive_chat.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.bg-locked-image {
    background: url('../img/locked_chat.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.close-popover {
    color: #a9a2a2;
}

.close-popover:focus {
    outline: unset;
}

.gif-close {
	border-radius: 0 !important;
}

.gif-search-btn {
    z-index: 1;
}

.gif-close-btn {
    top: 5px;
}

.message-data {
    display: table !important;
}

.selected-chat-actions {
    text-align: center;
}

/* .sent .chat-img-sgl, .sent .chat-img-duo, .sent .chat-img-grp, .sent .chat-gif, .sent .chat-txt, .chat-fwd {
    background: #435f7a;
}

.replies .chat-img-sgl, .replies .chat-img-duo, .replies .chat-img-grp, .replies .chat-gif, .replies .chat-txt, .replies .message-data small, .replies .chat-fwd {
    background: #f5f5f5;
} */

.message-data.grp div {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    padding-top: 0px;
}

.message-data.grp small {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    padding-bottom: 5px;
}

.chat-txt {
	line-height: 18px;
	white-space: pre-wrap;
}

.retry-msg {
    display: flex;
    align-items: center;
    color: #E02D1B;
    font-size: 18px;
    transition: 0.3s;
    margin-right: 5px;
    cursor: pointer;
}

.chat-actions {
    display: flex;
    align-items: center;
    color: #d1d5d7;
    opacity: 0;
    font-size: 18px;
    transition: 0.3s;
}

.chat-actions.active {
	opacity: 1;
}

.chat-actions:hover {
    opacity: 1;
}

.replies .chat-actions {
    margin-left: 10px;
}

.sent .chat-actions {
    margin-right: 10px;
}

.chat-actions i {
    padding-left: 5px;
    padding-right: 5px;
    cursor: pointer;
}

.chat-actions i:hover {
    color: #d1d5d7;
}


@media screen and (max-width: 768px) {
    .avatar {
        display: none !important;
    }

    .sent .message-meta {
        right: 0;
    }

    .replies .message-meta {
        left: 0;
    }

    .chat-actions i {
        font-size: 12px;
    }

    .sent .chat-actions {
        margin-right: 5px;
    }

    .replies .chat-actions {
        margin-left: 5px
    }

    .chat-scroll {
        padding: 1rem;
    }

    .btn-msg {
        padding: 0px;
    }

}

.deleted {
    font-size: 12px;
    font-style: italic;
}

div#chats {
    margin-left: 0;
    margin-right: 0;
    overflow-y: scroll;
    height: calc((var(--vh, 1vh) * 100) - 104px);
    padding: 15px;
    overflow-x: hidden;
}

.chat-list-col {
    flex: 0 0 23%;
    max-width: 23%;
    min-width: 270px;
}

@media (min-width: 768px) {

}

@media (max-width: 768px) {
    .user-avatar {
        margin-right: 0;
    }

    .user-list-item {
        justify-content: center;
    }

    .navbar-profile {
        justify-content: center;
    }

    .navbar-expand .navbar-nav.mr-auto {
        margin-right: 0px !important;
    }

    .btn-group.nav-sidebar-mobile {
        display: block;
    }

    .mobile-mini-user-list .btn-group.nav-sidebar-mobile {
        text-align: left;
    }

    .mobile-mini-user-list {
        flex: 0 0 100%;
    }

    .online-list li, .fav-list li {
        padding-left: 10px;
    }

    .chat-meta {
        width: 30px !important;
    }

    .chat-meta .badge-counter {
        width: 20px !important;
        font-weight: 300;
        font-size: 10px;
    }
}

@media screen and (min-width: 735px) {
    .messages .chats .sent .message-data, .messages .chats .replies .message-data, .right-panel-messages ul li .message-data {
        max-width: 100%;
    }
}

@media screen and (min-width: 1444px) {
    .mini-user-list {
        flex: 0 0 5%;
        max-width: 5%;
    }
}

@media screen and (max-width: 1444px) and (min-width: 1024px) {
    .mini-user-list {
        flex: 0 0 7%;
        max-width: 7%;
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
    .mini-user-list {
        flex: 0 0 9%;
        max-width: 9%;
    }
}

@media screen and (max-width: 768px) and (min-width: 475px) {
    .mini-user-list {
        flex: 0 0 9%;
        max-width: 9%;
    }
}

@media screen and (max-width: 768px) {
    .distant {
        display: none;
    }
}

.btn-group.nav-sidebar-mobile {
    text-align: center;
}

.user-fname {
    color: #607d8b;
    border-radius: 3px;
    font-size: 13px;
    text-transform: uppercase;
    border: 1px solid #607d8b;
}

.mobile-sidebar-icon {
    padding-right: 0px;
}

.nav-sidebar-mobile .dropdown-toggle-split {
    padding-left: 0px;
}

.chat-buttons {
    max-height: 34px;
    overflow: hidden;
}

li.recent-chat:hover {
    background: rgb(66 66 66 / 80%);
    border-top: 1px solid rgb(66 66 66 / 63%);
    border-bottom: 1px solid rgb(66 66 66 / 63%);
}

.mini-user-list .online-list li, .mini-user-list .fav-list li {
    padding-left: 0px;
}

.mini-user-list .user-avatar {
    margin-right: 0px;
}

.mini-user-list .user-list-item {
    justify-content: center;
}

.logo {
    padding: 0px !important;
}

.mini-user-list .navbar-expand {
    justify-content: center;
}

.mini-user-list .navbar-nav {
    margin-right: 0 !important;
}

.selected-chat-profile {
    font-size: 14px;
    padding-left: 10px;
}

.send-files {
    cursor: pointer;
}

.chat-meta {
    width: 35px;
}

.chat-meta .badge-counter {
    width: 25px;
    font-weight: 300;
    border-radius: 2px;
}

.mini-user-list .chat-meta {
    width: 10px;
}

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}

.btn-chatroom {
    border: 1px solid #eee;
    color: #eee;
}

.btn-chatroom:hover {
    color: #fff;
    border: 1px solid #fff;
}

.recent-img img {
    border-radius: 5px;
}

.recent-img {
    padding: 1px;
}

.chat-link-block img {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    max-width: 290px;
    height: 141px;
    object-fit: cover;
    object-position: center;
}

.link-meta {
    display: inline-block;
    padding: 0 10px 10px 10px !important;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 100%;
}

.link-preview {
    cursor: pointer;
    width: 290px;
    /* min-height: 210px; */
    position: relative;
}

.link-preview b {
    line-height: 1.2;
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 32px;
}

.link-meta-desc {
    font-size: 12px;
    line-height: 1.2;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 32px;
    overflow: hidden;
}

.sent .link-preview {
    float: right;
}

.chat-notice {
    border-radius: 0;
    border-radius: 0;
    margin-bottom: 0;
    z-index: 999;
    position: absolute;
    width: 100%;
}

.chat-notice .close {
    padding: 8px;
}

.chat-box {
    align-items: center;
    width: 100%;
    display: flex;
}

._7og6 {
    border-top: none;
    position: relative;
}

.act-row.act-row-center {
    align-items: center;
}

.act-row {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
}

.act-more {
    align-items: center;
    background-color: transparent;
    display: flex;
    margin-right: 8px;
    z-index: 1;
}

.act-more-btn {
    background-color: #407efb;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .22s cubic-bezier(.5, 0, .4, 1);
}

._7oal {
    vertical-align: middle;
}

.act-hidden {
    flex-shrink: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-left: -20px;
    overflow: hidden;
    padding-left: 20px !important;
    transition: transform .22s cubic-bezier(.5, 0, .4, 1), width .3s cubic-bezier(.5, 0, .4, 1);
    will-change: width;
}

.act-hidden>.act-btn:nth-child(1) {
    transition-delay: -20ms;
}

.act-hidden .act-btn {
    opacity: 0;
    transform: scale(.6);
    transition-duration: .16s;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(.4, 0, 1, 1);
}

.act-btn {
    margin-right: 5px;
}

.act-icon {
    cursor: pointer;
    transition: opacity .2s;
}

.act-hidden>.act-btn:nth-child(2) {
    transition-delay: 10ms;
}

.act-hidden>.act-btn:nth-child(3) {
    transition-delay: 40ms;
}

.act-section {
    align-items: center;
    display: flex;
}

.type-section {
    background-color: rgba(0, 0, 0, .05);
    border-radius: 18px;
    display: flex;
    flex: 1 1 auto;
    margin: 8px 8px 8px 0;
    min-width: 100px;
}

.act-show>.act-btn:nth-last-child(3) {
    transition-delay: 110ms;
}

.act-show>.act-btn:nth-last-child(2) {
    transition-delay: 80ms;
}

.act-show>.act-btn:nth-last-child(1) {
    transition-delay: 50ms;
}

.act-show .act-btn {
    opacity: 1;
    transform: scale(1);
    transition-timing-function: cubic-bezier(0, 0, .2, 1);
}

.act-btn-active {
    transform: rotate(45deg);
}

.mobile-act-row {
    align-items: flex-end;
    background-color: #f2f2f2;
    box-sizing: border-box;
    display: flex;
    position: absolute;
    transition: transform .25s;
    width: 100%;
    padding: 5px 10px;
}

.mobile-act-row-show {
    transform: translateY(-100%);
}

.mobile-act-row-hide {
    transform: translateY(0%);
}

.mobile-act-row .act-icon {
    margin-right: 20px;
}


.emojionearea.form-control {
    display: inline-block;
}

.btn-send {
    background: transparent;
    border: none;
    display: inline-block;
    color: #407efb;
    padding: 0px;
    margin: auto 5px auto 10px;
    font-size: 20px;
}

.btn-send:hover {
    color: #00BCD4;
}

.active-group-users img.img-profile {
    border-radius: 50%;
}

.active-group-users .col-12 {
    margin-bottom: 5px;
}

.btn-send {
    box-shadow: none !important;
}

.upload-actions {
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 999;
    width: 100%;
    display: flex;
}

.file-upload-button {
    width: 90%;
}

.upload-actions button {
    display: inline-block;
    position: relative;
    border-radius: 0;
    cursor: pointer !important;
}



.popover-header {
    display: flex;
}

.close-popover {
    padding: 5px !important;
    background-color: #a51212 !important;
    font-size: 16px;
    opacity: 1;
    text-shadow: none;
    color: #eee;
    border-radius: 3px;
    margin-left: 5px;
}

.send-sticker-txt {
    width: 100%;
}

.action-logo {
    text-align: center;
    margin-bottom: 5px;
}

.video-section:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f144";
    position: absolute;
    text-align: center;
    width: 100%;
    font-size: 64px;
    z-index: 99;
    height: calc(100% - 10px);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

.video-section:before {
    color: #fff;
    transition: 0.5s;
    opacity: 0.6;
}

.video-section:hover:before {
    color: #fff;
    opacity: 1;
}

@media (max-width: 425px) {
    .emojionearea .emojionearea-picker .emojionearea-filters {
        overflow-y: scroll;
    }

    .emojionearea .emojionearea-picker .emojionearea-wrapper {
        width: 100%;
    }
}


.fa-gender.fa-venus{
	color: #E91E63;
}


.fa-gender.fa-mars{
	color: #00BCD4;
}

.mini-user-list .ad_chat_left_bar{
	display: none;
}

@media (max-width: 768px) {
	.ad_chat_left_bar{
		display: none;
	}

	.mobile-mini-user-list .ad_chat_left_bar{
		display: block;
	}
}

ul.results {
	padding: 0;
	margin-top: 20px;
}

li.result {
	list-style: none;
	padding: 10px 15px;
	border-bottom: 1px solid #d5d9db;
	cursor: pointer;
	transition: 0.5s;
}

li.result:hover {
	background: #d0d4d6;
}

.res-chat-time {
	font-size: 10px;
	margin: 0;
	line-height: 1;
	margin-bottom: 5px;
	font-weight: 500;

}

.res-chat-txt {
	font-size: 14px;
	margin: 0;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.search-panel {
	/* position: relative; */
	padding: 0;
	overflow: hidden;
}


.search-input input, .search-input button {
	border-radius: 0;
}

.navbar .btn-chat-search.d-lg-block {
	display: inline-block !important;
}

/* @media screen and (max-width: 768px) {
	.navbar .btn-chat-search.d-lg-block {
		display: none !important;
	}
} */

.chat-title{
	max-width: 200px;
}

@media screen and (max-width: 320px) {
	.chat-title{
		width: 145px;
	}
}


@keyframes highlight {
  0% {
    background: #435f7a !important;
  }
  50% {
    background: #90a4ae !important;
  }
  100% {
    background: #435f7a !important;
  }
}

.highlightx {
  animation: highlight 1.5s !important;
}

.highlightx .chat-txt{
  animation: highlight 1.5s !important;
}

.nav-search {
	width: 100%;
}

li.nav-search {
	height: 37px !important;
}

.room-user-search {
	font-size: 13px;
	padding: 18px 15px;
	line-height: 1;
}

.search-query, .search-support-chats, .right-panel-search {
	font-size: 13px;
	padding: 18px 15px;
}

.user-options {
	position: absolute;
	right: 40px;
	text-align: center;
}

.user-options i{
	opacity: 0;
	transition: 0.5s;
}


.close-selected-user {
	position: absolute;
	right: 15px;
	top: 15px;
}

.close-selected-user {
	position: absolute;
	right: 10px;
	top: 10px;
	padding: 8px 10px;
	background: #e74a3b;
	line-height: 1;
	color: #eee;
	font-size: 10px;
	border-radius: 3px;
	cursor: pointer;
	display: none;
}

.close-selected-user:hover{
	background: #BF2618;
}

.start-chat{
	display:none;
}

.user-list-item :hover~.user-options i{
	opacity: 1;
}

.fas.fa-ellipsis-v:hover {
	opacity: 1 !important;
	color:#fff;
}

.fal.fa-angle-down:hover {
	opacity: 1 !important;
	color:#fff;
}

.file-section {
    display: inline-block;
    padding: 10px !important;
    position: relative;
    width: 220px;
    border-radius: 5px;
    height: 52px;
}

.file-header {
    display: flex;
    outline: none;
}

.file-icon {
    min-width: 30px;
    margin-right: 5px;
    align-self: flex-start;
    position: relative;
    font-size: 32px;
}

.file-description {
    min-width: 0;
}

.file-description {
    font-size: 13px;
    overflow: hidden;
    width: 60%;
    line-height: 1.2;
}

.file-title {
    display: block;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 0;
    margin: -4px 0;
    display: block;
    display: -webkit-box;
    overflow: hidden;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.file-meta {
    line-height: 1;
}

.file-meta-entry {
    white-space: nowrap;
    margin-top: 4px;
}

.file-meta-swap {
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    vertical-align: top;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
}

.file-actions {
    position: absolute;
    top: 11px;
    right: 10px;
}

.file-download-icon {
    position: relative;
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    color: #009688;
}

.file-download-icon:hover {
    color: #47b9cc;
}

.file-action-buttons {
    text-decoration: none;
    align-items: center;
    border-radius: 4px;
    display: inline-flex;
    justify-content: center;
    position: relative;
    background: #dbdee0;
}

.file-share-buttons {
    cursor: pointer;
    text-decoration: none;
    align-items: center;
    border-radius: 4px;
    display: inline-flex;
    justify-content: center;
    position: relative;
    background: #dbdee0;
}

.indi-file-actions {
    font-size: 12px;
    margin-top: 10px;
    display: flex;
}

.indi-file-actions a{
    color: #009688 !important;
    cursor: pointer !important;
    transition: 0.3s;
}

.indi-file-actions a:hover{
    color: #47b9cc !important;
}

.chat-files-block:not(:last-child) .indi-file-actions {
    padding-bottom: 10px;
    border-bottom: 1px solid #394850;
}

.font-120 {
    font-size: 120px;
}

.dropzone .dz-preview .dz-details .dz-size {
    font-size: 14px !important;
}

.dropzone .dz-preview.dz-known-file-preview .dz-details {
    opacity: 0 !important;
}

.dropzone .dz-preview:hover .dz-details {
    opacity: 1 !important;
}

.dropzone .dz-preview:hover i {
    -webkit-filter: blur(6px);
    filter: blur(6px);
}

.pdf-icon {
    color: #ff5050;
}

.word-icon {
    color: #6d6dff;
}

.excel-icon {
    color: #4bb14b;
}

.powerpoint-icon {
    color: #ffd400;
}


@keyframes spin {
    from {
        transform: rotateZ(0);
    }

    to {
        transform: rotateZ(1turn);
    }
}

.green-audio-player {
	width: 200px;
	height: 32px;
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 4px !important;
	user-select: none;
	background-color: #fff;
	box-sizing: border-box;
	outline: none;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.green-audio-player.player-accessible .play-pause-btn:hover,
.green-audio-player.player-accessible .controls:hover,
.green-audio-player.player-accessible .volume__button:hover,
.green-audio-player.player-accessible .volume__controls:hover,
.green-audio-player.player-accessible .download:hover {
    outline: dotted 1px #999;
}

.green-audio-player svg,
.green-audio-player img {
    display: block;
	width: 10px;
}

.green-audio-player .holder {
    position: relative;
}

.green-audio-player .holder .loading .loading__spinner {
    position: absolute;
    left: -3px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    border: 2px solid #b0b0b0;
    border-right-color: rgba(0, 0, 0, 0);
    border-radius: 50%;
    animation: spin 0.4s linear infinite;
}

.green-audio-player .holder .play-pause-btn {
    visibility: hidden;
    cursor: pointer;
    outline: none;
}

.green-audio-player .holder .play-pause-btn:focus {
    outline: none;
}

.green-audio-player .slider {
    flex-grow: 1;
    background-color: #d8d8d8;
    cursor: pointer;
    position: relative;
}

.green-audio-player .slider .gap-progress {
    background-color: #44bfa3;
    border-radius: inherit;
    position: absolute;
    pointer-events: none;
}

.green-audio-player .slider .gap-progress .pin {
	height: 10px;
	width: 10px;
	border-radius: 8px;
    background-color: #44bfa3;
    position: absolute;
    pointer-events: all;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.32);
}

.green-audio-player .slider .gap-progress .pin::after {
    content: "";
    display: block;
    background: rgba(0, 0, 0, 0);
    width: 200%;
    height: 200%;
    margin-left: -50%;
    margin-top: -50%;
    border-radius: 50%;
}

.green-audio-player .controls {
    font-size: 10px;
    line-height: 18px;
    color: #55606e;
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    outline: none;
	position: relative;
	margin-top: -11px !important;
}

.green-audio-player .controls .controls__slider {
    margin-left: 16px;
    border-radius: 2px;
    height: 4px;
}

.green-audio-player .controls .controls__slider .controls__progress {
    width: 0;
    height: 100%;
}

.green-audio-player .controls .controls__slider .controls__progress .progress__pin {
    right: -8px;
	top: -3px;

}

.green-audio-player .controls span {
    cursor: default;
}

.green-audio-player .controls:focus {
    outline: none;
}

.green-audio-player .volume {
    position: relative;
	display: none;
}

.green-audio-player .volume .volume__button {
    cursor: pointer;
    outline: none;
}

.green-audio-player .volume .volume__button:focus {
    outline: none;
}

.green-audio-player .volume .volume__button.open path {
    fill: #44bfa3;
}

.green-audio-player .volume .volume__controls {
    width: 30px;
    height: 135px;
    background-color: rgba(0, 0, 0, 0.62);
    border-radius: 7px;
    position: absolute;
    left: -3px;
    bottom: 52px;
    flex-direction: column;
    align-items: center;
    display: flex;
    z-index: 2;
    outline: none;
}

.green-audio-player .volume .volume__controls .volume__slider {
    margin-top: 12px;
    margin-bottom: 12px;
    width: 6px;
    border-radius: 3px;
}

.green-audio-player .volume .volume__controls .volume__slider .volume__progress {
    bottom: 0;
    height: 100%;
    width: 6px;
}

.green-audio-player .volume .volume__controls .volume__slider .volume__progress .volume__pin {
    left: -5px;
    top: -8px;
}

.green-audio-player .volume .volume__controls:focus {
    outline: none;
}

.green-audio-player .volume .volume__controls.hidden {
    display: none;
}

.green-audio-player .volume .volume__controls.top {
    bottom: 52px;
    left: -3px;
}

.green-audio-player .volume .volume__controls.middle {
    bottom: -54px;
    left: 54px;
}

.green-audio-player .volume .volume__controls.bottom {
    bottom: -164px;
    left: -3px;
}

.green-audio-player .download {
    display: none;
    margin-left: 16px;
    cursor: pointer;
    outline: none;
}

.green-audio-player .download:focus {
    outline: none;
}

.green-audio-player:focus {
    outline: none;
}

.message__offscreen {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}

span.controls__current-time {
	position: absolute;
	bottom: -20px;
	left: 14px;
}

span.controls__total-time {
	position: absolute;
	bottom: -20px;
	right: 0;
}

.chat-audio {
	/* padding: 3px !important;
	position: relative;
	border-radius: 5px;
	height: 38px; */
    width: 245px;
	display: flex;
	align-items: center;
}

.audio-icon {
	padding: 7px 10px;
	/* background: #44607b; */
	margin: 0;
    cursor: pointer;
	color: #ffffff;
	border-radius: 5px;
	font-size: 18px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);
}

/* .sent .chat-audio{
	background: #435f7a;
	color: #ffffff;
} */

.sent .audio-icon{
	/* background: #566574; */
	color: #ffffff;
}

/* .replies .chat-audio{
	background: #f5f5f5;
	color: #ffffff;
} */

.chat-files-block:nth-child(n+2) .file-section {
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	margin-top: 0px;
    padding-top: 0;
}

.btn-msg img:hover{
	filter: invert(1);
}

.act-more-btn:hover{
	background: #FF9800;
}

.btn-msg img, .act-more-btn{
	transition: 0.5s;
}


.mic-icon, .cs-mic-icon, .wa-mic-icon, .poll-icon {
	font-size: 28px;
	color: #407efb;
	vertical-align: middle;
	transition: 0.5s;
}

.mic-icon:hover, .cs-mic-icon:hover, .wa-mic-icon:hover, .poll-icon:hover {
	color: #FF9800;
}


@keyframes blink {
    0% {
        color: rgba(255,0,0,1)
    }
    50% {
        color: rgba(255,0,0,0.5)
    }
    100% {
        color: rgba(255,0,0,1)
    }
}
@-webkit-keyframes blink {
    0% {
        color: rgba(255,0,0,1)
    }
    50% {
        color: rgba(255,0,0,0.2)
    }
    100% {
        color: rgba(255,0,0,1)
    }
}

.recording-started .mic-icon, .recording-started .cs-mic-icon, .recording-started .wa-mic-icon{
    -moz-transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -ms-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
    -moz-animation:blink normal 1.5s infinite ease-in-out;
    -webkit-animation:blink normal 1.5s infinite ease-in-out;
    -ms-animation:blink normal 1.5s infinite ease-in-out;
    animation:blink normal 1.5s infinite ease-in-out;
}

#message_content {
	height: 32px;
	font-size: 12px;
	border: none;
	line-height: 1.6;
	border-radius: 3px;
}

.tooltip-inner label {
	margin: 0;
	padding: 0;
	line-height: 1;
}

.rec-stop, .rec-cancel, .cs-rec-stop, .cs-rec-cancel, .wa-rec-stop, .wa-rec-cancel{
	cursor: pointer;
}

.rec-controlls {
	font-size: 20px;
	line-height: 1;
}

.rec-stop:hover, .cs-rec-stop:hover, .wa-rec-stop:hover {
	color: #8BC34A !important;
}

.rec-cancel:hover, .cs-rec-cancel:hover, .wa-rec-cancel:hover {
	color: red !important;
}

.reply-msg-row {
    align-items: flex-end;
    background-color: #f5f5f5;
    box-sizing: border-box;
    display: flex;
    position: absolute;
    transition: transform .25s;
    width: 100%;
    padding: 5px;
}

.reply-msg-row  .replied-to {
	background-color: #dbdee0;
}

.reply-msg-row-show {
    transform: translateY(-100%);
}

.reply-msg-row-hide {
	transform: translateY(0%);
}

.reply-msg-row .replied-to {
    width: 100%;
    text-align: left;
    color: #425158;
    display: flex;

}

.reply-msg-row .close-reply-msg{
	padding: 5px !important;
    font-size: 16px;
    opacity: 1;
    text-shadow: none;
    color: #F44336;
    border-radius: 3px;
    margin: auto;
}

.replied-to, .wa-replied-to {
    background-color: #49545f;
    position: relative;
    display: flex;
    overflow: hidden;
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
    border-radius: 5px !important;
}

.replies .replied-to, .replies .wa-replied-to {
    margin-bottom: 5px;
}

.replied-border {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    flex: none;
    width: 4px;
    background-color: #7b7bd2;
}

.replied-content {
    padding: 4px 12px 8px 8px !important;
    display: flex;
    flex-grow: 1;
    align-items: center;
    min-height: 42px;
    max-height: 82px;
    overflow: hidden;
}

.replied-content-data {
    flex-grow: 1;
    overflow: hidden;
    color: #eee;
}

.replied-user {
    display: inline-flex;
    max-width: 100%;
    font-weight: 500;
    font-size: 12.8px;
    line-height: 22px;
}

.replied-html {
    display: -webkit-box;
    max-height: 44px;
    overflow: hidden;
    font-size: 12px;
    line-height: 20px;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.replied-preview img{
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.chat-replied-bubble{
    padding-top: 5px;
    border-radius: 5px;
}

.message-data:hover+.chat-actions {
	opacity: 1;
}


.recent-files-chat .chat-files-block {
	width: 100%;
}

.recent-files-chat .chat-files-block {
	width: 100%;
}

.recent-files-chat .file-section{
    width: 100%;
}

.select2-container{
    width: 150px !important;
}

.select2-container--bootstrap4 .select2-selection--single{
    height: 32px !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{
    height: 32px !important;
    font-size: 13px;
    line-height: 31px;
    background: #7b7e8a;
    color: #fff;
    border-radius: 3px;
}

.select2-container--bootstrap4 .select2-selection{
    border: none;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection{
    box-shadow: none;
}

.select2-results__option--selectable {
	font-size: 13px;
}

.select2-search--dropdown .select2-search__field {
	font-size: 13px;
}

.input-group-prepend ~ .select2-container--bootstrap4 .select2-selection{
	border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.select2-results__message {
	font-size: 13px;
}

.row.group-user:hover {
	color: #c8c8c8;
}

.row.group-user {
	transition: 0.3s;
}

button:focus {
	outline: none;
}

.panel-content {
	height: calc((var(--vh, 1vh) * 100) - 50px) ;
    display: flex;
}

.chat-left-panel {
	display: flex;
	flex-direction: column;
    flex-shrink: 0;
    flex-grow: 1;
    width: calc(100% - 36px);
}

.quick-actions {
	width: 36px;
	height: 100%;
	display: flex;
	background: #2e353e;
	justify-content: center;
    flex-shrink: 0;
}

.quick-actions-border {
	width: 36px;
	height: 100%;
	display: flex;
	background: #2e353e;
	justify-content: center;
    flex-shrink: 0;
}



.quick-actions li {
	margin-top: 10px;
	margin-bottom: 15px;
    text-align: center;
    cursor: pointer;
}


.quick-actions a{
    color: #eee;
}

.topbar {
	height: 50px;
	min-height: 50px;
    z-index: 999;
}

.online-list  {
	height: 100%;
}

.tab-content.tab-sidebar {
	height: 100%;
	overflow-y: auto;
}

.select2-container--bootstrap4 .select2-selection{
    background-color: transparent;
}

.mini-user-list .online-list>div, .mini-user-list .fav-list>div, .mini-user-list .mobile-sidebar-icon {
	padding-left: 0px;
}

.user-type-badge{
    text-transform: UPPERCASE;
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 2px;
    line-height: 1;
    vertical-align: middle;
    color: #fff;
}

.user-type-badge.admin{
    background: #e74a3b;
}

.user-type-badge.mod{
    background: #1cc88a;
}

.user-type-badge.creator{
    background: #4e73df;
}

.chat-name-text{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    display: inline-block;
    vertical-align: middle;
}

#room-selector {
	background: #4b4d50;
	border: none;
	color: #eee;
}

.refresh-user-list{
    display: none;
}

.load-more-users{
    display: none;
}

.online-list-actions {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* .nav.nav-pills.nav-justified.nav-sidebar {
	height: 80px;
} */

.chatroom-user-mod{
    display: inline-block;
}


.chat-name, .chat-preview, .chat-list-col .nav-link {
	color: #ffffff !important;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 0;
}



.channel-container .nav-item .nav-link[data-toggle=collapse]::after {
	width: 1rem;
	text-align: center;
	float: right;
	vertical-align: 0;
	border: 0;
	font-weight: 900;
	content: '\f107';
	font-family: 'Font Awesome 5 Pro';
}

.channel-container .nav-item .nav-link[data-toggle=collapse].collapsed::after {
	width: 1rem;
	text-align: center;
	float: right;
	vertical-align: 0;
	border: 0;
	font-weight: 900;
	content: '\f105';
	font-family: 'Font Awesome 5 Pro';
}

.channel-image img {
	width: 38px;
    height: 38px;
	border-radius: 50%;
    object-fit: cover;
}

.channel-image {
    display: flex;
    align-self: center;
    width: 38px;
    height: 38px;
}

.channel-unread {
    align-self: center;
    margin-left: auto;
    line-height: 1;
    display: flex;
    align-items: end;
}



.cnbadge, .marked-unread-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: white;
    font-weight: 600;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    padding: 0 6px;
    border-radius: 10px;
}

.cnbadge:empty{
    display: none;
}


.channel-item {
    display: flex;
    padding: 10px 10px 10px 15px;
    cursor: pointer;
    transition: .2s;
    position: relative;
}

.channel-item::after {
    content: '';
    position: absolute;
    left: 60px;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: #d8dbdd;
    border-radius: 0;
}

.channel-item:hover, .channel-item.focus{
    background-color: #4a4b4f;
}

.channel-name {
	align-self: center;
	width: 170px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
    padding-left: 7px;
	font-size: 14px;
    color: #eee;
}


.channel-meta {
	font-size: 10px;
	margin-left: 5px;
}

.channel-cat span {
	width: 175px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	vertical-align: bottom;
}



@media screen and (max-width: 1024px) {
    .nav-sidebar .nav-link {
    	padding-left: 5px;
    	padding-right: 5px;
    }
    .channel-cat span {
	      width: 150px;
    }
    .meta-time {
    	width: 120px;
    }

}

/** MINI USER LIST DESKTOP **/

.mini-user-list .channel-item{
    flex-direction: column;
}

.mini-user-list .online-list>div{
    padding: 0;
}

.mini-user-list .channel-unread {
	position: absolute;
	margin-top: 4px;
	margin-left: 36px;
}

.mini-user-list .meta-time{
    display: none;
}

.mini-user-list .channel-meta {
	position: absolute;
	top: 23px;
	left: 26px;
	margin-left: 0;
}


.mini-user-list .channel-cat {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: center;
	flex-wrap: wrap;
}

.mini-user-list .channel-cat i, .mini-user-list .channel-cat span, .mini-user-list .channel-cat:after{
    align-self: center;
    width: 50px;
    text-align: center;
	overflow: hidden;
	white-space: nowrap;
}


.mini-user-list .tab-content.tab-sidebar{
    padding: 0;
}

/** MINI USER LIST MOBILE **/

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

    .selected-chat-col{
        box-shadow: 1px 0px 8px 1px rgba(0, 0, 0, .10);
    }

    .welcome img {
    	width: 200px;
    }

    .channel-name{
        width: 140px;
    }

}


.chat-flex{
    background-color: #ffffff;
	overflow-y: hidden;
    flex:1;
    overflow-x: hidden;
    padding: 0;
    display: flex;
}


.note-flex{
    background-color: #ffffff;
        overflow-y: hidden;
    flex:1;
    overflow-x: hidden;
    padding: 0;
    display: flex;
    display: none;
}

.meeting-left-panel{
    width: calc(100% - 36px);
    display: none;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 1;
}



.meeting-left-body .meeting-section + .meeting-section{
    margin-top: 2rem;
}

.meeting-left-body .meeting-list-item,
.meeting-left-body .meeting-list .meeting-empty-upcoming,
.meeting-left-body .meeting-list .meeting-empty-ongoing,
.meeting-left-body .meeting-list .meeting-empty-past{
    border-radius: 0.75rem;
}

.meeting-left-body .meeting-list .meeting-empty-upcoming,
.meeting-left-body .meeting-list .meeting-empty-ongoing,
.meeting-left-body .meeting-list .meeting-empty-past{
    border: 1px dashed rgba(0, 0, 0, 0.08);
}

.meeting-form-card{
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.meeting-form-card .card-body{
    flex: 1 1 auto;
    overflow-y: auto;
}

.meeting-form-actions{
    width: 100%;
}

.meeting-form-actions .meeting-delete-button{
    margin-right: auto;
}

.meeting-form-actions-right{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.meeting-form-actions-right .btn{
    margin-bottom: 0.5rem;
}


.meeting-list-header-title{
    min-width: 0;
}

.meeting-list-header{
    flex-wrap: wrap;
    gap: 0.75rem;
}

.meeting-list-badges{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.25rem;
    gap: 0.5rem;
}

.meeting-list-actions{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
    gap: 0.5rem;
}

.meeting-list-actions .meeting-action-btn{
    font-size: 0.85rem;
}

.meeting-actions-dropdown .dropdown-menu{
    min-width: 12rem;
}

.meeting-actions-dropdown .dropdown-item i{
    width: 1rem;
    display: inline-block;
    text-align: center;
}

@media (min-width: 768px){
    .meeting-list-header{
        gap: 1rem;
    }
}

@media (max-width: 575.98px){
    .meeting-form-actions{
        flex-direction: column;
        align-items: stretch;
    }

    .meeting-form-actions .meeting-delete-button{
        margin-bottom: 0.75rem;
    }

    .meeting-form-actions-right{
        justify-content: flex-start;
    }

    .meeting-form-actions-right .btn{
        margin-right: 0.5rem;
    }
}

.meeting-flex{
    overflow-y: hidden;
    flex:1;
    overflow-x: hidden;
    padding: 0;
    display: none;
}

.meeting-flex .container-fluid{
    height: calc((var(--vh, 1vh) * 100) - 50px);
}

@media (min-width: 768px){
    .meeting-flex .row{
        min-height: calc((var(--vh, 1vh) * 100) - 60px);
    }

    .meeting-flex .col-xl-8,
    .meeting-flex .col-lg-7{
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .meeting-form-card{
        flex: 1;
    }

    .meeting-form-card .card-body{
        min-height: 0;
    }
}

.stories-flex{
    background-color: #000000;
	overflow-y: hidden;
    flex:1;
    overflow-x: hidden;
    padding: 0;
    display: flex;
    display: none;
    position: relative;
}

.chat-list-col-max{
    flex: 0 0 35%;
    max-width: 35%;
}

.chat-list-col-min{
    flex: 0 0 18%;
    max-width: 18%;
}

.welcome{
    height: calc( (var(--vh, 1vh) * 100) - 150px ) !important;
    min-width: 280px !important;
}

.welcome h2 {
	font-size: 18px;
	font-weight: bold;
    margin-bottom: 0px;
}




.nav-item .channel-cat {
  position: sticky;
  top: 0;
  background: #24282d;
  padding-right: 15px;
  padding-left: 15px;
  z-index: 9;
  cursor: pointer;
}

.nav-item .collapse-inner {
    margin-top: 10px;
    margin-bottom: 10px;
}

.channel-actions {
    align-self: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.ch-right-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    height: 18px;
}

.base-min body{
    height: calc(var(--vh, 1vh) * 100);
}

input.search-input-modal {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	margin-bottom: 5px;
	height: auto;
}

.fav-list, .recent-list, .group-list {
    margin-top: 10px;
    margin-bottom: 10px;
}

.channel-image i {
	position: absolute;
	font-size: 8px;
	left: 16px;
	top: 36px;
}

.channel-meta i {
	font-size: 8px;
}

.fav-list .channel-meta, .recent-list .channel-meta {
	margin-left: 8px;
}

.form-control-file{
	overflow: hidden;
}

.btn-store {
  color: #777777;
  width: 148px;
  padding: 5px 5px !important;
  border-color: #2e353e  !important;
}

.btn-store:focus,
.btn-store:hover {
  color: #ffffff !important;
  background-color: #168eea;
  border-color: #168eea !important;
}

.btn-store .btn-label,
.btn-store .btn-caption {
  display: block;
  text-align: left;
  line-height: 16px;
  font-size: 12px;
}

.btn-store .btn-caption {
	font-size: 16px;
	font-weight: bold;
	line-height: 15px;
}

.pull-left {
	float: left;
}

.btn-store .fab {
	margin-right: 6px;
}

.badge {
	border-radius: 2px;
}

.emojionearea-editor[dir="rtl"] {
	text-align: right;
    font-family: IRANSans !important;
    font-weight: 300;
}

.clipboard-txt[dir="rtl"] {
	text-align: right;
    font-family: IRANSans !important;
    font-weight: 200;
    line-height: 22px;
}

.chat-txt[dir="rtl"] {
	text-align: right;
    font-family: IRANSans !important;
    font-weight: 200;
    line-height: 22px;
}

.last-msg[dir="rtl"] {
    text-align: right;
    font-family: IRANSans !important;
    font-weight: 200;
}

.replied-html[dir="rtl"], .replied-html span[dir="rtl"] {
    text-align: right;
    font-family: IRANSans !important;
    font-weight: 200;
    display: block;
}

.chat-link-block[dir="rtl"] {
	text-align: right;
    font-family: IRANSans !important;
}

.file-caption[dir="rtl"] { 
    text-align: right;
    font-family: IRANSans !important;
    font-weight: 200;
}

.last-msg{
    width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}


.calendar-group{
    padding: 5px;
}


.chat-scroll-actions {
	position: absolute;
	bottom: 70px;
	width: 100%;
	text-align: center;
}

.chat-scroll-actions .btn{
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);
}

/* input#on_screen_chat_id {
	position: absolute;
	z-index: 999;
} */

/* #goto-previous{
    display: none !important;
} */

.forward-user-list .nav-item .channel-cat {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.forward-user-list{
    padding: 0px !important;
}

.forward-actions {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #d4d4d4;
    z-index: 999;
    display: flex;
    height: 225px;
    flex-direction: column;
    padding: 8px;
}

.show-name-forward{
    margin-left:2px;
}

.forward-button-container {
    position: absolute;
    top: -16px;
    right: 16px;
}

.forward-button {
    background: #1cc88a;
    color: #ffffff;
}

.forward-button:disabled {
    opacity: 1 !important;
    cursor: not-allowed;
}

.forward-name {
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 5px;
    margin-left: 2px;
    height: 21px;
}

.forward-caption {
    margin-bottom: 5px;
}

label[for="show_name_on_forward"] {
    font-size: 14px;
}

.forward-modal .modal-content {
    border: none;
    overflow: hidden;
}

.channel-check {
    align-self: center;
    width: 24px;
}

.forward-modal .channel-name {
    color: #24282d;
}

.forward-modal .channel-item{
    border-radius: 0px;
    margin-bottom: 0;
}

.forward-modal .channel-item:hover, .forward-modal .channel-item.focus {
    background-color: #f5f5f5;
}

.forward-modal .nav-item .channel-cat {
    color: #fff;
}

.forward-modal{
    z-index: 1600;
}

.forward-close {
    position: absolute;
    z-index: 999;
    top: 6px;
    right: 6px;
    color: #fff;
    cursor: pointer;
    width: 28px;
    height: 28px;
    background: red;
    display: flex;
    justify-content: center;
    border-radius: 5px;
    align-items: center;
}

input#on_screen_chat_id {
	position: absolute;
	z-index: 999;
	right: 0;
	top: 5px;
}

.fwd-label {
	font-style: italic;
	font-size: 12px;
	opacity: 0.8;
}

.chat-fwd {
	padding: 5px 10px 5px 10px;
	border-radius: 5px;
}

.chat-fwd > div{
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
}

.tooltip-inner{
    font-size: 11px;
}

.search-list {
    margin-top: 10px;
}

.forward-online-list{
    margin-top: 10px;
    height: calc(100vh - 370px);
    overflow-y: auto;
}

.forward-selection {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #6e707e;
    z-index: 999;
    display: flex;
    height: 50px;
}

.forward-selection-button-container {
    align-self: center;
    margin-left: auto;
    margin-right: 10px;
}

/* .new-date {
	position: sticky !important;
	top: 1px;
	float: none !important;
} */

.new-date-sticky {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	z-index: 999;
    text-align: center;
    left: 50%;
    margin-left: -87px;
    margin-top:10px;
}

.new-date-sticky p {
	text-align: center;
	max-width: unset !important;
	background: #607d8b;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	border-radius: 5px;
	font-size: 12px;
    width: 170px;
    color: #e0e0e0  !important;
    line-height: 2;
}

.sent .forward-check {
	margin-right: auto;
}

.replies  .forward-check {
	margin-right: 10px;
}

.forward-check {
	display: flex;
    padding-left: 8px;
}

.forward-check .forward-list-check{
	align-self: center;
    cursor: pointer;
}


.hidden{
    display: none;
}

.visibility-hidden{
    visibility: hidden;
}

.forwarding li {
	transition: 0.3s;
}

.forwarding li:hover, .forwarding .selected {
	background: #ccc !important;
}

.forwarding .chat-actions{
    display: none;
}

.forwarding li {
	transition: 0.3s;
	border-radius: 5px;
	cursor: pointer;
}


.forward-selection {
    background: #bbbebe;
    color: #eee;
}

.forward-selection-name {
	align-self: center;
}

.forward-selection-close {
	align-self: center;
}

.forward-selection-close i:hover {
	background: red;
	padding: 5px;
	border-radius: 50%;
	line-height: 12px;
}

img.recent-link-preview {
	width: 50px;
    margin-right: 10px;
    border-radius: 4px;
    overflow: hidden;
    object-fit: cover;
    display: none;
}

.recent-links-user .file-description {
    width: 85%;
}


.recent-items .chat-files-block, .recent-max-items .chat-files-block {
	overflow: hidden;
    width: 100%;
}

.recent-items .file-section, .recent-max-items .file-section{
    width:100%;
}

.file-description {
	align-self: center;
}

.nav-recent {
	background: #141b20;
    border-radius: 5px;
    overflow: hidden;
}

.nav-recent .nav-pills .nav-link.active, .nav-pills .show > .nav-link{
    background: transparent;
    border-radius: 0 !important;
}

.nav-recent .nav-link.active{
    background: transparent;
    border-bottom: 2px solid #44c88a;
    border-radius: 0;
}

.nav-recent a.nav-link {
	color: #fff;
}

.nav-recent-max {
	background: #141b20;
    margin-top: 1px !important;
    overflow: hidden;
}

.nav-recent-max .nav-pills .nav-link.active, .nav-pills .show > .nav-link{
    background: transparent;
    border-radius: 0 !important;
}

.nav-recent-max .nav-link.active{
    background: transparent;
    border-bottom: 2px solid #44c88a;
    border-radius: 0;
}

.nav-recent-max a.nav-link {
	color: #fff;
}

.recent-panel {
	padding: 0px;
}


.recent-media-close i {
	background: red;
	padding: 5px;
	border-radius: 50%;
	font-size: 12px;
	line-height: 9px;
    cursor: pointer;
}

.recent-max-items {
	padding: 15px;
}

.ack-requires{
    cursor: pointer;
}

.msg-ack {
    color: #ffd700;
}

.badge-ack {
    margin: 5px;
    font-weight: 100;
}

.chat-interactions {
    display: block;
}

.ack-count {
    padding: 4px;
    background: #e74a3b;
    border-radius: 50%;
    line-height: 6px;
    font-size: 10px;
    display: inline-block;
}

.badge-ack {
    margin: 5px;
    font-weight: 100;
    padding: 4px 5px;
    background: transparent;
    border: 1px solid #1cc88a;
}

.channel-icon {
	width: 32px;
	background: #ff9800;
	padding: 5px;
	border-radius: 50%;
	height: 32px;
	display: flex;
    justify-content: center;
}

.channel-icon i {
	position: initial;
	font-size: 14px;
	color: #fff;
	align-self: center;
}

.recent-user-heading{
    display: flex;
}

.message-star{
    font-size: 10px;
    color: #ffd700;
}

.starred-btn i, .starred-btn i:hover {
	color: #ffd700 !important;
}

.starred-panel, .call-log-panel, .notification-panel, .unread-panel {
    padding: 0px;
    overflow: hidden;
}

.starred-list, .call-log-list, .unread-list{
    height: calc((var(--vh, 1vh) * 100) - 128px);
    overflow-y: scroll;
    padding: 10px;
}

.call-log-list, .unread-list{
    height: calc((var(--vh, 1vh) * 100) - 90px);
    overflow-y: scroll;
    padding: 10px;
}

.notification-panel .notifications{
    overflow-y: scroll;
    height: calc((var(--vh, 1vh)* 100) - 90px);
}

.search-list{
    position: relative;
}

.search-chat-list{
    height: calc((var(--vh, 1vh) * 100) - 161px);
    overflow-y: scroll;
    padding: 15px;
}



.popover-body ul {
    padding-left: 0;
    list-style: none;
    font-size: 11px;
    margin-bottom: 0;
}

.ack-by {
    font-size: 13px;
}

.right-panel-header {
    padding: 0px 15px;
    height: 40px;
    display: flex;
    border-bottom: 1px solid;
}

.right-panel-close {
    margin-left: auto;
    align-self: center;
}

.right-panel-close i {
    padding: 5px;
    background: red;
    border-radius: 50%;
    line-height: 9px;
    font-size: 13px;
    cursor: pointer;
    color:#fff;
}

.right-panel-close i:hover {
    color:#ccc;
}

.right-panel-text{
    align-self: center;
    color: #585858;
}

.ack-panel {
    padding: 0px !important;
    overflow: hidden;
}

.nav-ack {
    background: #bbbebe;
    margin-top: 1px !important;
    overflow: hidden;
}

.nav-ack .nav-link.active {
    background: transparent;
    border-bottom: 2px solid #44c88a;
    border-radius: 0;
}

.nav-ack .nav-pills .nav-link.active, .nav-pills .show > .nav-link{
    background: transparent;
    border-radius: 0 !important;
}

.nav-ack a.nav-link {
	color: #fff;
}

.ack-items {
    height: calc((var(--vh, 1vh) * 100) - 170px);
    overflow-y: scroll;
    padding: 15px;
}

.ack-recieved-chats, .ack-request-chats{
    display:table-cell;
}

.ack-panel li.nav-item {
    display: list-item !important;
    margin-bottom: 0;
}


.chat-scroll .chat-actions > i {
	display: none;
}


.chats .sent, .chats .replies, .chats .new-date {
	animation-fill-mode: initial;
}



.right-panel-messages .chat-actions {
    position: absolute;
	top: 34px;
	left: -8px;
}


.file-action-buttons{
    cursor: pointer;
}

.message-edited {
    font-size: 11px;
}


.search-users-list-container {
    position: absolute;
	border: 1px solid black;
	border-radius: 5px;
	width: 270px;
	height: 200px;
	overflow-y: scroll;
	box-shadow: 0px 1px 3px 0px #1a232a;
	background: #020816;
	margin-top: 2px;
    display: none;
    z-index: 99999;
}

#filter-user-list, #filter-wa-agent {
	position: sticky;
	top: 0;
	z-index: 99;
    border-bottom: 1px solid #202932 !important;
}

.search-info {
	padding: 5px;
	background: #47b9cc;
	color: #fff;
	font-size: 14px;
}

/* .chat-data-header, .chat-list-col .nav-link.recent-tab {
    display: flex;
} */

.nav-search .input-group-append {
	background: #1f2831;
}

.chat-data-header, .chat-list-col .recent-tab .total-unread {
    align-self: center;
}

.search-users-list, .search-wa-agent-list {
    height: 215px;
    overflow-y: scroll;
    width: 251px;
    overflow-x: hidden;
}

.search-chats mark {
    padding: 1px;
    background-color: #fff1a0;
    line-height: 1;
    border-radius: 2px;
    display: inline-block;
}

.file-uploader, .cs-file-uploader, .wa-file-uploader {
	display: none;
	position: absolute;
	background: #141b20;
	width: 100%;
	bottom: 0;
	height: calc((var(--vh, 1vh) * 100) - 50px);
	padding: 5px;
    z-index: 999;
}

.file-uploader-close, .story-uploader-close, .pixie-container-close, .cs-file-uploader-close, .wa-file-uploader-close, #closeRecorderBtn {
	position: absolute;
	right: 10px;
    z-index: 9;
}

.file-uploader-close i, .story-uploader-close i, .pixie-container-close i, .cs-file-uploader-close i, .wa-file-uploader-close i, #closeRecorderBtn i {
	padding: 5px;
	background: red;
	border-radius: 50%;
	line-height: 9px;
	font-size: 13px;
	cursor: pointer;
	color: #fff;
}

a.uppy-Dashboard-poweredBy {
    display: none;
}

[data-uppy-theme=dark] .uppy-Dashboard-inner {
    background-color: #141b20;
    border: none;
    height: calc((var(--vh, 1vh) * 100) - 50px) !important;
}

.gse-row{
    display: none;
    background-color: #141c20;
    border-bottom: 1px solid #19232a;
}

.gif-preview {
	width: 100%;
    /* height: 120px;
    object-fit: cover;
    object-position: center; */
    cursor: pointer;
    transition: 0.3s;
}

.gif-preview:hover {
	border: 3px solid #407efb;
}

.send-gif {
	padding: 1px;
}

.emojionearea-search .search {
	border: 1px solid #2d3338;
	background: #19232a;
}

.message-reply-later {
    font-size: 12px;
    color: #ff0000e6;
}

.reply-later-btn i, .reply-later-btn i:hover {
    color: #ff0000e6 !important;
}

.reply-later-panel, .remind-me-panel, .checked-messages-panel {
    padding: 0px;
    overflow: hidden;
}

.reply-later-panel-close, .call-log-panel-close, .remind-me-panel-close, .checked-messages-panel-close{
    margin-left: auto;
    align-self: center;
}

.reply-later-panel-close i, .call-log-panel-close i, .remind-me-panel-close i, .checked-messages-panel-close i{
    padding: 5px;
    background: red;
    border-radius: 50%;
    line-height: 9px;
    font-size: 13px;
    cursor: pointer;
    color: #fff;
}

.call-panel-close {
    margin-left: auto;
    align-self: center;
}

.call-close i {
    padding: 5px;
    background: red;
    border-radius: 50%;
    line-height: 9px;
    font-size: 13px;
    cursor: pointer;
    color: #fff;
}

.reply-later-list, .remind-me-list , .checked-messages-list  {
    height: calc((var(--vh, 1vh) * 100) - 128px);
    overflow-y: scroll;
    padding: 15px;
}

.video-container{
	background: black;
	height: 300px;
	position: relative;
	display: none;
    width: 100%;
    z-index: 9998;
}

.video-container.answered{
    max-height: 300px;
}

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

@keyframes ring {
  0% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  2% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  4% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }

  6% {
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  8% {
    -webkit-transform: rotate(-22deg);
    transform: rotate(-22deg);
  }

  10% {
    -webkit-transform: rotate(22deg);
    transform: rotate(22deg);
  }

  12% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }

  14% {
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  16% {
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }

  18% {
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
  }

  20%, 100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.ringing-animate {
	-webkit-animation: ring 2s ease infinite;
	animation: ring 2s ease infinite;
}

.call-controlls {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	background: #141b20;
	left: 0;
    padding: 6px;
    height: 54px;
}

.call-controll {
    padding: 10px;
	border-radius: 3px;
	width: 43px;
	font-size: 15px;
	text-align: center;
	margin-left: 5px;
	margin-right: 5px;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	background: #202932;
}

.call-controll.answer{
	color: #4caf50;
}
.call-controll.answer:hover{
	color: #fff;
    background: #4caf50;
}

.call-controll.hangup{
	color: #f44336;
}
.call-controll.hangup:hover{
    color: #fff;
	background: #f44336;
}


.call-controll.hold{
	color: #ff9800;
}
.call-controll.hold:hover{
    color: #fff;
	background: #ff9800;
}

.call-controll.unhold{
	color: #2196f3;
}
.call-controll.unhold:hover{
    color: #fff;
	background: #2196f3;
}

.call-controll.mute{
	color: #4caf50;
}
.call-controll.mute:hover{
    color: #fff;
	background: #4caf50;
}

.call-controll.unmute{
	color: #f24336;
}
.call-controll.unmute:hover{
    color: #fff;
	background: #f24336;
}

.call-controll.video-mute{
	color: #00bcd4;
}
.call-controll.video-mute:hover{
    color: #fff;
	background: #00bcd4;
}

.call-controll.video-unmute{
	color: #f24336;
}
.call-controll.video-unmute:hover{
    color: #fff;
	background: #f24336;
}

.call-controll:hover{
	background: #2a2c2f;
}

.call-controll{
    transition: 0.3s;
}

.call-controlls:hover{
	opacity: 1;
}

#media-div{
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
}

#launch-audio-call {
	background: #8bc34a;
	padding: 6px;
	border-radius: 50%;
	color: #fff;
    cursor: pointer;
    transition: 0.3s;
    margin-left: auto;
}

#launch-audio-call:hover {
    background: #4caf50;
}

#launch-video-call {
    background: #4a96c3;
    padding: 6px;
    margin-right: 5px;
	border-radius: 50%;
	color: #fff;
    cursor: pointer;
    transition: 0.3s;
}

#launch-video-call:hover {
    background: #0660e6;
}

.remote-video {
	width: 100%;
    border-radius: 5px;
}

.local-video {
	width: 100%;
	border-radius: 5px;
}

.sip-videos {
	position: relative;
}

.quick-actions ul {
	padding: 0;
	list-style: none;
}

.aside-menu .menu-nav .menu-inner, .aside-menu .menu-nav .menu-submenu {
	display: none;
	float: none;
	margin: 0;
	padding: 0;
}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-subnav {
	margin: 0;
}
.aside-menu .menu-nav .menu-subnav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	padding: 0;
	margin: 0;
	list-style: none !important;
}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item {
	margin: 0;
}
.aside-menu .menu-nav .menu-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	float: none;
	padding: 0;
}

.aside-menu .menu-nav > .menu-item > .menu-submenu .menu-subnav > .menu-item > .menu-link {
	padding-left: 20px;
}

.aside-menu .menu-nav > .menu-item > .menu-heading, .aside-menu .menu-nav > .menu-item > .menu-link {
	cursor: pointer;
	min-height: 30px;
}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link {
	cursor: pointer;
	border-radius: 0.42rem;
	min-height: 30px;
}

.aside-menu .menu-nav .menu-item > .menu-heading, .aside-menu .menu-nav .menu-item > .menu-link {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	margin: 0;
	padding: 0;
	text-decoration: none;
	position: relative;
	outline: none;
    color: #eee;
}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-bullet, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-bullet {
	vertical-align: middle;
	text-align: left;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 15px;
	flex: 0 0 15px;
}
.aside-menu .menu-nav .menu-item > .menu-heading .menu-bullet, .aside-menu .menu-nav .menu-item > .menu-link .menu-bullet {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	line-height: 0;
}
i.menu-bullet {
	margin-right: 5px;
}

.aside-menu .menu-nav .menu-item > .menu-heading .menu-text, .aside-menu .menu-nav .menu-item > .menu-link .menu-text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	padding: 0;

}

.menu-text {
    font-size: 13px;
}

.aside-menu .menu-nav > .menu-item.menu-item-open {
	-webkit-transition: background-color 0.3s;
	transition: background-color 0.3s;
}
.aside-menu .menu-nav > .menu-item {
	position: relative;
	margin: 0;
}

.aside-menu .menu-nav .menu-item.menu-item-open > .menu-submenu, .aside-menu .menu-nav .menu-item.menu-item-open > .menu-inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-icon, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-icon {
	color: #B5B5C3;
}
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-icon, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-icon {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 25px;
	flex: 0 0 25px;
	font-size: 1rem;
}
.aside-menu .menu-nav .menu-item > .menu-heading .menu-icon, .aside-menu .menu-nav .menu-item > .menu-link .menu-icon {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	line-height: 0;
}

.aside-menu .menu-nav > .menu-item > .menu-submenu .menu-subnav > .menu-item > .menu-submenu .menu-subnav > .menu-item > .menu-link {
	padding-left: 55px;
}

.aside-menu .menu-nav {
	margin: 0;
	list-style: none;
	padding: 0px 2px;
}


.aside-menu .menu-nav > .menu-item > .menu-heading .menu-icon, .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 25px;
	flex: 0 0 25px;
	font-size: 1rem;
}

.aside-menu .menu-nav > .menu-item > .menu-heading .menu-arrow, .aside-menu .menu-nav > .menu-item > .menu-link .menu-arrow {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 20px;
	flex: 0 0 20px;
	font-size: 0.6rem;
}
.aside-menu .menu-nav .menu-item > .menu-heading .menu-arrow, .aside-menu .menu-nav .menu-item > .menu-link .menu-arrow {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	line-height: 0;
}

.aside-menu .menu-nav > .menu-item > .menu-heading .menu-arrow:before, .aside-menu .menu-nav > .menu-item > .menu-link .menu-arrow:before {
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	font-family: "Font Awesome 5 Pro";
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-decoration: inherit;
	text-rendering: optimizeLegibility;
	text-transform: none;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	content: "\f054";
}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-arrow:before, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-arrow:before {
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	font-family: "Font Awesome 5 Pro";
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-decoration: inherit;
	text-rendering: optimizeLegibility;
	text-transform: none;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	content: "\f054";
}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-arrow, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-arrow {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 20px;
	flex: 0 0 20px;
	font-size: 0.6rem;
}

.aside-menu .menu-nav .menu-item > .menu-heading .menu-arrow:before, .aside-menu .menu-nav .menu-item > .menu-link .menu-arrow:before {
	-webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); /*rtl:ignore*/
}

.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading .menu-arrow:before, .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-arrow:before {
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.aside-menu .menu-nav .menu-item.menu-item-open > .menu-heading > .menu-arrow:before, .aside-menu .menu-nav .menu-item.menu-item-open > .menu-link > .menu-arrow:before {
	-webkit-transform: rotateZ(90deg) /*rtl:ignore*/;
	transform: rotateZ(90deg) /*rtl:ignore*/;
}


.note-left-panel {
	width: calc(100% - 36px);
    display: none;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 1;
}


.notes-list {
	border-left: 1px solid #4a4a4a;
    padding: 0;
    height: calc((var(--vh, 1vh) * 100) - 90px);
}

.note-title {
	color: #eee;
    font-size: 13px;
}

.load-page {
	padding: 5px 5px 5px 10px;
    transition: 0.5s;
    cursor: pointer;
}

.load-page:hover, .load-page:active, .load-page:focus {
	background: #141b20;
}

.note-cat-heading {
	color: #fafafa;
	font-weight: bold;
	margin-top: 10px;
    margin-bottom: 10px;
}



.note-symbol {
	font-size: 25px;
	margin-right: 10px;
}

.note-by {
	font-size: 10px;
}

.note-symbol i{
	align-self: center;
	display: flex;
}

.symbol-group {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.symbol .symbol-label {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-weight: 500;
	color: #3F4254;
	background-color: #F3F6F9;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border-radius: 0.42rem;
}

.symbol-group.symbol-hover .symbol {
	cursor: pointer;
}

.symbol-group .symbol:first-child {
	margin-left: 0;
}

.symbol-group .symbol {
	position: relative;
	z-index: 0;
	margin-left: -10px;
	border: 2px solid #282d36;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.symbol.symbol-light-primary .symbol-label {
	background-color: #C9F7F5;
	color: #1BC5BD;
}

.symbol.symbol-30 .symbol-label {
	width: 30px;
	height: 30px;
}

.symbol {
	display: inline-block;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	position: relative;
	border-radius: 0.42rem;
}

.symbol.symbol-30 > img {
	width: 100%;
	max-width: 30px;
	height: 30px;
}
@media (min-width: 1200px){
.symbol > img {
	width: 100%;
	max-width: 50px;
	height: 50px;
}
}
@media (min-width: 992px){
.symbol > img {
	width: 100%;
	max-width: 50px;
	height: 50px;
}
}
@media (min-width: 768px){
    .symbol > img {
    	width: 100%;
    	max-width: 50px;
    	height: 50px;
    }
}

@media (min-width: 576px){
.symbol > img {
	width: 100%;
	max-width: 50px;
	height: 50px;
}
}
.symbol > img {
	width: 100%;
	max-width: 50px;
	height: 50px;
}
.symbol > img {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border-radius: 0.42rem;
}

.card-note {
	height: calc((var(--vh, 1vh) * 100));
	overflow: hidden;
}
.card-note {
	border-radius: 0;
	border: none;
}

.note-heading{
    margin-bottom: 0 !important;
    font-size: 14px;
}

.card-note .card-header {
	padding: 0px 0px 0px 15px;
	height: 41px;
    /* background: linear-gradient(to right,#141B20,#141B20) !important; */
    border-radius: 0;
}

.card-note .card-body {
	padding: 0;
}

.tox-target{
    display: none;
}

.tox-tinymce {
	height: calc((var(--vh, 1vh) * 100) - 100px) !important;
}

span.tox-statusbar__branding {
	display: none;
}

.aside-menu {
	margin-top: 10px;
}

.tox-tinymce{
    border: none !important;
}

.note-actions {
	bottom: 0;
	width: calc(100% - 36px);
	background: #141b20;
	padding: 5px;
}

.new-page-col {
	border-left: 1px solid #2e353e;
}

.note-search {
	background: #19232a !important;
}

.note-search {
	font-size: 13px;
	padding: 18px 15px;
	line-height: 1;
}

.container-note {
	min-width: 320px;
}

@media (max-width:1024px){
    .menu-text {
    	font-size: 12px !important;
    }
    .note-title {
    	font-size: 12px;
    }
    .note-cat-heading {
    	font-size: 12px;
    }
}

@media (min-width: 992px){
    .d-lg-flex {
    	display: flex !important;
    }
}

.active-tab {
	color: #009688;
}

.menu-item-open > a > span .fa-folder:before {
	content: "\f07c";
}

.menu-bullet {
	font-size: 13px;
}

.context-menu {
	position: absolute;
	text-align: left;
	background: #141b20;
    font-size: 12px;
    z-index: 99999;
}

.context-menu ul {
    padding: 0px;
	margin: 0px;
	min-width: 150px;
	list-style: none;
	border-radius: 2px;
	border: 1px solid #2f3842;
}

.context-menu ul li {
    border-bottom: 1px solid #1f2831;
    cursor: pointer;
}


.context-menu ul li a{
	width: 100%;
	display: block;
	padding: 7px;
}

.context-menu ul li a {
    text-decoration: none;
    color: #eee;
}

.context-menu ul li:hover {
    background: #222f3e;
}

.page-list {
	cursor: pointer;
}

.history-col{
    margin: 0;
    padding: 0;
    display: none;
}

.editor-col{
    margin: 0;
    padding: 0;
}

.timeline .timeline-items {
    margin: 0;
    padding: 0;
}
.timeline .timeline-items .timeline-item {
    margin-left: 0;
    padding: 0;
    position: relative;
}
.timeline .timeline-items .timeline-item .timeline-media {
    position: absolute;
    top: 5px;
    border-radius: 100%;
    width: 35px;
    height: 35px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff;
    line-height: 0;
}
.timeline .timeline-items .timeline-item .timeline-media i {
    font-size: 1.4rem;
}
.timeline .timeline-items .timeline-item .timeline-media .svg-icon svg {
    height: 24px;
    width: 24px;
}
.timeline .timeline-items .timeline-item .timeline-desc {
    padding: 0 0 15px 44px;
    transition: 0.3s;
}
.timeline .timeline-items .timeline-item .timeline-desc::before {
    content: "";
    position: absolute;
    width: 2px;
    height: calc(100% - 32px);
    background-color: #ebedf3;
    border-radius: 6px;
    top: 40px;
    left: 16px;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-primary::before {
    background-color: #1bc5bd;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-light-primary::before {
    background-color: #c9f7f5;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-secondary::before {
    background-color: #e4e6ef;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-light-secondary::before {
    background-color: #ebedf3;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-success::before {
    background-color: #3699ff;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-light-success::before {
    background-color: #e1f0ff;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-info::before {
    background-color: #6993ff;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-light-info::before {
    background-color: #e1e9ff;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-warning::before {
    background-color: #ffa800;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-light-warning::before {
    background-color: #fff4de;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-danger::before {
    background-color: #f64e60;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-light-danger::before {
    background-color: #ffe2e5;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-light::before {
    background-color: #f3f6f9;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-light-light::before {
    background-color: #f3f6f9;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-dark::before {
    background-color: #181c32;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-light-dark::before {
    background-color: #d1d3e0;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-white::before {
    background-color: #fff;
}
.timeline .timeline-items .timeline-item .timeline-desc.timeline-desc-light-white::before {
    background-color: #fff;
}
.timeline .timeline-items .timeline-item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.history-user-img img {
	width: 36px;
	border-radius: 50%;
}

.history-user-name {
	margin-bottom: 0;
	font-size: 12px;
}

.history-user-time {
	margin-bottom: 0;
	font-size: 12px;
    color: #00bcd4;
	font-weight: 700;
}

.timeline{
	padding: 10px;
}

.timeline-desc:hover, .timeline-desc:hover>.history-user-time {
	cursor: pointer;
	color: #44c88a !important;
}

.active-section {
    background: #141b20;
}

.active-page {
    background: #141b20;
}

.share-user-search {
    font-size: 13px;
    padding: 18px 15px;
    line-height: 1;
    background: #eee;
}

#shareModal .meta-time {
	padding-left: 2px;
}

.shared-item{
    margin-bottom: 10px;
}

.share-item{
    margin-bottom: 5px;
}

.btn-share-user-search {
	height: 36px;
	line-height: 1;
    background: #eee;
}

.shared-list {
	height: 250px;
	overflow: auto;
}

.share-search-col {
    position: relative;
}

.share-search-results {
	position: absolute;
    background: #eee;
	z-index: 9999;
	width: 100%;
	height: 180px;
	overflow: auto;
	border-top: 2px solid #4e73df;
	border-radius: 5px;
    top: 38px;
    padding: 5px;
    display: none;
}

.card-note{
    border-top: 1px solid #d8dbdd;
}

.history-col {
    height: calc((var(--vh, 1vh)* 100) - 50px);
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    z-index: 999999;
    background: #1f2831f0;
    right: 0;
    width: 30%;
}

.note-menu-list {
	height: calc((var(--vh, 1vh) * 100) - 90px);
	overflow-y: scroll;
	overflow-x: hidden;
}

.page-list{
    height: calc((var(--vh, 1vh) * 100) - 132px);
	overflow-y: scroll;
	overflow-x: hidden;
}

.forward-modal .panel-content {
	flex-direction: column;
    height: calc((var(--vh, 1vh) * 100) - 57px) ;
}

.pswp__button--forward {
	background-position: -44px -44px;
}

.pswp__button--reply {
	background-position: -44px -44px;
}

.pswp__button--download {
	background-position: -88px -44px;
}

.fancybox-slide--iframe .fancybox-content {

    width  : 90%;
    height : 90%;
    margin: 0;
}

.call-panel {
	padding: 0;
    overflow-y: hidden;
}

.call-card-body{
    padding: 7px;
    height: calc((var(--vh, 1vh)* 100) - 105px);
    overflow-y: scroll;
}

.call-messages {
	margin-top: 20px;
	text-align: center;
    color: #eee;
}

.btn-call{
    display: none;
}

.calling{
    color: #eee;
    text-align: center;
}


.blob {
	border-radius: 50%;
	transform: scale(1);
	animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
	}
}

.call-controll.timer {
	width: 60px;
}

.call-controll.timer label {
	line-height: 1;
    margin: 0;
}


.call-swal .swal2-popup.swal2-modal.swal2-show {
	background: #2c3338;
	color: #eee;
}

.call-swal .swal2-html-container p {
	color: #eee;
	margin: 0;
}

.call-swal .swal2-footer {
	border-top: 1px solid #3c444a;
}

.call-swal .swal2-popup.swal2-modal.swal2-show {
	width: 350px;
	padding: 20px;
}

.on-call{
    pointer-events: none;
    opacity: 0.5;
}

.stories-left-panel {
	width: 100%;
	padding: 10px;
    display: none;
}

.story {
    aspect-ratio: 9 / 16;
    height: calc((var(--vh, 1vh) * 100) - 100px);
	background-size: contain !important;
	border-radius: 5px;
	position: relative;
	background-repeat: no-repeat !important;
	background-position: center !important;
    background-color: #1f2831;
}

.story-user img {
	border-radius: 50%;
	/* width: 40px;
	height: 40px;
	border: 2px solid #e91e63;
    text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3); */
}

.story-user span {
	color: #fff;
	font-weight: 600;
    text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
    margin-left: 5px;
}

.story-user small {
	color: #fff;
	font-weight: 600;
    font-size: 12px;
    text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
}

.story-user {
	padding: 25px 10px 10px;
    background-image: linear-gradient(180deg,rgba(0,0,0,0.4),rgba(0,0,0,0.1) 52.5%,transparent);
    height: 200px;
    position: absolute;
    width: 100%;
}

.story-container {
	/* display: flex; */
	align-items: center;
	justify-content: center;
    height: 100%;
}

.all-stories .story {
	max-width: 100%;
	height: auto;
}

.progress-container {
    display: flex;
    flex-direction: row;
    cursor: pointer;
	position: absolute;
	z-index: 99;
	width: calc( ((var(--vh, 1vh) * 100) - 130px) / 16 * 9);
	margin-left: calc(50% - (((var(--vh, 1vh) * 100) - 130px) / 16 * 9 / 2));
	top: calc(20px);
}

.progress-wrapper{
    width: 100%;
    padding: 10px 0;
    margin: 0 2px;
}

.progress-wrapper:last-child{
    margin-right: 0;
}

.progress-wrapper:first-child{
    margin-left: 0;
}

.progress {
    height: 4px;
    flex-grow: 1;
    border-radius: 4px !important;
    display: flex;
    background-image: -webkit-linear-gradient(left,
        rgba(255,255,255,.5) 0%,
        rgba(255,255,255,.5) 50%,
        rgba(88, 89, 104,.5) 50.001%,
        rgba(88, 89, 104,.5) 100%
    );
    background-repeat: no-repeat;
    background-size: 200%;
    background-color: #666;
    background-position: 100% 50%;
    animation-timing-function: linear;
    animation-delay: .2s;
    z-index: 9999;
}

.progress.active {
    animation-name: Loader;
}

.progress.passed {
    background-position: 0 0;
}

@keyframes Loader {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* .pause:hover .progress {
  animation-play-state: paused;
} */

.pause .not-hovered {
    display: flex;
}
.pause .hovered {
    display: none;
}

.pause:hover .hovered {
    display: flex;
}


.uppy-stories .uppy-Dashboard-Item-preview img.uppy-Dashboard-Item-previewImg {
	width: 100%;
	height: auto;
    max-height: 100% !important;
    padding: 0;
}

.uppy-stories  .uppy-Dashboard-Item-preview {
    height: 464px;
    width: 261px;
}

.uppy-stories.uppy-Dashboard-Item {
	width: 261px;
	height: 464px;
}

.uppy-stories  .uppy-Dashboard:not(.uppy-size--md) .uppy-Dashboard-Item-preview{
    width: 261px;
	height: 464px;
}

.uppy-stories .uppy-size--md .uppy-Dashboard-Item {
    width: 261px;
	height: 464px;
}

.uppy-stories .uppy-Dashboard-Item-fileInfoAndButtons {
	position: absolute;
	top: 0;
}

.uppy-stories  .uppy-Dashboard-Item-fileInfo {
	display: none;
}

.uppy-stories .uppy-Dashboard-Item-action--edit {
	background: #4f4f4f;
	text-align: center;
	padding: 0px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	line-height: 0.5;
    margin-left: 10px;
}

.uppy-stories .uppy-size--lg .uppy-Dashboard-Item{
    height: 464px;
    width: 261px;
    padding: 0;
}

.uppy-stories .uppy-Dashboard-Item-previewInnerWrap {
	background: #000 !important;
	border-radius: 5px;
}

.uppy-Dashboard-Item-preview img.uppy-Dashboard-Item-previewImg{
    border-radius: 0;
}

.uppy-vid-cont {
	width: 100%;
	position: absolute;
	top: 10px;
	left: 0;
	margin-left: 10px;
}

.uppy-vid-txt {
	background: #2e353e;
	width: 50px;
	color: #fff;
	border-radius: 3px;
	padding: 4px;
	line-height: 1;
	display: inline-block;
}

.uppy-vid-dur {
	background: #2e353e;
	color: #fff;
	border-radius: 3px;
	padding: 4px;
	line-height: 1;
	display: inline-block;
    margin-left: 5px;
}

.story-item{
    display: flex;
    padding: 10px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: .3s;
    position: relative;
}

.story-circle {
    position: absolute;
    margin-top: -3px;
    margin-left: -3px;
}

.channel-image .story-circle{
    width: 44px;
    height: 44px;
}

.story-user .story-circle{
    margin-top: -3px;
    margin-left: -3px;
}

.story-user-image .story-circle{
    margin-top: -4px;
    margin-left: -4px;
}


.story-circle svg {
    width: 48px;
    height: 48px;
    display: block;
}

.story-circle circle {
    stroke-width: 4;
    fill: none;
    stroke: #e91e63;
    stroke-linecap: round;
}

.story-user-image img {
    width: 40px;
    height: 40px;
	border-radius: 50%;
}

.story-name {
	align-self: center;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin-left: 15px;
	font-size: 14px;
	color: #eee;
}

.story-meta {
	font-size: 10px;
    margin-left: 15px;
}

.fa-add-story {
    font-size: 47px;
    margin-left: -2px;
}

.add-story-text {
	align-self: center;
	margin-left: 12px;
	font-size: 18px;
}

.my-stories .channel-info {
	align-self: center;
}

.story-user-image {
	align-self: center;
    position: relative;
    padding: 1px 3px 1px 3px;
    width: 40px;
    height: 40px;
}

.story-item:hover{
    background-color: #4a4b4f;
}

.story-viewed-item{
    display: flex;
    padding: 10px 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: .3s;
    position: relative;
}

.channel-actions.story-reaction img {
	width: 30px;
	height: 30px;
}

.story-reaction {
	margin-left: auto;
	margin-right: 10px;
}

.story-details-header {
    padding: 0px 15px 0px 0px;
    height: 40px;
    display: flex;
    border-bottom: 1px solid;
}

.story-details-text {
    align-self: center;
}

.story-delete {
    margin-left: auto;
    align-self: center;
}

.story-delete i {
    padding: 6px;
    background: red;
    border-radius: 50%;
    line-height: 9px;
    font-size: 13px;
    cursor: pointer;
    color: #fff;
}

.story-view-title {
	margin-left: 5px;
	margin-top: 15px;
	font-weight: bold;
    font-size: 15px;
}


.story-viewers-list {
	height: calc((var(--vh, 1vh) * 100) - 50px);
	overflow-y: auto;
}

.all-stories {
	overflow-y: scroll;
	height: calc((var(--vh, 1vh) * 100) - 50px);
}

.story-item-add {
	display: flex;
	padding: 10px 10px;
	border-radius: 5px;
	cursor: pointer;
	transition: .3s;
	position: relative;
}

.stories-details {
	background: #1f2831;
}

.g-recaptcha {
	display: flex;
	justify-content: center;
	margin-bottom: 15px;
}

.story-list-item {
    cursor: pointer;
}

.photo-swipe-area {
    position: relative;
    height: calc((var(--vh, 1vh) * 100) - 50px) !important;
}

.stories-main-area .photo-swipe-area{
    z-index: 1;
}

.channel-story-circle {
    position: absolute;
    width: 38px;
    height: 38px;
    left: 12px;
    top: 2px;
}

.channel-story-circle svg {
    width: 100%;
    height: 100%;
}

.channel-story-circle circle {
    stroke-width: 5;
    fill: none;
    stroke: #e91e63;
    stroke-linecap: round;
}

#all-tab .channel-story-circle, #groups-tab .channel-story-circle{
    left: 0.45em !important;
	top: 0.1em;
}


.status-cls i {
	font-size: 8px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	line-height: 1;
	width: 12px;
	height: 12px;
}

.status-cls i{
    font-size: 8px;
}

.title-container {
	display: flex;
	align-self: center;
}

.story-video{
    position: absolute;
}

.story-action {
	display: block;
	float: right;
	top: 34px;
    cursor: pointer;
    color: #eee;
    position: absolute;
	right: 10px;
}

.uppy-stories .uppy-Dashboard-Item-previewIconWrap{
    display: none;
}

.uppy-caption, .cs-uppy-caption, .wa-uppy-caption{
    position: absolute;
    z-index: 9999;
    bottom: 72px;
    left: 2%;
    width: 96%;
}

.progress-wrapper.active {
	pointer-events: none;
}

.ratio-container{
    background-color: red;
    position: relative;
    width: 100%;
    padding-top: 177%; /* 16:9 Aspect Ratio */
}

.ratio-item{
    position: absolute;
}

.file-caption {
    padding: 0px 10px 5px 10px;
    border-radius: 5px;
    margin-top: 0px;
    max-width: 220px;
    line-height: 18px;
    white-space: pre-wrap;
}

/* .sent .file-caption {
	text-align: right;
    float: right;
} */

input[dir="rtl"] {
	text-align: right;
	font-family: IRANSans !important;
	font-weight: 300;
}

.chat-call {
	display: flex;
	padding: 10px;
	border-radius: 5px;
}

.call-ico {
	width: 40px;
	height: 40px;
    margin-right: 5px;
}

.call-inf .call-data {
	display: block;
}

.call-inf .call-meta {
    display: block;
	font-size: 12px;
	margin-top: 5px;
}

.call-inf {
	align-self: center;
}

.cn-call {
	display: block;
	border-radius: 50%;
	background-size: 20px;
	background-repeat: no-repeat;
	width: 40px;
	height: 40px;
	background-position: center;
	background-color: #19232a;
}

.cn-call.call-1-1 {
    background-image: url('../img/call/missed.svg');
}

.cn-call.call-1-2-sent {
    background-image: url('../img/call/outgoing.svg');
}

.cn-call.call-1-2-recieved {
    background-image: url('../img/call/incoming.svg');
}

.cn-call.call-2-1 {
    background-image: url('../img/call/vmissed.svg');
    background-size: 25px;
}

.cn-call.call-2-2-sent {
    background-image: url('../img/call/voutgoing.svg');
    background-size: 25px;
}

.cn-call.call-2-2-recieved {
    background-image: url('../img/call/vincoming.svg');
    background-size: 25px;
}

.cn-call.call-1-3-sent, .cn-call.call-1-4-sent, .cn-call.call-1-5-sent, .cn-call.call-1-6-sent {
    background-image: url('../img/call/missed.svg');
    background-size: 25px;
}

.cn-call.call-1-3-recieved, .cn-call.call-1-4-recieved, .cn-call.call-1-5-recieved, .cn-call.call-1-6-recieved {
    background-image: url('../img/call/missed.svg');
    background-size: 25px;
}

.cn-call.call-2-3-sent, .cn-call.call-2-4-sent, .cn-call.call-2-5-sent, .cn-call.call-2-6-sent {
    background-image: url('../img/call/vmissed.svg');
    background-size: 25px;
}

.cn-call.call-2-3-recieved, .cn-call.call-2-4-recieved, .cn-call.call-2-5-recieved, .cn-call.call-2-6-recieved {
    background-image: url('../img/call/vmissed.svg');
    background-size: 25px;
}


.grp-avatar {
	position: relative;
}

.status-cls {
	position: absolute;
	left: 0px;
	bottom: -4px;
}

.channel-image i.fa-circle {
	border: 2px solid #1f2831;
	border-radius: 50%;
	width: 12px;
	height: 12px;
}

.right-panel-messages .message-data {
    width: 100%;
}

.editor-col {
    height: calc((var(--vh, 1vh) * 100) - 90px) !important;
}
.e-ribbon, .e-spreadsheet .e-formula-bar-panel, div#spreadsheet_sheet, div#spreadsheet_sheet_tab_panel{
    border:none;
}
.fa, .far, .fas {
    font-family: "Font Awesome 5 Pro" !important;
}

.fa-file-word{
    color: #5959b5;
}

.fa-file-excel{
    color: #2f8a1f;
}

.designer {
    height: calc(100% - 15px);
}

.ribbon-button-save {
    background-image: url('../vendor/grapecity/save.png');
    background-size: 35px 35px;
}

#gc-designer-container {
    height: 100%;
    color: #141b20;
}

.mention{
    color: #3ca9ff !important;
    cursor: pointer;
    transition: 0.3s;
}

.mention:hover{
    color: #0277bd !important;
}

.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] {
	top: auto !important;
	bottom: 50px !important;
	background: #19232a;
}

.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item a {
	color: #eee;
    cursor: pointer;
}

.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item.active, .dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item:hover {
	background-color: #858796;
}

.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item.active a, .dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item:hover a {
	color: #fff;
}

.noti-count{
    right: 9px;
    font-size: 9px;
    top: -8px !important;
}

.noti-icon img {
    border-radius: 50%;
}

.noti-time {
    font-size: 12px;
    color: #2275d7;
}

.noti-content {
    font-size: 14px;
    color: #585858;
    line-height: 1.3;
    display: block;
}

.noti-item {
	margin-bottom: 5px;
	padding-bottom: 5px;
	background: #fff;
	margin: 10px;
	padding: 10px;
	border-radius: 5px;
    transition: 0.3s;
    cursor: pointer;
    position: relative;
}

.noti-item:hover {
	background: #eee;
}

.noti-read {
    background: #eee;
}

.title-container .active-online-status i {
	font-size: 10px;
	margin-left: 5px;
}


.replies .message-data:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -4px;
    /* z-index: -1; */
    right: auto;
    top: 0px;
    bottom: auto;
    border: 7px solid;
}

.sent .message-data:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: -4px;
    /* z-index: -1; */
    left: auto;
    top: 0px;
    bottom: auto;
    border: 7px solid;
}

/* Bubble Colors */

.sent .message-data {
	background: #435f7a;
    color: #f5f5f5;
}

.sent .message-data:before {
    border-color:#435f7a transparent transparent transparent;
}

.replies .message-data{
	background: #dbdee0;
    color: #585858;
}

.replies .message-data:after {
    border-color:#dbdee0 transparent transparent transparent;
}

.nav-search {
    background: #bbbebe;
}

.room-user-search {
	background: #141b20;
	height: 40px;
}

:root{--mc-red-100:#ffcdd2;--mc-red-300:#e57373;--mc-red-500:#f44336;--mc-pink-100:#f8bbd0;--mc-pink-300:#f06292;--mc-pink-500:#e91e63; --mc-purple-100: #e1bee7;--mc-purple-300:#ba68c8;--mc-purple-500:#9c27b0;--mc-deep-purple-100:#d1c4e9;--mc-deep-purple-300:#9575cd;--mc-deep-purple-500:#673ab7;--mc-indigo-100:#c5cae9;--mc-indigo-300:#7986cb;--mc-indigo-500:#3f51b5;--mc-blue-100:#bbdefb;--mc-blue-300:#64b5f6;--mc-blue-500:#2196f3;--mc-light-blue-100:#b3e5fc;--mc-light-blue-300:#4fc3f7;--mc-light-blue-500:#03a9f4;--mc-cyan-100:#b2ebf2;--mc-cyan-300:#4dd0e1;--mc-cyan-500:#00bcd4;--mc-teal-100:#b2dfdb;--mc-teal-300:#4db6ac;--mc-teal-500:#009688;--mc-green-100:#c8e6c9;--mc-green-300:#81c784;--mc-green-500:#4caf50;--mc-light-green-100:#dcedc8;--mc-light-green-300:#aed581;--mc-light-green-500:#8bc34a;--mc-lime-100:#f0f4c3;--mc-lime-300:#dce775;--mc-lime-500:#cddc39;--mc-yellow-100:#fff9c4;--mc-yellow-300:#fff176;--mc-yellow-500:#ffeb3b;--mc-amber-100:#ffecb3;--mc-amber-300:#ffd54f;--mc-amber-500:#ffc107;--mc-orange-100:#ffe0b2;--mc-orange-300:#ffb74d;--mc-orange-500:#ff9800;--mc-deep-orange-100:#ffccbc;--mc-deep-orange-300:#ff8a65;--mc-deep-orange-500:#ff5722;--mc-brown-100:#d7ccc8;--mc-brown-300:#a1887f;--mc-brown-500:#795548;--mc-blue-grey-100:#cfd8dc;--mc-blue-grey-300:#90a4ae;--mc-blue-grey-500:#607d8b;--mc-grey-50:#fafafa;--mc-grey-100:#f5f5f5;--mc-grey-200:#eee;--mc-grey-300:#e0e0e0;--mc-grey-400:#bdbdbd;--mc-grey-500:#9e9e9e;--mc-grey-600:#757575;--mc-grey-700:#616161;--mc-grey-800:#424242;--mc-grey-900:#212121}

.pick-color.selected {
	border: 2px dashed #304ffe;
}
.pick-color {
	width: 22px;
	height: 22px;
	border-radius: 50%;
    cursor: pointer;
}

.pick-color:hover{
    animation: pulse 1s;
}

.channel-tab{
    margin-right:15px;
    cursor: pointer;
    display: flex;
}

.channel-tab  .channel-name{
    display: none;
}

.channel-tab.active  .channel-name{
    display: block;
}

.chat-tab-template{
    display: none;
}

.channel-tab.active{
	max-width: 90px;
	border-radius: 20px;
	background: #03a9f4;
}


.tabbed-bar .channel-image i {
	left: 5px;
	top: 25px;
}

.channel-tab {
	padding: 3px 5px;
}

.tabbed-bar .channel-image i {
	left: -1px;
	top: 22px;
	border: none !important;
	width: 10px;
	height: 10px;
}

.tabbed-bar .channel-unread {
	position: absolute;
	top: 3px;
	left: 20px;
}

.tabbed-bar .channel-image{
    position: relative;
}

.video-section {
    display: inline-block;
	position: relative;
	border-radius: 5px;
    transition: 0.3s;
    padding: 5px;

}

.chat-video-gallery .chat-video-block:not(:last-child) .video-section {
	padding-bottom: 0px !important;
}


.video-thumb{
    object-fit: cover;
	object-position: center;
    width: 255px;
    height: 155px;
    border-radius:5px;
}





.selected-chat-actions .call-btn {
	margin-right: 10px;
	border-right: 1px solid #858796;
	padding-right: 10px;
}


.tabbed-toggle {
	position: absolute;
	right: 20px;
	top: 10px;
	z-index: 9999;
}

.mobile:before {
	content: "\f3cd";
	color: #1cc88a;
    font-size: 10px;
}

.channel-image .mobile{
    background: #fff;
    border-radius: 3px !important;
}

.notes-search-results .load-page {
	width: 100%;
}

.nav-mod {
	background: #141b20;
	margin-top: 1px !important;
	overflow: hidden;
}

.nav-mod .nav-link.active {
	background: transparent;
	border-bottom: 2px solid #44c88a;
	border-radius: 0;
}



.message-remind {
    font-size: 10px;
    line-height: 1;
}

.message-remind .remind-meta {
    padding: 2px 5px;
    color: #c5c5c5;
    background: #464e4e;
    border-radius: 3px;
}

.message-meta {
    display: flex;
}

.replies .message-meta>span{
    margin-right: 2px;
    align-self: center;
    white-space: nowrap;
}

.replies .message-time{
    order: 1;
}

.replies .message-status{
    order: 2;
}

.replies .message-edited{
    order: 3;
}

.replies .message-star{
    order: 4;
}

.replies .message-reply-later{
    order: 5;
}

.replies .message-remind{
    order: 6;
}

.sent .message-meta>span{
    margin-left: 2px;
    align-self: center;
}

.sent .message-time{
    order: 5;
}

.sent .message-status{
    order: 6;
}

.sent .message-edited{
    order: 4;
}

.sent .message-star{
    order: 3;
}

.sent .message-reply-later{
    order: 2;
}

.sent .message-remind{
    order: 1;
}

a.dropdown-item.message-reminder-btn.remindered-btn i {
    color: #8d8df9;
}

.remind-meta i, .message-remind i {
    color: #8d8df9;
}

.noti-icon{
    position:relative;
}

.noti-badge{
    background-color: #8d8df9;
    border-radius: 50%;
    font-size: 10px;
    position: absolute;
    line-height: 1;
    top: 16px;
    right: -3px;
    padding:4px;
    color:#ffffff;
}

.noti-reminder {
    margin-left: -10px;
}

.call_msg{
    cursor: pointer;
}


.inner {
	overflow-x: hidden;
	overflow-y: visible;
}

.show-prev, .show-next {
	height: 50px;
	width: 30px;
	position: absolute;
	z-index: 999;
    border-radius: 0;
}

.show-prev {
    left: 60px;
}

.show-next {
    right: 0;
}

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

.app-btn {
    width: 100%;
    min-width: 140px;
    color: #eee;
    text-align: left;
    border-radius: 5px;
    text-decoration: none;
    font-family: "Lucida Grande", sans-serif;
    font-size: 10px;
    text-transform: uppercase;
}
.app-btn.blu {
    background-color: #141b20;
    transition: background-color 0.25s linear;
}
.app-btn.blu:hover {
    background-color: #454545;
}
.app-btn i {
    width: 20%;
    text-align: center;
    font-size: 28px;
    margin-right: 7px;
    margin-left: 7px;
}
.app-btn .big-txt {
    font-size: 17px;
    text-transform: capitalize;
}

.app-btn>span{
    margin-top: 5px;
    margin-bottom: 5px;
}

.app-btn:hover {
	color: #fff;
}

.app-btn .fa-desktop{
    font-size: 23px;
}

.nav-mod {
	background: #bbbebe;
}

.right-panel-header-actions {
	margin-left: auto;
	align-self: center;
}

.chat-sticky-message {
    border-radius: 0;
    margin-bottom: 0;
    z-index: 998;
    width: 100%;
    background: #dbdee0;
	color: #585c61;
    padding: 10px;
}

.chat-sticky-actions {
    justify-content: flex-end;
    display: flex;
    line-height: 1;
    position: absolute;
    right: -1px;
    bottom: -31px;
    background: #2e353e;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.sticky-message-content{
    cursor: pointer;
    font-size: 14px;
}

.sticky-message-remove {
	color: #c0365b;
}

.sticky-message-hidden {
    position: absolute;
    top: -63px;
}

.toast-avatar {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 10px;
    overflow: hidden;
    top: 5px;
}

.message-toast .toast-title {
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-icon {
    padding-left: 60px !important;
}

.message-toast {
    background: #607d8b;
    font-size: 12px;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    width: 250px !important;
    height: 50px;
    line-height: 1.6;
}

#toast-container>div {
	box-shadow: none;
	opacity: 1;
}

.cb-left-col {
	flex: 0 0 23%;
	max-width: 23%;
	min-width: 270px;
}

.cb-main-col{
    display: flex;
}

.tab-bubble-container{
    position: relative;
    width: 100%;
    overflow: hidden;
}



@media (max-width: 768px) {
    .cb-right-col {
        flex: none;
        max-width: min-content;
    }
    /* .tab-bubble-container{
        flex: 0 0 80%;
	    max-width: 80%;
    } */
}

@media (max-width: 576px) {
    .chat-list-col, .cb-left-col{
        max-width: 100%;
        flex: 0 0 100%;
    }
}

.filemanager-left-panel {
	width: 100%;
    display: none;
    position: relative;
}

.filemanager-flex{
	overflow-y: hidden;
    flex:1;
    overflow-x: hidden;
    padding: 0;
    display: none;
    font-size: 14px;
    height: (var(--vh, 1vh) * 100);
}

.jstree-open > .jstree-anchor > .fa-folder:before {
	margin-left: 2px;
	content: "";
}

.jstree-default .jstree-icon:empty {
	font-size: 18px;
}

.jstree-themeicon-custom {
	margin-right: 5px !important;
}

.jstree-default .jstree-anchor {
	line-height: 24px;
	height: 32px;
    max-width: 200px;
	overflow: hidden;
	white-space: nowrap;
    text-overflow: ellipsis;
}

.jstree-default .jstree-clicked {
	background: none;
	box-shadow: none;
}

.breadcrumb-item + .breadcrumb-item::before {
	content: "\f054";
	font-family: "Font Awesome 5 Pro";
}

.breadcrumb {
	padding: 0.5rem 1rem;
}

.table-filelist {
	border-radius: 5px;
	overflow: hidden;
    font-size: 13px;
}

.table-scroll{
	display: block;
}

.table-scroll thead{
    position:relative;
    display: block;
    width:100%;
    overflow-y: scroll;
}

.table-scroll tbody{
	display: block;
    position:relative;
	width:100%;
    overflow-y:scroll;
}

.table-scroll tr{
	width: 100%;
	display:flex;
}

.table-scroll td,.table-scroll th{
	flex-basis:100%;
	flex-grow:2;
	display: block;
}


.table-scroll.small-first-col td:first-child,
.table-scroll.small-first-col th:first-child{
	flex-basis:100%;
	flex-grow:1;
}


.table-filelist.table thead th {
	border: none;
}

.nav-fm-info .nav-link.active {
	background: transparent;
	border-bottom: 2px solid #44c88a;
	border-radius: 0;
}

.nav-fm-info a.nav-link {
	color: #858796 !important;
}

.fm-access-list {
	padding: 0;
	list-style: none;
}

.fm-access-list li{
	padding: auto;
    font-size: 13px;
}

.not-shared{
    border: 1px solid;
	border-radius: 50%;
	padding: 8px;
	margin-right: 5px;
}

.fm-info{
    height: calc((var(--vh, 1vh) * 100) - 260px);
    overflow: auto;
}

.table-fm-properties {
	font-size: 13px;
}

.table-fm-properties td {
	padding: 0.4rem;
}

.table-filelist tr{
    cursor: pointer;
}

.drive-title {
	background: #858796;
	border-radius: 4px;
	padding: 10px 10px;
	color: #fff;
    margin-bottom: 10px;
    font-size: 14px;
}

.drive-title:hover {
    cursor: pointer;
}

.drive-title.active {
    color: #ffc107;
}

.file-tree {
	font-size: 13px;
}

.storage-status {
	margin-bottom: 5px;
    font-size: 14px;
}

.bottom-bar {
	position: absolute;
	bottom: 0;
	width: 95%;
    padding: 10px 10px;
}

.file-tree-container {
	height: calc((var(--vh, 1vh) * 100) - 120px);
	overflow-y: scroll;
	padding: 10px;
}

.fm-file-name {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    width: 80%;
}


.fixed_header{
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody{
    display:block;
    width: 100%;
    overflow: auto;
}

.fixed_header tr {
   display: flex;
   position: relative;
}


.fixed_header th, .fixed_header td {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



.table-filelist thead th p{
	margin-bottom: 0;
}

.table-filelist thead th:not(:first-child) p{
	margin-left: -5px;
}

.table-filelist tr td:nth-child(1), .table-filelist tr th:nth-child(1){
    width: 50%;
}

.table-filelist tr td:nth-child(2), .table-filelist tr th:nth-child(2){
    width: 20%;
}

.table-filelist tr td:nth-child(3), .table-filelist tr th:nth-child(3){
    width: 18%;
}

.table-filelist tr td:nth-child(4), .table-filelist tr th:nth-child(4){
    width: 12%;
}

.upload-progress{
    display: none;
    position: absolute;
    width: 300px;
    max-height: 390px;
    bottom: 50px;
    right: 50px;
    color: #000;
    overflow-y: auto;
    overflow-x: hidden;
    background: #3d4c5c !important;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border: 3px solid #282d36 !important;
	border-bottom: 0 !important;
    z-index: 999;
}



.upload-progress .list-group-item{
    background: transparent;
	border-left: 0;
	border-right: 0;
    font-size: 14px;

}

.upload-progress .progress {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 20px;
	overflow: hidden;
	font-size: .75rem;
	background-color: #e9ecef;
	border-radius: 0;
}

.btn-xxs {
	line-height: 1;
	border-radius: 0.1rem;
	font-size: 12px;
	padding: 0.15rem 0.4rem;
}

.fm-file-text {
	max-width: 150px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fm-upload-action {
    font-size: 16px;
}

.fm-upload-action i{
    cursor: pointer;
}

.fm-upload-action i:hover{
    opacity: 0.5;
}

.fm-file-upload .uppy-FileInput-container{
    margin-bottom: 0;
}

.fm-file-upload .uppy-FileInput-btn {
	color: #fff !important;
	background-color: #1cc88a !important;
	border-color: #1cc88a !important;
	display: inline-block;
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding: 0.5rem 0.75rem;
	line-height: 1.2;
	border-radius: 4px;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.fm-file-upload .uppy-FileInput-btn:hover {
	background-color: #17a673 !important;;
	border-color: #169b6b !important;;
}

.fm-file-name-col .fiv-hct, .fm-file-name-col .fiv-ext {
    height: 20px;
    width: 20px;
}

.upload-status-row{
    display: none;
}

.jstree-node[aria-selected="true"]>a {
    color: #ffc107;
}

.fm-breadcrumb .breadcrumb-item{
    cursor: pointer;
}

.large-icon{
    font-size: 60px;
}

.fm-file-name-col .fiv-ext, .fm-file-name-col .fiv-hct{
    vertical-align: bottom;
    margin-right: 8px;
}

.fm-breadcrumb .breadcrumb-item + .breadcrumb-item {
	padding-left: 0.5rem;
	max-width: 300px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fm-file-name-col{
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}


.uppy-DragDrop-container {
	background-color: #141b20;
}

.fm-prog-actions span{
    cursor: pointer;
}

.fm-prog-close{
    display: none;
}


.fm-preview-window{
    background: #0e0e0ef2;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9999;
    color: #ffffff;
}

.btn-ghost-secondary {
    color: #ffffff;
    background-color: transparent;
    background-image: none;
    border-color: transparent
}

.btn-ghost-secondary:hover {
    color: #4f5d73;
    background-color: #ced2d8;
    border-color: #ced2d8
}

.btn-ghost-secondary:focus, .btn-ghost-secondary.focus {
    box-shadow: 0 0 0 .2rem rgba(206, 210, 216, .5)
}

.fm-prev-filename{
    font-size: 14px;
    font-weight: 900;
}

.fiv-2x {
	font-size: 18px;
	line-height: 1;
}

.fm-prev-container {
	align-items: center;
	display: flex;
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc((var(--vh, 1vh) * 100) - 50px);
}

.fm-previiew-title {
	background: linear-gradient(to bottom,rgb(0 0 0 / 65%) 0%,transparent 100%);
	height: 56px;
	width: auto;
}

.fm-prev-image img {
	max-width: 90vw;
    max-height: calc((var(--vh, 1vh) * 100) - 100px);
}

.fm-prev-container {
    display: flex;
	justify-content: center;
	align-items: center;
	margin-top: -32px;
}

.fiv-80x {
	font-size: 80px;
	line-height: 1;
}

.fm-dl-icon {
	justify-content: center;
	display: flex;
}

.row.fm-dl-row {
	background: #3e3e3e;
	padding: 10px;
	border-radius: 5px;
	max-width: 320px;
	overflow: hidden;
}

.fm-file-tags-area .select2-container {
	width: auto !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	border: 1px solid #673ab7;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	border-right: 1px solid #673ab7;
}

.fm-note-item {
	background: #607d8b;
	padding: 5px;
	border-radius: 4px;
	margin-bottom: 10px;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
}

.fm-note-item:hover {
	background: rgb(39, 51, 56);
}

.fm-preview-window{
    display: none;
}

.fm-prev-area {
    display: none;
}

.fm-note-del {
    position: absolute;
    width: 15px;
    height: 15px;
    display: block;
    right: 0;
    top: 0;
    background: #e74a3a;
    border-radius: 4px;
    line-height: 1;
    text-align: center;
    font-size: 13px;
    opacity: 0;
    transition: 0.3s;
}

.fm-note-del:after{
    content: "x";
}

.fm-note-item:hover .fm-note-del{
    opacity: 1;
}


.fm-prev-none-name{
    white-space: nowrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    max-width: 205px;
}

.undo-link{
    color: #bd3d02 !important;
}

.fm-toast{
    background: #607d8b;
    font-size: 14px;
}

.fm-preview-thumb {
	width: 100%;
	padding: 0px 15px;
	max-height: 500px;
	object-fit: cover;
}

.fm-prev-pdf iframe, .fm-prev-spreadsheet iframe, .fm-prev-video iframe, .fm-prev-code iframe, .fm-prev-audio iframe {
    width: 100vw;
	height: calc((var(--vh, 1vh) * 100) - 46px);
	position: absolute;
	bottom: 0;
	left: 0;
	border: 0;
}

.download-btn {
	cursor: pointer;
}
.fm-search-title{
    max-width: 100% !important;
}

.search-ext-list {
    height: 150px;
    overflow-y: scroll;
    width: 251px;
    overflow-x: hidden;
}

.search-tag-list {
    height: 150px;
    overflow-y: scroll;
    width: 251px;
    overflow-x: hidden;
}

.fm-share-user-search {
	background: #eee !important;
    font-size: 13px;
    padding: 18px 15px;
    line-height: 1;
}

.fm-btn-share-user-search {
	background: #eee;
	height: 36px;
	line-height: 1;
}

.fm-shared-list {
	height: 250px;
	overflow: auto;
}

.fm-share-search-col {
    position: relative;
}

.fm-share-search-results {
	position: absolute;
	background: #eee;
	z-index: 9999;
	width: 100%;
	height: 180px;
	overflow: auto;
	border-top: 2px solid #4e73df;
	border-radius: 5px;
    top: 38px;
    padding: 5px;
    display: none;
}

@media (max-width: 768px) {

    .note-menu-list {
        height: calc(((var(--vh, 1vh) * 100) - 90px) / 2);
    }

    
    .uppy-stories {
        position: fixed;
        left: 0;
        width: 100%;
    }

    #right-navbar-toggle {
        background: #2ba0af;
        border-radius: 15px;
        position: absolute;
        top: -83px;
        width: 50px;
        right: 140px;
        width: inherit;
        text-align: center;
        transform: rotate(-90deg);
    }

    #right-navbar-toggle button {
        color: #fff;
        transform: rotate(90deg);
    }

}

.stories-details {
	height: calc((var(--vh, 1vh) * 100) - 50px);
}

.stories-flex .pswp__top-bar {
	background: transparent;
}

#logoutModal{
    z-index: 99999;
}

#right-navbar-toggle {
	justify-content: right;
}

.context-menu[data-permission="1"] ul li a#fm-ctx-rename-item, .context-menu[data-permission="1"] ul li.fm-ctx-delete-item a {
    color: #8d8d8d;
    cursor: not-allowed;
    pointer-events: none;
}

.context-menu[data-permission="1"] ul li.fm-ctx-rename-item, .context-menu[data-permission="1"] ul li.fm-ctx-delete-item {
    pointer-events: none;
}

.shared .fiv-ext:after {
    content: "\f007";
    font-family: 'FONT AWESOME 5 PRO';
    font-weight: 900;
    font-size: 10px;
    position: absolute;
    right: 3px;
    bottom: 2px;
    color: #2e2e2e;
}

tr[data-type="file"].shared .fm-name-txt:after {
    content: "\f500";
    font-family: 'FONT AWESOME 5 PRO';
    font-weight: 900;
    font-size: 10px;
    position: absolute;
    right: -20px;
    bottom: 0px;
    color: #ffffff;
}

.fm-name-txt {
    position: relative;
}


.chat-img-sgl img {
	max-height: 388px;
	object-fit: cover;
	object-position: top;
    width: auto;
	max-width: 240px;
}

.uppy-Dashboard-Item-preview img.uppy-Dashboard-Item-previewImg {
	border-radius: 0;
	object-fit: contain;
}

.recent-img img {
	height: 106px;
	object-fit: cover;
}

.launch-pixie {
	color: #ff9800;
	font-size: 12px;
	margin-left: 5px;
	cursor: pointer;
    transition: 0.3s;
}

.launch-pixie:hover {
	color: #ff5722;
}

.pixie-container {
	display: none;
	position: absolute;
	background: #141b20;
	width: 100%;
	bottom: 0;
	height: calc((var(--vh, 1vh) * 100) - 50px);
    z-index: 999;
}


.uppy-is-drag-over:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border: 3px dashed #2275d7;
    z-index: 10000;
    background-color: transparent;
}

.table-filelist.uppy-is-drag-over:after{
    z-index: -1;
}

#pixie-editor-container {
	height: 100%;
	width: 100%;
    position: relative;
}

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

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

.show-next, .show-prev {
	display: none;
}

.inner-full{
    margin-left: 30px;
	margin-right: 30px;
}

.cb-main-col.chat-flex {
    position: relative;
}

.srp-placeholder {
	height: calc((var(--vh, 1vh) * 100) - 50px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.launch-audio-call-btn {
	background: #8bc34a;
	padding: 6px;
	border-radius: 50%;
	color: #fff;
    cursor: pointer;
    transition: 0.3s;
    margin-left: auto;
}

.launch-audio-call-btn:hover {
    background: #4caf50;
}

.launch-video-call-btn {
    background: #4a96c3;
    padding: 6px;
    margin-right: 5px;
	border-radius: 50%;
	color: #fff;
    cursor: pointer;
    transition: 0.3s;
}

.launch-video-call-btn:hover {
    background: #0660e6;
}

.call-btn.disable{
    pointer-events: none;
    opacity: .25;
}

.cc-local-stream {
	width: 100%;
    border-radius: 5px;
    background: black;
}

.cc-remote-stream{
    width: 100%;
    border-radius: 5px;
    background: black;
}


.livekit-controlls {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	background: #141b20;
	left: 0;
    padding: 6px;
    height: 54px;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.livekit-controll {
    padding: 10px;
	border-radius: 3px;
	width: 43px;
    height: 43px;
	font-size: 15px;
	text-align: center;
	margin-left: 2px;
	margin-right: 2px;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	background: #202932;
    line-height: 1.5;
}

.livekit-controll.livekit-answer{
	color: #4caf50;
}
.livekit-controll.livekit-answer:hover{
	color: #fff;
    background: #4caf50;
}

.livekit-controll.livekit-hangup, .livekit-controll.livekit-leave{
	color: #f44336;
}

.livekit-controll.livekit-hangup:hover, .livekit-controll.livekit-leave:hover{
    color: #fff;
	background: #f44336;
}

.livekit-controll.livekit-mute{
	color: #4caf50;
}
.livekit-controll.livekit-mute:hover{
    color: #fff;
	background: #4caf50;
}

.livekit-controll.livekit-unmute{
	color: #f24336;
}
.livekit-controll.livekit-unmute:hover{
    color: #fff;
	background: #f24336;
}

.livekit-controll.livekit-video-mute{
	color: #00bcd4;
}
.livekit-controll.livekit-video-mute:hover{
    color: #fff;
	background: #00bcd4;
}

.livekit-controll.livekit-video-unmute{
	color: #f24336;
}
.livekit-controll.livekit-video-unmute:hover{
    color: #fff;
	background: #f24336;
}

.livekit-controll:hover{
	background: #2a2c2f;
}

.livekit-controll{
    transition: 0.3s;
}

.livekit-controlls:hover{
	opacity: 1;
}

.call-fullscreen {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	width: 100vw;
	height: calc(var(--vh, 1vh) * 100);
	background: #141b20;
}


#videochat-streams {
	position: relative;
	align-items: center;
    justify-content: center;
}

.call-fullscreen .cc-local-stream {
	width: 100%;
	position: absolute;
	width: 10%;
	right: 0;
	bottom: 0;
}

.call-fullscreen .cc-remote-stream {
	height: calc((var(--vh, 1vh) * 100) - 64px);
}

.videochat-stream-loader {
	position: absolute;
    z-index: 999;
}

.videochat-stream-container {
	display: flex;
	justify-content: center;
    align-items: center;
    background: black;
    border-radius: 5px;
    margin-bottom: 5px;
}

.call-fullscreen #videochat-streams{
    display: flex;
}

.livekit-controll.timer {
	width: 60px;
    white-space: nowrap;
}

.livekit-controll.timer label {
	line-height: 1;
    margin: 0;
}

.chat-reactions {
	line-height: 1;
}

.chat-reactions i:hover {
	opacity: 1 !important;
	color: #fff;
}

.reactions {
    position: relative;
}

.reactions .reaction-btn {
    /* position: absolute;
    bottom: 13px;
    left: 13px; */
    cursor: pointer;
}

.reactions .reaction-btn::before {
    content: ".";
    opacity: 0;
    display: block;
    width: fit-content;
    height: 10px;
    position: absolute;
    top: -10px;
    left: 0;
}


.reaction-box .reaction-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translate(0, 100px) scale(0);
    cursor: pointer;
    background-repeat: no-repeat;
    padding: 9px;
    width: 48px;
    height: 48px;
    /* opacity: 1;
    transform: translate(0, 0) scale(1); */
}

.reaction-box .reaction-icon label {
    padding: 3px 5px 3px 5px;
    position: relative;
    top: -24px;
    border-radius: 10px;
    font-size: 9px;
    color: #FFF;
    background: #333;
    visibility: hidden;
    width: max-content;
}

.reaction-box .reaction-icon.show {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

.reaction-box .reaction-icon:hover {
    transform: scale(1.4);
    transform-origin: bottom;
}

.reaction-icon:hover label {
    visibility: visible;
}

.reaction-icon img{
    width: 30px;
    height: 30px;
}

.current-reacts {
    display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	padding: 3px 3px;
	border-radius: 6px;
    bottom: -20px;
    position: absolute;
    width: max-content;
	margin: auto 3px;
    background: #607d8b;
}

.current-reacts-count {
	font-size: 11px;
	margin-left: 5px;
    margin-right: 5px;
}

.sent .current-reacts{
    float: right;
    right: 0;
}

.replies .current-reacts{
    left: 0;
    border-top-right-radius: 6px !important;
	border-top-left-radius: 6px !important;
	padding-top: 5px !important;
}

.current-reacts img {
    margin-right: 2px;
    margin-left: 2px;
}

.current-react {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    width: 22px;
	height: 22px;
    background-image: url('../img/reactions/srp_7reactions.png');
    background-size: 154px;
    background-repeat: no-repeat;
    cursor: pointer;
}
/* 
.current-react:not(:last-child) {
    margin-left: -6px;
} */

.current-like {
    background-position: 0px 0px;
}

.current-love {
    background-position: -22px 0px;
}

.current-unlike {
    background-position: -44px 0px;
}

.current-cheer {
    background-position: -66px 0px;
}

.current-hot {
    background-position: -88px 0px;
}

.current-sad {
    background-position: -110px 0px;
}

.current-angry {
    background-position: -132px 0px;
}

.reaction-box {
    display: flex !important;
}



.message-data.has-reactions{
    margin-bottom: 20px !important;
    padding-bottom: 10px;
}

.filter-reaction-list {
    display: flex;
}

.list-reacts {
    display: inline-flex;
    margin-left: auto;
}

.list-react {
    position: relative;
    overflow: hidden;
    width: 22px;
    height: 22px;
    background-image: url(../img/reactions/srp_7reactions.png);
    background-size: 154px;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-right: 3px;
    display: flex;
    align-items: center;
}

.list-like {
    background-position: 0px 0px;
}

.list-love {
    background-position: -22px 0px;
}

.list-unlike {
    background-position: -44px 0px;
}

.list-cheer {
    background-position: -66px 0px;
}

.list-hot {
    background-position: -88px 0px;
}

.list-sad {
    background-position: -110px 0px;
}

.list-angry {
    background-position: -132px 0px;
}

.filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 25px;
    margin-right: 5px;
    padding: 0px 6px;
    white-space: nowrap;
}

.filter-reaction {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.react-avatar {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    overflow: hidden;
    margin-right: 10px;
}

.filter-reaction .list-react {
    margin-left: 10px;
    border-radius: 5px;
}

.reaction-list-offcanvas,
.message-status-offcanvas {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.3s;
}

.reaction-list-offcanvas.open,
.message-status-offcanvas.open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
}

.reaction-list-offcanvas .offcanvas-backdrop,
.message-status-offcanvas .offcanvas-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.reaction-list-offcanvas.open .offcanvas-backdrop,
.message-status-offcanvas.open .offcanvas-backdrop {
    opacity: 1;
}

.reaction-list-offcanvas .offcanvas-panel,
.message-status-offcanvas .offcanvas-panel {
    position: relative;
    width: 360px;
    max-width: 100%;
    height: 100%;
    background: #ffffff;
    box-shadow: -6px 0 25px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.reaction-list-offcanvas.open .offcanvas-panel,
.message-status-offcanvas.open .offcanvas-panel {
    transform: translateX(0);
}

.reaction-list-offcanvas .offcanvas-header,
.message-status-offcanvas .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.reaction-list-offcanvas .offcanvas-title,
.message-status-offcanvas .offcanvas-title {
    font-size: 1.05rem;
    margin-bottom: 0;
}

.reaction-list-offcanvas .offcanvas-close,
.message-status-offcanvas .offcanvas-close {
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.reaction-list-offcanvas .offcanvas-close:hover,
.message-status-offcanvas .offcanvas-close:hover {
    opacity: 1;
}

.reaction-list-offcanvas .offcanvas-body,
.message-status-offcanvas .offcanvas-body {
    padding: 1rem 1.5rem 1.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

body.offcanvas-open {
    overflow: hidden;
}

.message-status-preview {
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .reaction-list-offcanvas .offcanvas-panel,
    .message-status-offcanvas .offcanvas-panel {
        width: 100%;
    }
}

.message-status-offcanvas .message-status-overview {
    margin-bottom: 1.5rem;
}

.message-status-offcanvas .message-status-bubble {
    display: inline-block;
    max-width: 100%;
}

.message-status-offcanvas .message-preview-content {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.message-status-offcanvas .message-status-bubble.sent .message-preview-content {
    background: rgba(84, 127, 255, 0.12);
}

.message-status-offcanvas .message-status-bubble.replies .message-preview-content {
    background: rgba(0, 0, 0, 0.04);
}

.message-status-offcanvas .message-preview-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.75;
}

.message-status-offcanvas .preview-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.message-status-offcanvas .message-status-section {
    margin-bottom: 1.5rem;
}

.message-status-offcanvas .message-status-section:last-child {
    margin-bottom: 0;
}

.message-status-offcanvas.is-private .message-status-section {
    margin-bottom: 1rem;
}

.message-status-offcanvas .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.message-status-offcanvas.is-private .section-header {
    display: none;
}

.message-status-offcanvas .section-count {
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.6);
}

.message-status-offcanvas .message-status-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.message-status-offcanvas.is-private .message-status-list {
    gap: 0.5rem;
}

.message-status-offcanvas .message-status-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.message-status-offcanvas .status-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.message-status-offcanvas.is-private .message-status-item {
    display: none;
}

.message-status-offcanvas .status-details {
    flex: 1 1 auto;
}

.message-status-offcanvas .status-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.message-status-offcanvas .status-time {
    font-size: 0.82rem;
    color: rgba(0, 0, 0, 0.6);
}

.message-status-offcanvas .message-status-empty {
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.55);
}

.message-status-offcanvas.is-private .message-status-empty {
    padding-left: 2.25rem;
}

.message-status-offcanvas .message-status-remaining {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.6);
}

.message-status-offcanvas.is-private .message-status-remaining {
    display: none;
}

.message-status-offcanvas .message-status-line {
    display: none;
}

.message-status-offcanvas.is-private .message-status-line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}

.message-status-offcanvas.is-private .status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: #128c7e;
    font-size: 0.9rem;
}

.message-status-offcanvas.is-private .status-line-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.message-status-offcanvas.is-private .status-line-label {
    font-weight: 600;
    font-size: 0.95rem;
}

.message-status-offcanvas.is-private .status-line-time {
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.65);
}

.message-status-offcanvas.is-private .status-line-empty {
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.55);
}

.filter-btn.active {
    box-shadow: 0px 0px 6px 2px #36b9cc;
}

.remove-react {
    margin-left: 10px;
    transition: 0.3s;
    cursor: pointer;
}

.remove-react:hover {
    color:red;
}

.masonry-item {
    margin: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    margin-top: 1px;
    break-inside: avoid;
}

.masonry-item > img {
    grid-row: 1 / -1;
    grid-column: 1;
}

.masonry-item {
    grid-row: 2;
    grid-column: 1;
    justify-self: start;
}

.masonry-container {
    column-count: 6;
    column-gap: 1px;
}

 .call-avatar{
    position: absolute;
    border-radius: 50%;
 }

 .call-avatar-opo {
	border-radius: 50%;
    position: absolute;
}

.active-user-job-position {
    color: #37474F;
	font-size: 12px;
	margin-bottom: 5px;
}

.customer-support-left-panel {
    display: none;
	flex-direction: column;
	flex-shrink: 0;
	flex-grow: 1;
    width: calc(100% - 36px);
}

.customer-support-flex{
	overflow-y: hidden;
    flex:1;
    overflow-x: hidden;
    padding: 0;
    display: none;
}

.visitor-channel-item {
    margin-bottom: 5px;
    display: flex;
    padding: 3px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: .3s;
    position: relative;
}

.visitor-channel-item:hover {
    background-color: #4a4b4f;
}

.visitor-channel-item .channel-name{
    width: 160px;
}

.visitor-channel-item .meta-time{
    width: 165px;
}

.visitor-channel-item .channel-meta i {
	font-size: 12px;
}

.visitor-channel-item .meta-time {
	display: flex;
	align-items: center;
}

.visitor-channel-item .meta-time span, .visitor-channel-item .meta-time i{
	margin-right: 5px;;
}

.active-visitors-list, .live-visitors-list, .recent-visitors-list {
	padding: 10px;
}

.cs-messages .act-more {
	display: none;
}

.start-thread, .join-thread, .transfer-whatsapp-thread {
	width: max-content;
	margin-left: auto;
	margin-right: auto;
	margin-top: 47vh;
}

.channel-image .flag-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

.channel-image .flag-icon-:before {
    content: "";
    width: 32px;
    height: 32px;
    position: absolute;
    border-radius: 50%;
    background-image: url(/static/img/w.png);
    background-position: center;
    background-size: cover;
}

.visitor-channel-item .channel-meta {
	margin-left: 7px;
}

.visitor-channel-item .channel-image {
	display: flex;
	align-self: center;
}

.visitor-active-page {
	color: #00ffa3;
}


.visitor-data-row {
	margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #455964;
}

.visitor-data-row label {
	margin-bottom: 0 !important;
}

.thread-alert, .wa-thread-alert {
    text-align: center;
    padding: 10px 0px;
    background: #dbdee0;
	position: absolute;
	width: 100%;
	bottom: 0;
}

.flag-icon- {
	background: transparent;
}
.live-visitor-count{
    position: absolute;
    font-size: 10px;
}

.animate__animated.animate__slower15 {
	-webkit-animation-duration: 15s;
	animation-duration: 15s;
	-webkit-animation-duration: calc(var(--animate-duration)*15);
	animation-duration: calc(var(--animate-duration)*15);
}

.support-toast {
    background: #3047EC;
	padding: 10px !important;
    width: 370px !important;
}

.visitor-chat-start-info {
	margin-bottom: 2px;
	border-radius: 5px;
	cursor: pointer;
	transition: .3s;
	position: relative;
}

.visitor-info, .whatsapp-customer-info {
	font-size: 14px;
}

.search-visitor-info {
    padding: 5px;
    background: #47b9cc;
    color: #fff;
    font-size: 12px;
    display: none;
}

.visitor-search {
    background: #141b20;
    height: 40px;
    font-size: 13px;
    padding: 18px 15px;
    line-height: 1;
    border-radius: 0;
}

.visitor-channel-unread {
    align-self: center;
    margin-left: auto;
    margin-right: 10px;
    position: absolute;
    right: 0;
}

.system .chat-txt {
	text-align: center;
	font-size: 12px !important;
	color: #6c757d;
	padding: 8px 16px 2px;
}

.system .avatar {
	display: none;
}

.system .message-meta {
	justify-content: center;
}

.system .message-data {
    margin-left: auto;
    margin-right: auto;
}

.cht.system {
	clear: both;
}

.story-creator-card {
	width: 220px;
	height: 330px;
	border-radius: 10px;
    position: relative;
    cursor: pointer;
}

.story-creator-text{
    background-image: url(https://static.xx.fbcdn.net/rsrc.php/v3/yr/r/OKGvh9pqBPm.png);
	background-position: 0px 0px;
	background-size: auto;
	width: 220px;
	height: 330px;
	background-repeat: no-repeat;
	display: inline-block;
	transition: 0.3s;
} 

.story-creator-uppy{
    background-image: url(https://static.xx.fbcdn.net/rsrc.php/v3/yr/r/OKGvh9pqBPm.png);
    background-position: 0px -331px;
	background-size: auto;
	width: 220px;
	height: 330px;
	background-repeat: no-repeat;
	display: inline-block;
} 

.story-creator-text:hover, .story-creator-uppy:hover {
    filter: saturate(0.5);
}

.story-cretor-content {
	position: absolute;
	text-align: center;
	width: 100%;
	top: 40%;
}

.story-creator-icon i {
	background: #fff;
	padding: 11px 5px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	position: relative;
	color: #141b20;
}

.story-creator-label {
	margin-top: 10px;
	color: #fff;
}

.text-story-creator-controls {
	background: #2e353e;
	padding: 15px 15px;
	border-radius: 5px;
    height: calc((var(--vh, 1vh) * 100) - 158px);
    overflow-y: auto;
	overflow-x: hidden;
}

.text-sroty-preview{
    background: var(--mc-indigo-500);
    height: calc((var(--vh, 1vh) * 100) - 95px);
    padding:20px 0;
    box-sizing: border-box;
    color: var( --mc-yellow-500);
    text-align:center;
    aspect-ratio: 9 / 16;
    position: relative;
    border-radius: 10px;
    display: flex;
	align-items: center;
	justify-content: center;
    background-size: cover;
}

.text-sroty-preview-content {
	font-size: 24px;
	font-weight: 500;
    padding: 28px;
    word-wrap: break-word;
	max-width: 320px;
    white-space: pre-line;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
    display: flex;
    align-items: center;
}

.story-text-content{
	color: var(--mc-yellow-300);
    background-size: cover;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 22px;
    padding: 28px;
	text-align: center;
    font-weight: 500;
}

.story-bg-list {
	display: flex;
	flex-wrap: wrap;
}

.pick-bg {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-size: contain;
    cursor: pointer;
    margin-left:5px;
    margin-bottom: 5px;
}

.pick-bg:hover {
	animation: pulse 1s;
}

.pick-bg.selected {
	border: 2px dashed #304ffe;
}

.text-sroty-preview-content .chat-link {
	width: 100%;
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
	white-space: normal;
}

.chat-messages-col:after {
	content: "";
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	opacity: 0.5;
	z-index: 0;
}

.messages{
    z-index: 1;
    position: relative;
}


.tfa-secret-txt {
    font-size: 12px;
    line-height: 0.5;
    margin-top: 15px;
    margin-bottom: 0;
}

.read-circle{
    stroke: gray !important;
}

.swal2-container{
    z-index: 1999 !important;
}

#search-users .channel-item{
    padding-left: 15px;
}

.list-group-item{
    background-color: transparent;
}

.font-13 {
    font-size: 13px;
}

.palette-color-picker-bubble .swatch {
    width: 20px;
    height: 20px;
    margin: 2px;
    border: none;
    padding: 0;
}

.palette-color-picker-bubble {
    width: 260px;
}

.bday-cake{
    width: 18px;
    height: 18px;
    margin-left: 5px;
}

.department-popover {
    cursor: pointer;
}

.department-popover:hover {
    font-weight: 900;
}

.channel-tab-close {
    position: absolute;
    background: red;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #fff;
    display: none;
}

.channel-tab.active:hover .channel-tab-close, 
.channel-tab.active:focus .channel-tab-close, 
.channel-tab.active:active .channel-tab-close{
    display: flex;
}

.chat-sticker img {
    object-fit: cover;
    object-position: center;
}


@media screen and (max-width: 768px) {
    .inner {
        overflow-x: scroll;
    }
    .show-prev, .show-next{
        display: none !important;
    }
    .inner-full {
        margin-left: 0;
        margin-right: 0;
    }

    .story {
        height: calc((var(--vh, 1vh) * 100) - 50px);
        max-width: 100vw;
    }
    .progress-container{
        top: 0;
    }
}

.uppy-Dashboard--singleFile.uppy-size--md .uppy-Dashboard-Item-preview {
    max-height: 75%;
}

.uppy-stories .uppy-Dashboard--singleFile.uppy-size--md .uppy-Dashboard-Item-preview {
    max-height: 100%;
}

#chats .status-cls {
    display: none;
}

.cfgo-icon::before{
    content: "";
    width: 40px;
    height: 40px;
    background-image: url('../img/srpcfgo.svg');
    background-size: cover;
    position: absolute;
    left: 5px;
    top: 6px;
}

.toast.cfgo-icon {
    background: #1cc88a;
}

.cht{
    scroll-margin: 25px;
}

.noti-reminder div {
    pointer-events: none;
}

.close-pixie {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    background: red !important;
    border-radius: 5px;
    order: 3;
    position: absolute;
    right: 6px;
    top: 11px;
}

.flex.flex-shrink-0.items-center.justify-between.px-12.py-\[9px\].w-full.h-\[54px\] {
    width: calc(100% - 34px);
}

.active-user-known-languages {
    text-transform: uppercase;
}

pwa-update {
    display: none;
}

.mute-channel{
    font-size: 10px;
}

.whatsapp-support-left-panel {
    display: none;
	flex-direction: column;
	flex-shrink: 0;
	flex-grow: 1;
}

.whatsapp-support-flex{
	overflow-y: hidden;
    flex:1;
    overflow-x: hidden;
    padding: 0;
    display: none;
}

.whatsapp-customer-search {
    background: #141b20;
    height: 40px;
    font-size: 13px;
    padding: 18px 15px;
    line-height: 1;
}

.search-whatsapp-customer-info {
    padding: 5px;
    background: #47b9cc;
    color: #fff;
    font-size: 12px;
    display: none;
    width: min-content;
    min-width: 100%;
}

.whatsapp-customer-channel-item {
    margin-bottom: 5px;
    display: flex;
    padding: 3px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: .3s;
    position: relative;
}

.whatsapp-customer-channel-item:hover {
    background-color: #4a4b4f;
}

.whatsapp-customer-channel-item .channel-name{
    width: 160px;
}

.whatsapp-customer-channel-item .meta-time{
    width: 160px;
}

.whatsapp-customer-channel-item .channel-meta i {
	font-size: 12px;
}

.whatsapp-customer-channel-item .meta-time {
	display: flex;
	align-items: center;
}

.whatsapp-customer-channel-item .meta-time span, .whatsapp-customer-channel-item .meta-time i{
	margin-right: 5px;;
}

.active-whatsapp-customer-list, .live-whatsapp-customer-list, .recent-whatsapp-customer-list {
	padding: 10px;
}

.whatsapp-customer-channel-item .channel-meta {
	margin-left: 7px;
}

.whatsapp-customer-channel-item .channel-image {
	display: flex;
	align-self: center;
}

.whatsapp-customer-active-page {
	color: #03a9f4;
}


.whatsapp-customer-data-row {
	margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #455964;
}

.whatsapp-customer-data-row label {
	margin-bottom: 0 !important;
}

.wa-agent-dropdown{
    z-index: 9999;
}

.channel-image .wa-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #41cf4c;
    position: relative;
    display: block;
}

.wa-icon i{
    position: absolute;
    top: 5px;
    font-size: 20px;
    color: #fff;
    left: 7px;
}

.tabbed-bar .channel-image .wa-icon i {
    left: 8px;
    top: 5px;
}

.recent-list {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
}

.note-search {
    height: 40px;
    border-radius: 0;
}

.filemanager-flex {
    border-top: 1px solid #d8dbdd;
}

.fm-top-input-group{
    background: #858796;
    border-radius: 4px;
}


.filemanager-list-body {
	height: calc(100vh - 260px);
}

.logo img {
    filter: invert(1);
}

.cursor-pointer {
    cursor: pointer;
}

.recent-video-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.video-msg-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.recent-vid-dur {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: #4a4a4a;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    padding: 1px 4px;
    opacity: 0.9;
}

.vid-dur {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: #4a4a4a;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    padding: 1px 4px;
    opacity: 0.9;
}

.select2-container .select2-selection--single {
    height: 36px;
}

.chat-fwd .video-section {
    padding: 5px 0px !important;
}

.text-align-left{
    text-align: left;
}

.wa-messages .single-file-reply, .wa-messages .single-file-forward {
    display: none;
}

.ack-req-time {
    display: flex;
    font-size: 70%;
    padding: 0px 2px 2px 4px;
    color: #1cc88a;
}

.starred-on {
    display: flex;
    font-size: 70%;
    padding: 0px 2px 2px 4px;
    color: #ffd700;
}

.reply-later-on {
    display: flex;
    font-size: 70%;
    padding: 0px 2px 2px 4px;
    color: #e90405;
}

.cn-player {
    width: 100%;
    margin-right: 5px;
    height: 68px;
    padding: 9px 0px;
}

.audio-duration {
    font-size: 11px;
    white-space: nowrap;
}

[dir="rtl"] {
    font-family: IRANSans !important;
}

.audio-recording-row {
    position: absolute;
    background: #dbdee0;
    z-index: 999;
    bottom: 0;
    width: 100%;
    height: 54px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    display: none;
}

#msg-audio-mic {
    width: 100%;
    height: 50px;
    margin-left: 5px;
}

#msg-audio-recordings {
    position: absolute;
    width: 100%;
    z-index: 9999;
    background: #dbdee0;
    height: 54px;
    display: none;
    align-items: center;
}

#msg-audio-recordings>span{
    width: 100%;
    margin-left: 5px;
    margin-right: 5px;
}

.msg-audio-act-btn {
    margin: 0;
    cursor: pointer;
    color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 16px 0 rgb(0 0 0 / 7%);
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-right: 5px;
    flex-shrink: 0;
    transition: 0.3s;
}

#msg-audio-record {
    background: #e74a3b;
}

#msg-audio-record:hover {
    color: #e74a3b;
    background: #fff;
}

#msg-audio-send {
    background: transparent;
    border: none;
    color: #407efb;
    padding: 0px;
    font-size: 20px;
}

#msg-audio-send:hover {
    color: #00BCD4;
}

.msg-audio-act-btn:hover {
    color: #fff;
    background-color: #FF9800;
}

#msg-audio-progress {
    font-size: 14px;
    margin-right: 5px;
    margin-left: 5px;
}

.chat-poll {
    width: 300px;
    padding: 10px;
}

.chat-poll-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
    line-height: 1.2;
}

.chat-poll-subtitle {
    font-size: 11px;
    margin-bottom: 15px;
}

.chat-poll .progress {
    font-size: 10px;
    height: 8px;
    z-index: 1;
}

.chat-poll-option-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.chat-poll-option-label input{
    margin-right: 5px;
    cursor: pointer;
}

.chat-poll-option {
    margin-bottom: 15px;
}

.chat-poll .progress-bar {
    background-color: #4caf50;
}

.progress-holder {
    display: flex;
    align-items: center;
}

.progress-percentage {
    margin-right: 5px;
    font-size: 12px;
    width: 34px;
}

.chat-poll-voters {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    padding: 5px 4px 4px !important;
    background: #4caf50;
    border-radius: 4px !important;
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
}

.chat-poll-voters:empty {
    display: none;
}

.chat-poll-option-text {
    margin: auto 5px;
}

.mulsub{
    margin-left: -2px;
}

.chat-poll-view {
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255, 0.2);
    padding-top: 8px !important;
    cursor: pointer;
    color: rgb(3 169 244);
}

.voter-container {
    display: flex;
    font-size: 14px;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 5px;
}

.voter-time {
    font-size: 10px;
}

.voter-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right:5px;
    overflow: hidden;
}

.voter-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.poll-option {
    display: flex;
}


.poll-option-container {
    margin-bottom: 5px;
    background: #404b5a;
    border-radius: 5px;
    padding: 7px;
}

.poll-option-pecentage {
    margin-left: auto;
    background: #2275d7;
    border-radius: 4px;
    padding: 3px 5px;
    font-size: 12px;
    height: fit-content;
}

.channel-info {
    overflow: hidden;
    margin-right: 5px;
}

.thread-unread-container {
    clear: both;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.thread-unread-container>div {
    background: #607d8b;
    padding: 5px 10px;
    color: #fff;
    font-size: 12px;
    border-radius: 5px;
}

.scroll-down-to-see {
    position: absolute;
    z-index: 999;
    bottom: 54px;
    left: auto;
    right: auto;
    width: 100%;
    text-align: center;
    font-size: 13px;
    padding: 5px;
    display: none;
}

.goto-latest {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 17px;
    margin-left: auto;
    margin-right: 20px;
    position: absolute;
    right: 0;
    bottom: 0px;
    padding-top: 5px;
    display: none;
}

.latest-remaining {
    position: absolute !important;
    top: -9px !important;
    left: 4px;
    min-width: 32px;
    height: 18px;
    font-size: 12px;
    background: #e74a3b;
}

.filePreviewFS {
    width: 24px;
    height: 24px;
    font-size: 12px;
    padding: 0;
    border: none;
}

.cht[data-reacted-perm="false"] .chat-poll-view {
    display: none;
}

#prizmViewerContainer{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.checked-btn i, .checked-btn i:hover {
    color: #2196f3;
}


.replies .message-checked {
    order: 2;
}

.message-checked {
    font-size: 10px;
    color: #2196f3;
}

.sent .message-check-btn {
    display: none;
}

.badge-visitor {
    height: 15px;
    display: flex;
    align-self: center;
    margin-right: 5px;
    background-color: #9c27b0;
}

.visitor-channel-item .channel-name small {
    display: flex;
    align-self: center;
    margin-left: 5px;
}

.visitor-channel-item .channel-name{
    display: flex;
}

.reaction_custom_container .emojionearea-button,
.reaction_custom_container .emojionearea-editor{
    position: absolute;
    left: -9000px;
}

.reaction_custom_container{
    border: none;
    background-color: transparent;
    border-radius: 0;
}

.reaction-icon-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    margin-left: 5px;
    cursor: pointer;
}

.reaction_custom_container .emojionearea-picker.emojionearea-picker-position-right .emojionearea-wrapper:after{
    display: none;
}

.reaction-icon.reaction-custom:empty {
    display: none;
}

.reactions-emojione .emojionearea-picker {
    position: relative !important;
    top: 0px !important;
    right: 0px !important;
    left: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    box-shadow: none;
    /* height: 294px; */
}

.reactions-emojione .popover-body {
    padding: 0;
}

.popover.reactions {
    border-radius: 30px;
}

.reactions .popover-body {
    padding: 4px 12px;
}

.reaction-icon.active {
    background: #3B4A54;
    background-size: 48px 48px;
    border-radius: 50%;
}

/* .reaction_custom_container .emojionearea-picker .emojionearea-wrapper{
    height: 288px;
} */

.reaction_custom_container .emojionearea-picker .emojionearea-search>input {
    outline: 0;
    width: 300px;
    min-width: 160px;
    height: 30px;
    padding: 10px 12px;
    border-radius: 5px;
}

.popover.reactions-emojione  {
    border-radius: 15px;
    overflow: hidden;
}

.livekit-video-container {
    display: flex;
    flex-direction: column;
}

.livekit-video {
    display: flex;
    width: 100%;
    position: relative;
    background: #000000;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    min-height: 200px;
    overflow: hidden;
}

.livekit-video video {
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.livekit-stream {
    display: contents;
}

.livekit-video-header {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 5px;
}

.livekit-calling-placeholder {
    padding: 20px;
    position: absolute;
    width: 100%;
    height: -webkit-fill-available;
    display: flex;
    top: 0;
    left: 0;
    flex-direction: column;
    justify-content: center;
    background-color: #000;
    border-radius: 5px;
}


.livekit-calling-placeholder .selected-chat-info img {
    width: 90px;
    height: 90px;
}

.call-fullscreen #livekit-local-video-container {
	width: 100%;
	position: absolute;
	width: 10%;
    right: 25px;
    bottom: 65px;
    min-height: 100px;
    min-width: 200px;
}

.call-fullscreen #livekit-remote-video-container {
	height: calc((var(--vh, 1vh) * 100) - 64px);
}

.livekit-video-status {
    position: absolute;
    z-index: 99;
    font-size: 32px;
    background: #ffffff26;
    padding: 5px 20px;
    border-radius: 5px;
    color: #a7a7a7;
}

.camera-off-message {
    font-size: 16px;
    color: #ffffff;
    background-color: #000000;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    margin-top: 10px;
}

.livekit-audio-status {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
}

#audioVisualizer {
    width: calc(100% - 25px);
    height: 100px;  
    background-color: black;  
    position: absolute;
    top: 25%;
    left: 0;
    margin-left: 10px;
    margin-right: 10px;
    z-index: 10;
}

.livekit-setting-select {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

.call-users-list {
    min-height: 250px;
    height: 250px;
    overflow-y: scroll;
}

.livekit-add-participant-list {
    line-height: 1.8;
}

.call-card-body:not(.call-fullscreen) #livekit-participants-area-secondary .livekit-calling-placeholder .selected-chat-info img {
    width: 32px;
    height: 32px;
}

.call-card-body:not(.call-fullscreen) #livekit-participants-area-secondary .livekit-calling-placeholder .call-messages{
    margin-top: 3px;
    font-size: 12px;
}

.recent-fliter-btn.active {
    background: #36b9cc;
    color: rgb(255 255 255);
}

.recent-fliter-btn {
    background: rgb(46 53 62);
    color: #eee;
    font-size: 13px;
    padding: 6px 9px;
    line-height: 1;
    transition: 0.3s;
}

.recent-fliter-btn:hover {
    background: #545b62;
    color: #eee;
}

.recent-filters {
    padding: 5px 23px;
}

.room-user-search {
    border-radius: 0;
}

.btn-room-user-search {
    border-radius: 0;
}

.last-msg-time {
    font-size: 10px;
    margin-bottom: 3px;
    white-space: nowrap;
}

.last-msg-time:empty {
    display: none;
}


.channel-item.chat-item .dropdown {
    visibility: hidden;
    opacity: 0;
    width: 0px;
    transition: 0.2s;
}

.channel-item.chat-item:hover .dropdown {
    visibility: visible;
    opacity: 1;
    position: relative;
    margin-left: 10px;
    width: 8px;
}

.tab-bubble-container .channel-image, .tab-bubble-container .channel-image img {
    width: 32px;
    height: 32px;
}
.forward-selected{
    transition: 0.3s;
}

.forward-selected:hover{
    background-color: #1cc88a;
    color:#fff;
}

.search-filters{
    padding-left: 12px;
    padding-right: 12px;
    width: 220px;
}

.search-filters .form-check {
    margin-bottom: 5px;
}

.search-filters .form-check-label{
    cursor: pointer;
}

.search-users-list .channel-item {
    margin: 0;
}

.noti-reminder .chat-txt {
    word-break: break-all;
}

.right-panel-messages ul li .message-data {
    width: max-content;
}

.notification-toast-message {
    padding: 0 !important;
}

.notification-toast-message .noti-item {
    margin: 0;
    width: 100%;
}

.notification-toast-message .toast-close-button {
    position: absolute;
    right: 10px;
    top: 10px;
}

#prizmViewerContainer video {
    width: 100%;
}

.pswp__button.pswp__button--zoom-minus {
    background-position: -124px 0;
}

.pswp__button.pswp__button--zoom-plus {
    background-position: -88px 0;
}

.pswp__button.pswp__button--rotate-cw {
    background-position: -160px 0;
}

.pswp__button.pswp__button--rotate-ccw {
    background-position: -196px 0;
}

.pswp--zoom-allowed .pswp__button--zoom{
    display: none !important;
}

.pswp-el figcaption {
    display: none;
}

/* This will ensure the figcaption is visible within the lightbox itself (if it's displayed) */
.pswp__caption__center {
    display: block;
}

.pointer-events-none{
    pointer-events: none;
}

.pinned-item {
    font-size: 10px;
    margin-right: 6px;
}

.base-mini-bg {
    overflow: auto !important;
    background: #cfd8dc;
}

.channel-actions .dropdown-item{
    padding: 0.45rem 0.5rem;
}

.pace-running .loadingoverlay_element {
    display: none !important;
}

/* .pswp__button--zoom-plus, .pswp__button--zoom-minus  {
    display: none;
}

.pswp--zoom-allowed .pswp__button--zoom-plus, .pswp--zoom-allowed .pswp__button--zoom-minus {
    display: block;
} */

.add-participant .dropdown-menu{
    min-width: 18rem;
}

.livekit-accept-video-call:focus, .livekit-accept-audio-call:focus{
    color: #fff !important;
}

.pswp__custom-caption {
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 10px;
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%;
    border-radius: 5px;
    text-align: center;
    font-size: 13px;
}


.pswp__button i {
    color: #fff; /* Applies white color to the FontAwesome icons */
}
.pswp__img--placeholder{
    overflow: hidden;
    object-fit: cover;
}

.pswpstories{
    display: none;
}

.stories-main-area .pswp{
    position: relative;
}


.stories-main-area .pswp__img, .stories-main-area .pswp__zoom-wrap {
    width: 100%;
    height: 100%;
}

.pswp__story-container {
    width: auto !important;
    height: calc(100vh - 50px) !important;
    height: calc((var(--vh, 1vh) * 100) - 50px) !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pswp__bullets-indicator {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    width: calc(((var(--vh, 1vh)* 100) - 130px) / 16* 9);
    margin-left: calc(50% -(((var(--vh, 1vh)* 100) - 130px) / 16* 9 / 2));
    z-index: 99999;
}

.pswp__bullet {
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background: #fff;
    margin: 0 2px;
    cursor: pointer;
    position: relative;
}

.pswp__bullet--active {
    background: #03a9f4;
}

.pswp__bullet-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: #00ff00; /* Progress color */
    border-radius: 50%;
    transition: width 0.1s linear;
}

.pswp__bullet--active {
    background-color: rgba(255, 255, 255, 0.7);
}

.pswp__bullet--completed {
    background-color: #00ff00; /* Change to your preferred color for completed */
}

.pswp--has_mouse .pswp__button--arrow {
    visibility: visible;
}

.stories-main-area .pswp__button--arrow--next,
.stories-main-area .pswp__button--arrow--prev,
.stories-main-area .pswp__button--close {
    display: none !important; /* Hide the left and right arrow buttons */
}

.stories-main-area .pswp__bullet-progress{
    max-width: 100%;
}

#non-editable-note {
    height: calc(100vh - 90px);
    overflow: auto;
    padding: 10px;
}

.uppy-Dashboard-Item-preview {
    pointer-events: none;
}

#page-editor {
    overflow-y: scroll;
    height: 100%;
    border-radius: 0;
    background: #fff;
    color: #000;
}

.fr-toolbar.fr-sticky-on {
    top: 91px !important;
}

.fr-second-toolbar{
    border-radius: 0;
}

.sticky-preview img {
    width: 62px;
    border-radius: 5px;
    height: 62px;
    object-fit: cover;
}

.sticky-preview {
    margin-right: 10px;
}

.sticky-content {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* overflow: hidden; */
    max-height: 68px;
}

.dept-mgr i {
    position: relative;
    font-size: 12px;
    left: unset;
    top: unset;
}

.dept-mgr {
    position: absolute;
    background: #4e73df;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    bottom: 9px;
    left: 12px;
}

.cs-chat-tab-container .sender-name{
    pointer-events: none;
    cursor: default;
}

.active-user-last-seen .online {
    font-size: 10px;
}

.call-confirm-swal {
    width: 24em;
}

.call-confirm-swal .swal2-title {
    font-size: 18px !important;
    margin: 0;
    padding: 0;
}

.ack-count:empty {
    display: none;
}

.search-chats .chat-interactions {
    display: none;
}

.noti-content[dir="rtl"] {
    text-align: right;
}

.recent-fliter-btn.active:focus {
    color: white;
}

.cn-player-ctrl {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 4px;
}

.cn-player-speed {
    background: #19232a;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px 5px;
    border-radius: 10px;
    font-size: 10px;
    cursor: pointer;
    line-height: 1;
    width: 32px;
    margin-bottom: 6px;
    display: none;
}

/* For Safari/Webkit browsers */
::-webkit-scrollbar {
    width: 8px; /* Adjust width to make scrollbar narrow */
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(100,100,100,0.4);
    border-radius: 4px;
    border: 2px solid transparent;
}

.emoji-only img.emojione {
    width: 30px;
	height: 30px;
}

.web-qr-container {
    display: none;
}

.otp-login-container {
    display: none;
}

.login-options .login-option.active {
    color: #36b9cc;
    font-weight: bold;
}

ol.web-qr-instructions {
    padding-left: 14px;
}

.web-qr-instructions li {
    font-size: 12px;
}

.noti-fliter-btn.active, .noti-fliter-btn:focus {
    background: #36b9cc;
    color: rgb(255 255 255) !important;
}

.noti-fliter-btn {
    background: rgb(46 53 62);
    color: #eee;
    font-size: 13px;
    padding: 6px 9px;
    line-height: 1;
    transition: 0.3s;
}

.noti-delete {
    justify-content: end;
    display: flex;
    width: 20px;
    align-items: center;
    opacity: 0;
    transition: 0.3s;
    position: absolute;
    right: -4px;
    top: -4px;
}

.noti-item:hover .noti-delete{
    opacity: 1;
    color: #e74a3b;
}

.sticky-message-hidden .sticky-message-remove {
    display: none;
}

.is-typing:not(.is-recording) .fa-microphone{
    display: none;
} 

.is-typing.is-recording .fa-pencil-alt{
    display: none;
}

.chat-code {
    padding: 5px;
    display: block;
    border-radius: 5px;
    line-height: 19px;
    white-space: pre-line;
    position: relative;
    overflow: hidden;
}

code[class*="language-"], pre[class*="language-"] {
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

.code-caption {
    padding-top: 5px;
    display: flex;
    align-self: center;
}

.code-lang {
    display: inline-block;
    padding: 3px 5px;
    background: #36b9cc;
    font-size: 11px;
    line-height: 1;
    overflow: hidden;
    min-width: 30px;
    max-height: 17px;
    white-space: nowrap;
    color: #fff;
    border-radius: 2px;
}

.code-title {
    display: flex;
    align-self: center;
    margin-left: 5px;
}


.chat-tab[data-thread-status="2"] .chat-actions {
	display: none;
}

.uppy-Dashboard--singleFile .uppy-Dashboard-Item-previewIconWrap{
    display: none;
}

.uppy-Dashboard--singleFile .uppy-Dashboard-Item-previewInnerWrap{
    background-color: #5a5c69 !important;
}

.uppy-image-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    border-radius: 6px;
}
.uppy-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #6366f1;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

 .progressring {
    position: relative;
    width: 100px;
    height: 100px;
}

.progressring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progressring-bg {
    stroke: #e0e0e0;
    stroke-width: 8;
    fill: none;
}

.progressring-fill {
    stroke: #4CAF50;
    stroke-width: 8;
    fill: none;
    stroke-linecap: round;
    transition: stroke-dasharray 0.3s ease;
    stroke-dasharray: 0 251;
}

.progressring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.uppy-size--md .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload:disabled {
    background: gray;
    color: #b5b5b5;
    cursor: not-allowed;
}

.spinner-border {
  width: 1rem;
  height: 1rem;
  border: 0.15em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border .75s linear infinite;
}

@keyframes spinner-border {
  100% {
    transform: rotate(360deg);
  }
}

.screencast-container {
    display: none;
    position: absolute;
    background: #141b20;
    width: 100%;
    bottom: 0;
    height: calc((var(--vh, 1vh) * 100) - 50px);
    padding: 5px;
    z-index: 999;
}

.canvas-container {
    position: relative;
    background: #000;
    border-radius: 15px;
    overflow: hidden;
    margin: 5px 5px 20px;
    max-width: 100%;
}

#recordingCanvas {
    width: 100%;
    height: auto;
    display: block;
    cursor: default;
    max-width: 100%;
}

#recordingCanvas.dragging {
    cursor: move;
}

#recordingCanvas.resizing {
    cursor: nw-resize;
}

.video-player-container {
    position: relative;
    background: #000;
    border-radius: 15px;
    overflow: hidden;
    margin: 20px 0;
    max-width: 100%;
    display: none;
}

#recordedVideoPlayer {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
    border-radius: 15px;
}

.view-controls {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    border-radius: 5px;
    padding: 5px;
    z-index: 10;
}

.view-controls button {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 5px 10px;
    margin: 0 2px;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.3s;
}

.view-controls button:hover {
    background: rgba(255,255,255,0.4);
}

.view-controls button.active {
    background: #3498db;
}




div#terminalStatus {
    text-align: center;
} 

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.status-indicator {
    padding: 12px 15px;
    font-weight: bold;
    margin: 0;
    background: transparent;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    border: none;
    border-radius: 0;
}

.status-ready { color: #00ff00; }
.status-recording { color: #ff4444; }
.status-paused { color: #ffaa00; }
.status-stopped { color: #888888; }
.status-initializing { color: #00aaff; }
.status-error { color: #ff4444; }
.status-playback { color: #aa00ff; }

.timer {
    font-size: 24px;
    font-weight: bold;
    color: #e74a3b;
    margin: 10px 10px;
}

.hidden-video {
    position: fixed;
    top: -200px;
    left: -200px;
    width: 160px;
    height: 120px;
    opacity: 0.1;
    pointer-events: none;
    z-index: -1;
}

.settings-panel {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
}

.system-requirements {
    background: rgba(52, 152, 219, 0.1);
    border-left: 4px solid #3498db;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
}

.video-info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
}

.audio-warning {
    background: rgba(243, 156, 18, 0.1);
    border-left: 4px solid #f39c12;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    font-size: 14px;
}

.os-warning {
    background: rgba(231, 76, 60, 0.1);
    border-left: 4px solid #e74c3c;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    font-size: 14px;
}

.success-tip {
    background: rgba(46, 204, 113, 0.1);
    border-left: 4px solid #2ecc71;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    font-size: 14px;
}

/* Screen Recorder Container */
.screen-recorder-container {
    display: none;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.screen-recorder-header {
    display: flex;
    justify-content: between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #dee2e6;
}

.screen-recorder-title {
    font-size: 24px;
    font-weight: bold;
    color: #495057;
    margin: 0;
    flex-grow: 1;
}

.close-recorder-btn {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-recorder-btn:hover {
    background: #c82333;
    transform: scale(1.1);
}

/* Popover styling */
.screen-rec-settings {
    min-height: 355px;
}

.recording-interface .btn:focus, .recording-interface .btn.focus {
    box-shadow: none;
    color: #fff;
}

@keyframes spinner-rotate {
    0% {
        stroke-dashoffset: 0;
        transform: rotate(0deg);
    }
    100% {
        stroke-dashoffset: -502;
        transform: rotate(360deg);
    }
}

.progressring-fill.spinner {
    animation: spinner-rotate 2s linear infinite;
    transform-origin: center;
}

.livekit-color-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 0.5rem;
}

.livekit-color-filter-preset {
    width: 100%;
    padding: 1px;
    border-radius: 0.75rem;
    border-color: #d1d5db;
    background-color: #ffffff;
    color: #1f2937;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.livekit-color-filter-preset .livekit-color-filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.livekit-color-filter-preview-wrapper {
    width: 100%;
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.livekit-color-filter-preview {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.livekit-color-filter-preset:hover,
.livekit-color-filter-preset:focus {
    transform: translateY(-2px);
    border-color: #93c5fd;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
    color: #111827;
    text-decoration: none;
}

.livekit-color-filter-preset.active {
    border-color: #2563eb;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.35);
    color: #0f172a;
}

.message-status, .sent .message-time {
    cursor: pointer;
}

.meeting-form-card .meeting-form-card-body {
    height: calc(100vh - 155px);
    overflow-y: auto;
}

.chat-list-col-hidden {
    flex: 0 0 36px;
    max-width: 36px;
    min-width: 36px;
}

.meeting-upcoming-counter {
    position: absolute;
    left: 1px;
    top: 5px;
    background: transparent;
    font-size: 9px;
}

.show-meetings {
    position: relative;
}

.sticker-lottie-wrapper {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

/* Sticker effect overlay - breaks out of message clipping */
#sticker-effect-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
    overflow: visible;
}

#sticker-effect-overlay .lottie-effect-portal {
    position: absolute;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease-out;
}

#sticker-effect-overlay .lottie-effect-portal.expanding {
    transform: scale(3);
    opacity: 1;
}

#sticker-effect-overlay .lottie-effect-portal.collapsing {
    transform: scale(1);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 0.25s ease-in;
}

@media screen and (max-width: 768px) {
    #sticker-effect-overlay .lottie-effect-portal.expanding {
        transform: scale(2.5);
    }
}

.file-caption .chat-link {
    width: 220px;
}