@charset "UTF-8"; /* Template Name: Chatvia - Responsive Bootstrap 4 Chat App Author: Boldware Group Version: 2.1.0 Website: https://boldwaregroup.com/ Contact: boldwaregroup@gmail.com file: Main Css file */ @import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600&display=swap"); /*! * Waves v0.7.6 * http://fian.my.id/Waves * * Copyright 2014-2018 Alfiana E. Sibuea and other contributors * Released under the MIT license * https://github.com/fians/Waves/blob/master/LICENSE */ .waves-effect { position: relative; cursor: pointer; display: inline-block; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .waves-effect .waves-ripple { position: absolute; border-radius: 50%; width: 100px; height: 100px; margin-top: -50px; margin-right: -50px; opacity: 0; background: rgba(0, 0, 0, 0.2); background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%); -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -webkit-transition-property: -webkit-transform, opacity; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transform: scale(0) translate(0, 0); transform: scale(0) translate(0, 0); pointer-events: none; } .waves-effect.waves-light .waves-ripple { background: rgba(255, 255, 255, 0.4); background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%); } .waves-effect.waves-classic .waves-ripple { background: rgba(0, 0, 0, 0.2); } .waves-effect.waves-classic.waves-light .waves-ripple { background: rgba(255, 255, 255, 0.4); } .waves-notransition { -webkit-transition: none !important; transition: none !important; } .waves-button, .waves-circle { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); } .waves-button, .waves-button:hover, .waves-button:visited, .waves-button-input { white-space: nowrap; vertical-align: middle; cursor: pointer; border: none; outline: none; color: inherit; background-color: rgba(0, 0, 0, 0); font-size: 1em; line-height: 1em; text-align: center; text-decoration: none; z-index: 1; } .waves-button { padding: 0.85em 1.1em; border-radius: 0.2em; } .waves-button-input { margin: 0; padding: 0.85em 1.1em; } .waves-input-wrapper { border-radius: 0.2em; vertical-align: bottom; } .waves-input-wrapper.waves-button { padding: 0; } .waves-input-wrapper .waves-button-input { position: relative; top: 0; right: 0; z-index: 1; } .waves-circle { text-align: center; width: 2.5em; height: 2.5em; line-height: 2.5em; border-radius: 50%; } .waves-float { -webkit-mask-image: none; -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12); box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12); -webkit-transition: all 300ms; transition: all 300ms; } .waves-float:active { -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3); box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3); } .waves-block { display: block; } .waves-effect.waves-light .waves-ripple { background-color: rgba(255, 255, 255, 0.4); } .waves-effect.waves-primary .waves-ripple { background-color: rgba(114, 105, 239, 0.4); } .waves-effect.waves-success .waves-ripple { background-color: rgba(6, 214, 160, 0.4); } .waves-effect.waves-info .waves-ripple { background-color: rgba(80, 165, 241, 0.4); } .waves-effect.waves-warning .waves-ripple { background-color: rgba(255, 209, 102, 0.4); } .waves-effect.waves-danger .waves-ripple { background-color: rgba(239, 71, 111, 0.4); } .avatar-xs { height: 2.2rem; width: 2.2rem; } .avatar-sm { height: 3rem; width: 3rem; } .avatar-md { height: 4.5rem; width: 4.5rem; } .avatar-lg { height: 6rem; width: 6rem; } .avatar-xl { height: 7.5rem; width: 7.5rem; } .avatar-title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #7269ef; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 500; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } .font-size-8 { font-size: 8px !important; } .font-size-9 { font-size: 9px !important; } .font-size-10 { font-size: 10px !important; } .font-size-11 { font-size: 11px !important; } .font-size-12 { font-size: 12px !important; } .font-size-13 { font-size: 13px !important; } .font-size-14 { font-size: 14px !important; } .font-size-15 { font-size: 15px !important; } .font-size-16 { font-size: 16px !important; } .font-size-17 { font-size: 17px !important; } .font-size-18 { font-size: 18px !important; } .font-size-20 { font-size: 20px !important; } .font-size-22 { font-size: 22px !important; } .font-size-24 { font-size: 24px !important; } .fw-medium { font-weight: 500; } .fw-semibold { font-weight: 600; } .social-list-item { height: 2rem; width: 2rem; line-height: calc(2rem - 4px); display: block; border: 2px solid #adb5bd; border-radius: 50%; color: #adb5bd; text-align: center; -webkit-transition: all 0.4s; transition: all 0.4s; } .social-list-item:hover { color: #7a7f9a; background-color: #f5f7fb; } .w-xs { min-width: 80px; } .w-sm { min-width: 95px; } .w-md { min-width: 110px; } .w-lg { min-width: 140px; } .w-xl { min-width: 160px; } .border-dark { border-color: var(--bs-dark) !important; } .border-light { border-color: var(--bs-light) !important; } .text-bg-light { color: var(--bs-light) !important; } .text-bg-dark { color: var(--bs-dark) !important; } .card-header { background-color: var(--bs-light) !important; border-bottom: 0 solid var(--bs-light) !important; } [data-layout-mode=dark] .btn-close { -webkit-filter: invert(1) grayscale(100%) brightness(200%); filter: invert(1) grayscale(100%) brightness(200%); } .custom-accordion .card + .card { margin-top: 0.5rem; } .custom-accordion a i.accor-plus-icon { font-size: 16px; } .custom-accordion a.collapsed i.accor-plus-icon:before { content: "\f0142"; } .accordion-button:after { margin-right: auto; margin-left: 0; } [data-layout-mode=dark] .accordion-button:not(.collapsed) { color: var(--bs-accordion-button-active-color); } [data-layout-mode=dark] .accordion-button:not(.collapsed):after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } [data-layout-mode=dark] .accordion-button:after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23adb5bd'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } [type=tel]::-webkit-input-placeholder, [type=url]::-webkit-input-placeholder, [type=email]::-webkit-input-placeholder, [type=number]::-webkit-input-placeholder { text-align: right; } [type=tel]::-moz-placeholder, [type=url]::-moz-placeholder, [type=email]::-moz-placeholder, [type=number]::-moz-placeholder { text-align: right; } [type=tel]:-ms-input-placeholder, [type=url]:-ms-input-placeholder, [type=email]:-ms-input-placeholder, [type=number]:-ms-input-placeholder { text-align: right; } [type=tel]::-ms-input-placeholder, [type=url]::-ms-input-placeholder, [type=email]::-ms-input-placeholder, [type=number]::-ms-input-placeholder { text-align: right; } [type=tel]::placeholder, [type=url]::placeholder, [type=email]::placeholder, [type=number]::placeholder { text-align: right; } .custom-checkbox-primary .custom-control-input:checked ~ .custom-control-label:before, .custom-radio-primary .custom-control-input:checked ~ .custom-control-label:before { background-color: #7269ef; border-color: #7269ef; } .custom-checkbox-secondary .custom-control-input:checked ~ .custom-control-label:before, .custom-radio-secondary .custom-control-input:checked ~ .custom-control-label:before { background-color: #7a7f9a; border-color: #7a7f9a; } .custom-checkbox-success .custom-control-input:checked ~ .custom-control-label:before, .custom-radio-success .custom-control-input:checked ~ .custom-control-label:before { background-color: #06D6A0; border-color: #06D6A0; } .custom-checkbox-info .custom-control-input:checked ~ .custom-control-label:before, .custom-radio-info .custom-control-input:checked ~ .custom-control-label:before { background-color: #50a5f1; border-color: #50a5f1; } .custom-checkbox-warning .custom-control-input:checked ~ .custom-control-label:before, .custom-radio-warning .custom-control-input:checked ~ .custom-control-label:before { background-color: #FFD166; border-color: #FFD166; } .custom-checkbox-danger .custom-control-input:checked ~ .custom-control-label:before, .custom-radio-danger .custom-control-input:checked ~ .custom-control-label:before { background-color: #EF476F; border-color: #EF476F; } .custom-checkbox-light .custom-control-input:checked ~ .custom-control-label:before, .custom-radio-light .custom-control-input:checked ~ .custom-control-label:before { background-color: #e6ebf5; border-color: #e6ebf5; } .custom-checkbox-dark .custom-control-input:checked ~ .custom-control-label:before, .custom-radio-dark .custom-control-input:checked ~ .custom-control-label:before { background-color: #343a40; border-color: #343a40; } .custom-checkbox-dark .custom-control-input:checked ~ .custom-control-label:before, .custom-radio-dark .custom-control-input:checked ~ .custom-control-label:before { color: #343a40; } .custom-control-label { cursor: pointer; } .form-check, .form-check-input { cursor: pointer; } .custom-switch-md { padding-right: 3rem; } .custom-switch-md .custom-control-label { line-height: 20px; } .custom-switch-md .custom-control-label:before { width: 40px; height: 20px; border-radius: 30px; right: -3rem; } .custom-switch-md .custom-control-label:after { width: 16px; height: 16px; right: calc(-3rem + 2px); } .custom-switch-md .custom-control-input:checked ~ .custom-control-label::after { -webkit-transform: translateX(-1.25rem); transform: translateX(-1.25rem); } .custom-switch-lg { padding-right: 3.75rem; } .custom-switch-lg .custom-control-label { line-height: 24px; } .custom-switch-lg .custom-control-label:before { width: 48px; height: 24px; border-radius: 30px; right: -3.75rem; } .custom-switch-lg .custom-control-label:after { width: 20px; height: 20px; right: calc(-3.75rem + 2px); border-radius: 50%; } .custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after { -webkit-transform: translateX(-1.5rem); transform: translateX(-1.5rem); } .custom-control-label::before { background-color: var(--bs-input-bg); } [data-simplebar] { position: relative; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .simplebar-wrapper { overflow: hidden; width: inherit; height: inherit; max-width: inherit; max-height: inherit; } .simplebar-mask { direction: inherit; position: absolute; overflow: hidden; padding: 0; margin: 0; right: 0; top: 0; bottom: 0; left: 0; width: auto !important; height: auto !important; z-index: 0; } .simplebar-offset { direction: inherit !important; -webkit-box-sizing: inherit !important; box-sizing: inherit !important; resize: none !important; position: absolute; top: 0; right: 0 !important; bottom: 0; left: 0 !important; padding: 0; margin: 0; -webkit-overflow-scrolling: touch; } .simplebar-content-wrapper { direction: inherit; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; position: relative; display: block; height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */ width: auto; visibility: visible; overflow: auto; /* Scroll on this element otherwise element can't have a padding applied properly */ max-width: 100%; /* Not required for horizontal scroll to trigger */ max-height: 100%; /* Needed for vertical scroll to trigger */ scrollbar-width: none; padding: 0px !important; } .simplebar-content-wrapper::-webkit-scrollbar, .simplebar-hide-scrollbar::-webkit-scrollbar { display: none; } .simplebar-content:before, .simplebar-content:after { content: " "; display: table; } .simplebar-placeholder { max-height: 100%; max-width: 100%; width: 100%; pointer-events: none; } .simplebar-height-auto-observer-wrapper { -webkit-box-sizing: inherit !important; box-sizing: inherit !important; height: 100%; width: 100%; max-width: 1px; position: relative; float: right; max-height: 1px; overflow: hidden; z-index: -1; padding: 0; margin: 0; pointer-events: none; -webkit-box-flex: inherit; -ms-flex-positive: inherit; flex-grow: inherit; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: 0; flex-basis: 0; } .simplebar-height-auto-observer { -webkit-box-sizing: inherit; box-sizing: inherit; display: block; opacity: 0; position: absolute; top: 0; right: 0; height: 1000%; width: 1000%; min-height: 1px; min-width: 1px; overflow: hidden; pointer-events: none; z-index: -1; } .simplebar-track { z-index: 1; position: absolute; left: 0; bottom: 0; pointer-events: none; overflow: hidden; } [data-simplebar].simplebar-dragging .simplebar-content { pointer-events: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } [data-simplebar].simplebar-dragging .simplebar-track { pointer-events: all; } .simplebar-scrollbar { position: absolute; left: 2px; width: 7px; min-height: 10px; } .simplebar-scrollbar:before { position: absolute; content: ""; background: #a2adb7; border-radius: 7px; right: 0; left: 0; opacity: 0; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .simplebar-scrollbar.simplebar-visible:before { /* When hovered, remove all transitions from drag handle */ opacity: 0.5; -webkit-transition: opacity 0s linear; transition: opacity 0s linear; } .simplebar-track.simplebar-vertical { top: 0; width: 11px; } .simplebar-track.simplebar-vertical .simplebar-scrollbar:before { top: 2px; bottom: 2px; } .simplebar-track.simplebar-horizontal { right: 0; height: 11px; } .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before { height: 100%; right: 2px; left: 2px; } .simplebar-track.simplebar-horizontal .simplebar-scrollbar { left: auto; right: 0; top: 2px; height: 7px; min-height: 0; min-width: 10px; width: auto; } /* Rtl support */ [data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical { left: auto; right: 0; } .hs-dummy-scrollbar-size { direction: ltr; position: fixed; opacity: 0; visibility: hidden; height: 500px; width: 500px; overflow-y: hidden; overflow-x: scroll; } .simplebar-hide-scrollbar { position: fixed; right: 0; visibility: hidden; overflow-y: scroll; scrollbar-width: none; } .custom-scroll { height: 100%; } .side-menu { min-width: 75px; max-width: 75px; height: 100vh; /*min-height: 570px;*/ background-color: var(--bs-sidebar-bg); display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 9; -webkit-box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12); box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12); } @media (max-width: 991.98px) { .side-menu { position: fixed; bottom: 0; height: 60px; min-width: 100%; min-height: auto; display: block; border-top: 1px solid var(--bs-border-color); } } .side-menu .navbar-brand-box { text-align: center; } @media (max-width: 991.98px) { .side-menu .navbar-brand-box { display: none; } } .side-menu .navbar-brand-box .logo { line-height: 70px; } .side-menu .navbar-brand-box .logo-dark { display: block; } .side-menu .navbar-brand-box .logo-light { display: none; } .side-menu .theme-mode-icon:before { content: var(--bs-theme-mode-icon); } .side-menu-nav .nav-item { margin: 7px 0; } @media (max-width: 991.98px) { .side-menu-nav .nav-item { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin: 5px 0; } } .side-menu-nav .nav-item .nav-link { text-align: center; font-size: 24px; color: var(--bs-sidebar-menu-item-color); width: 56px; height: 56px; line-height: 56px; margin: 0px auto; border-radius: 8px; padding: 0; } @media (max-width: 991.98px) { .side-menu-nav .nav-item .nav-link { font-size: 20px; width: 48px; height: 48px; line-height: 48px; } } .side-menu-nav .nav-item .nav-link.active { background-color: var(--bs-sidebar-menu-item-active-bg); color: #7269ef; } .side-menu-nav .nav-item.show > .nav-link { background-color: var(--bs-sidebar-menu-item-active-bg); color: #7269ef; } .side-menu-nav .profile-user { height: 36px; width: 36px; background-color: var(--bs-gray-300); padding: 3px; } .chat-leftsidebar { height: 100vh; background-color: var(--bs-sidebar-sub-bg); } @media (min-width: 992px) { .chat-leftsidebar { min-width: 380px; max-width: 380px; } } .chat-leftsidebar .user-status-box { background-color: var(--bs-light); padding: 8px; border-radius: 8px; text-align: center; margin-top: 16px; display: block; } .chat-leftsidebar .user-status-box .chat-user-img { position: absolute; top: 0; right: 0; left: 0; } .chat-search-box .form-control { border: 0; } .chat-search-box .search-icon-btn { font-size: 16px; position: absolute; left: 13px; top: 0; } .chat-message-list { height: calc(100vh - 205px); } @media (max-width: 991.98px) { .chat-message-list { height: calc(100vh - 270px); } .chat-leftsidebar{ height: 100%; } } .onesignal-customlink-container button{ margin: 1em !important; } .onesignal-customlink-container{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; justify-content: center; } .chat-parameters-list { height: calc(100vh - 150px); } .chat-group-list { height: calc(100vh - 160px); } @media (max-width: 991.98px) { .chat-group-list { height: calc(100vh - 194px); } .chat-parameters-list { height: calc(100vh - 194px); } } .chat-list { margin: 0; } .chat-list li.active a { background-color: var(--bs-light); } .chat-list li a { position: relative; display: block; padding: 15px 20px; color: var(--bs-gray-600); -webkit-transition: all 0.4s; transition: all 0.4s; border-top: 1px solid var(--bs-sidebar-sub-bg); border-radius: 4px; } .chat-list li a:hover { background-color: var(--bs-light); } .chat-list li .chat-user-message { font-size: 14px; } .chat-list li.typing .chat-user-message { color: #7269ef; font-weight: 500; } .chat-list li.typing .chat-user-message .dot { background-color: #7269ef; } .chat-list li .unread-message { position: absolute; display: inline-block; left: auto; right: 24px; top: 33px; } .chat-list li .unread-message .badge { line-height: 16px; font-weight: 600; font-size: 10px; } .chat-user-img { position: relative; } .chat-user-img .user-status { width: 10px; height: 10px; background-color: #adb5bd; border-radius: 50%; border: 2px solid var(--bs-card-bg); position: absolute; left: 0; right: auto; bottom: 0; } .chat-user-img.online .user-status { background-color: #06D6A0; } .chat-user-img.away .user-status { background-color: #FFD166; } .contact-list li { cursor: pointer; padding: 10px 20px; } .profile-user { position: relative; display: inline-block; } .profile-user .profile-photo-edit { position: absolute; left: 0; right: auto; bottom: 0; } .user-chat { background-color: var(--bs-card-bg); -webkit-box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12); box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12); -webkit-transition: all 0.4s; transition: all 0.4s; } @media (max-width: 991.98px) { .user-chat { position: fixed; right: 0; top: 0; width: 100%; height: 100%; visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); z-index: 99; } .user-chat.user-chat-show { visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); } } .user-chat-topbar { height: 100px; } @media (max-width: 991.98px) { .user-chat-topbar { /*position: fixed;*/ height: 120px; right: 0; left: 0; top: 0; z-index: 1; } } .user-chat-nav .nav-btn { height: 40px; width: 40px; line-height: 40px; -webkit-box-shadow: none; box-shadow: none; padding: 0; font-size: 20px; color: var(--bs-gray-600); } @media (max-width: 575.98px) { .user-chat-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } .chat-conversation ul{ position: relative; } .chat-conversation li { clear: both; width: 100%; } .chat-conversation .chat-avatar { margin: 0 0 0 16px; } .chat-conversation .chat-avatar img { width: 36px; height: 36px; border-radius: 50%; } .chat-conversation .chat-day-title { position: relative; text-align: center; margin-bottom: 24px; margin-top: 12px; } .chat-conversation .chat-day-title .title { background-color: var(--bs-border-color); position: relative; font-size: 13px; z-index: 1; padding: 6px 12px; border-radius: 5px; } .chat-conversation .chat-day-title:before { content: ""; position: absolute; width: 100%; height: 1px; right: 0; left: 0; background-color: var(--bs-border-color); top: 10px; } .chat-conversation .chat-day-title .badge { font-size: 12px; } .chat-conversation .conversation-list { /*margin-bottom: 24px;*/ padding-bottom: 1em; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .chat-conversation .conversation-list .ctext-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 10px; } .chat-conversation .conversation-list .ctext-wrap-content { padding: 12px 20px; background-color: var(--bs-chat-secondary-bg); border-radius: 8px 8px 8px 0; color: var(--bs-chat-secondary-text); position: relative; } .chat-conversation .conversation-list .ctext-wrap-content:before { content: ""; position: absolute; border: 5px solid transparent; border-left-color: var(--bs-chat-secondary-bg); border-top-color: var(--bs-chat-secondary-bg); right: auto; left: 0; bottom: -10px; } @media (max-width: 575.98px) { .chat-conversation .conversation-list .ctext-wrap-content .attached-file .attached-file-avatar { display: none; } } .chat-conversation .conversation-list .conversation-name { font-weight: 500; font-size: 14px; } .chat-conversation .conversation-list .dropdown .dropdown-toggle { font-size: 18px; padding: 4px; color: var(--bs-gray-600); } @media (max-width: 575.98px) { .chat-conversation .conversation-list .dropdown .dropdown-toggle { display: none; } } .chat-conversation .conversation-list .chat-time { font-size: 12px; margin-top: 4px; text-align: left; } .chat-conversation .conversation-list .message-img { border-radius: 0.2rem; position: relative; } .chat-conversation .conversation-list .message-img .message-img-list { position: relative; } .chat-conversation .conversation-list .message-img img { max-width: 150px; } .chat-conversation .conversation-list .message-img .message-img-link { position: absolute; left: 10px; right: auto; bottom: 10px; } .chat-conversation .conversation-list .message-img .message-img-link li > a { font-size: 18px; color: #fff; display: inline-block; line-height: 30px; width: 30px; height: 30px; text-align: center; } .chat-conversation .right .chat-avatar { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; margin-left: 0px; margin-right: 16px; } .chat-conversation .right .chat-time { text-align: right; } .chat-conversation .right .conversation-list { float: right; text-align: right; } .chat-conversation .right .conversation-list .ctext-wrap { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .chat-conversation .right .conversation-list .ctext-wrap .ctext-wrap-content { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; background-color: var(--bs-chat-primary-bg); color: var(--bs-chat-primary-text); text-align: left; border-radius: 8px 8px 0px 8px; } .chat-conversation .right .conversation-list .ctext-wrap .ctext-wrap-content:before { border: 5px solid transparent; border-top-color: var(--bs-chat-primary-bg); border-right-color: var(--bs-chat-primary-bg); right: 0px; left: auto; } .chat-conversation .right .conversation-list .dropdown { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .chat-conversation .right .conversation-list .dropdown .dropdown-menu[style] { left: 0 !important; right: auto !important; } .chat-conversation .right .dot { background-color: #343a40; } .chat-conversation { height: calc(100vh - 160px); } .chat-conversation-full { height: auto !important; } .chat-input-section { background-color: var(--bs-card-bg); height: 60px; } @media (max-width: 991.98px) { .chat-conversation { height: calc(100vh - 200px); } .chat-input-section { position: fixed; height: 80px; right: 0; left: 0; bottom: 0; z-index: 1; } } .chat-input-links .list-inline-item:not(:last-child) { margin: 0; } .animate-typing .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; margin-left: -1px; background: #fff; -webkit-animation: wave 1.3s linear infinite; animation: wave 1.3s linear infinite; opacity: 0.6; } .animate-typing .dot:nth-child(2) { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .animate-typing .dot:nth-child(3) { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @-webkit-keyframes wave { 0%, 60%, 100% { -webkit-transform: initial; transform: initial; } 30% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } } @keyframes wave { 0%, 60%, 100% { -webkit-transform: initial; transform: initial; } 30% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } } .user-profile-sidebar { height: 100vh; background-color: var(--bs-card-bg); display: none; min-width: 380px; max-width: 380px; } @media (min-width: 992px) { .user-profile-sidebar { border-right: 4px solid var(--bs-border-color); } } @media (max-width: 1199.98px) { .user-profile-sidebar { position: fixed; left: 0; top: 0; z-index: 99; } } @media (max-width: 575.98px) { .user-profile-sidebar { min-width: 100%; } } .user-profile-desc { height: calc(100vh - 400px); } @media (max-width: 991.98px) { .user-profile-desc { height: calc(100vh - 424px); } } .auth-logo .logo { margin: 0px auto; } .auth-logo .logo-dark { display: block; } .auth-logo .logo-light { display: none; }rk { display: block; } .auth-logo .logo-light { display: none; } .overlay { position: absolute; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 2; cursor: pointer; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: center; } .overlay_fill { position: absolute; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; cursor: pointer; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: center; } .overlay_fill_class { position: absolute; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, .20); backdrop-filter: blur(10px); z-index: 99999; cursor: pointer; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: center; } .widget-circle{ text-align: center; border-radius: 50%; height: 200px; width: 200px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: center; margin: 1em; } .page-scroll{ overflow:auto; } /* width */ ::-webkit-scrollbar,iframe::-webkit-scrollbar { width: 0.2em; } /* Track */ ::-webkit-scrollbar-track,iframe::-webkit-scrollbar-track { box-shadow: inset 0 0 1px transparent; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb,iframe::-webkit-scrollbar-thumb { background: red; border-radius: 10px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover,iframe::-webkit-scrollbar-thumb:hover { background: #b30000; } /*region Package Widget*/ .widget-totals{ max-height: 200px !important; overflow: hidden; border-radius: 1em; } .widget-package .btn { font-size: 0.7rem; width: 100%; margin: 0.5em 0; display: block; } .widget-package .badge { font-size: 0.5rem; margin: 0; display: block; } .users-list { padding-left: 0; list-style: none; } .users-list > li { float: left; padding: 10px; text-align: center; width: 25%; } .users-list > li img { border-radius: 50%; height: auto; max-width: 100%; } .users-list > li > a:hover, .users-list > li > a:hover .users-list-name { color: #999; } .users-list-name, .users-list-date { display: block; } .users-list-name { color: #495057; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .users-list-date { color: #748290; font-size: 12px; } .dark-mode .users-list-name { color: #ced4da; } .dark-mode .users-list-date { color: #adb5bd; } /*endregion*/