/* FONTS LINK */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import "global.css";
@import "light.css";
@import "dark.css";

/** Following variables are common for all clients if needed in fututr we will move to glabal.css file*/
/** VARIABLE DECLARATION :: STARTS */
:root {
    --gray-color-lighter: #BDBDBD;
    --call-activity-green: #26AB23;
    --call-decline-red: #E6404E;
    --chat-counter: #FF4738;
    --chat-online: #2DE466;
    --missed-call-red: #F05144;
    --busy-yellow: #FFC23C;
    --blue-color: #006BE0;
    --error-background-color: rgba(240, 81, 68, 0.4);
    --call-popup-background: #221F27;
    --error-text: #FF4738;
    --call-btn-seprator: #44D341;
    --input-placeholder: #D4DBE1;
    --common-box-shadow: -9px 10px 20px rgba(0, 0, 0, 0.05);
    --radio-btn-color: #2098F0;
    --failed-connection: #FFCFCB;
    /* --highlight-txt: #FFDF39; */
    --toolitp-color: #626262;
    --mic-icon-size: 100px;
    --recording-light-red-color: #fef2f2e3;
    --recording-light-orange-color: #fffbebe3;
    --recording-orange-color-text-light: #e17100;
    --recording-dark-red-color: #fef2f2e3;
    --recording-dark-orange-color: #fffbebe3;
    --recording-orange-color-text-dark: #e17100;
    --white-color: #fff;
}


/* TEMPORARY CSS FOR FIXED SIZE DESKAPP REMOVE BEFORE STARTING DEVELOPMENT */
body {
    /* width: 1024px; Commented for TRAG-7319 */
    margin: auto !important;
    display: block;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    height: 100vh !important;
    background: var(--bg-color) var(--bg-image);
}

#loginSection,
#requestOtpSection,
#validateOtpSection,
#resetPasswordSection,
#checkMailSection,
.login-content {
    background: var(--login-bg-color);
    height: calC(100% + 50px) !important;
  }
#forgotPasswordIframeParent {
    overflow:hidden;
    height: calc(100vh - 230px); 
    display: none;
    position: absolute;
    top:30%;
    left: 0;
    width: 100%;
    z-index: 5;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .dropdown-menu {
    color: #fff;
}

@media (prefers-color-scheme: dark) {

    html:not([data-theme="light"]):not([data-theme="dark"]) body,
    html:not([data-theme="light"]):not([data-theme="dark"]) .dropdown-menu {
        color: #fff;
    }
}

.fi:before {
    color: transparent !important;
}

body:has(.modal-backdrop.show) {
    backdrop-filter: none;
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* NEW LOADER CSS :: STARTS */
.loading_spinner,
.loading_spinner_syncload {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(255 255 255 / 35%);
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.loading_spinner_syncload {
    backdrop-filter: blur(20px);
}

@media (prefers-color-scheme: light) {

    html:not([data-theme="light"]):not([data-theme="dark"]) .loading_spinner,
    html:not([data-theme="light"]):not([data-theme="dark"]) .loading_spinner_syncload {
        background: rgb(255 255 255 / 35%);
    }
}

html[data-theme="dark"] .loading_spinner,
html[data-theme="dark"] .loading_spinner_syncload {
    background: rgb(0 0 0 / 35%);
}

@media (prefers-color-scheme: dark) {

    html:not([data-theme="light"]):not([data-theme="dark"]) .loading_spinner,
    html:not([data-theme="light"]):not([data-theme="dark"]) .loading_spinner_syncload {
        background: rgb(0 0 0 / 35%);
    }
}

.loading_spinner p,
.loading_spinner_syncload p {
    color: var(--input-icon);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: left;
    margin-top: 15px;
}

.editor-title {
    font-weight: 600 !important;
}

.lds-default {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-default div {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--input-icon);
    border-radius: 50%;
    animation: lds-default 1.2s linear infinite;
}

.lds-default div:nth-child(1) {
    animation-delay: 0s;
    top: 37px;
    left: 66px;
}

.lds-default div:nth-child(2) {
    animation-delay: -0.1s;
    top: 22px;
    left: 62px;
}

.lds-default div:nth-child(3) {
    animation-delay: -0.2s;
    top: 11px;
    left: 52px;
}

.lds-default div:nth-child(4) {
    animation-delay: -0.3s;
    top: 7px;
    left: 37px;
}

.lds-default div:nth-child(5) {
    animation-delay: -0.4s;
    top: 11px;
    left: 22px;
}

.lds-default div:nth-child(6) {
    animation-delay: -0.5s;
    top: 22px;
    left: 11px;
}

.lds-default div:nth-child(7) {
    animation-delay: -0.6s;
    top: 37px;
    left: 7px;
}

.lds-default div:nth-child(8) {
    animation-delay: -0.7s;
    top: 52px;
    left: 11px;
}

.lds-default div:nth-child(9) {
    animation-delay: -0.8s;
    top: 62px;
    left: 22px;
}

.lds-default div:nth-child(10) {
    animation-delay: -0.9s;
    top: 66px;
    left: 37px;
}

.lds-default div:nth-child(11) {
    animation-delay: -1s;
    top: 62px;
    left: 52px;
}

.lds-default div:nth-child(12) {
    animation-delay: -1.1s;
    top: 52px;
    left: 62px;
}

@keyframes lds-default {

    0%,
    20%,
    80%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }
}

/* NEW LOADER CSS :: ENDS */

/* SPINNER CSS :: STARTS */
.spinner-box {
    width: 100%;
    height: 100%;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.spinner-box div {
    background: var(--white-color);
    height: 50px;
    width: 50px;
    justify-content: center;
    align-items: flex;
    align-items: center;
    display: flex;
    border-radius: 100%;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.loader {
    display: block;
    color: var(--primary-bg);
    font-size: 5px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    animation: spin 1.3s infinite linear;
    transform: translateZ(0);
}

@keyframes spin {

    0%,
    100% {
        box-shadow: 0 -3em 0 0.2em,
            2em -2em 0 0em, 3em 0 0 -1em,
            2em 2em 0 -1em, 0 3em 0 -1em,
            -2em 2em 0 -1em, -3em 0 0 -1em,
            -2em -2em 0 0;
    }

    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
            3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
            -2em 2em 0 -1em, -3em 0 0 -1em,
            -2em -2em 0 -1em;
    }

    25% {
        box-shadow: 0 -3em 0 -0.5em,
            2em -2em 0 0, 3em 0 0 0.2em,
            2em 2em 0 0, 0 3em 0 -1em,
            -2em 2em 0 -1em, -3em 0 0 -1em,
            -2em -2em 0 -1em;
    }

    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
            3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
            -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
            3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
            -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
            3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
            -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }

    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
            3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
            -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
    }

    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
            3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
            -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}

/* SPINNER CSS :: ENDS */

/* LIGHT & DARK MODE IMAGE CHANGE :: START */

img[data-mode="light"],
img[data-mode="dark"] {
    display: none !important;
}

html[data-theme="light"] img[data-mode="light"] {
    display: block !important;
}

@media (prefers-color-scheme: light) {
    html:not([data-theme="light"]):not([data-theme="dark"]) img[data-mode="light"] {
        display: block !important;
    }
}

html[data-theme="dark"] img[data-mode="dark"] {
    display: block !important;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="dark"]) img[data-mode="dark"] {
        display: block !important;
    }
}

/* Inline SVG icons (replacement for img) – same visibility as img[data-mode] */
.icon-svg-inline[data-mode="light"],
.icon-svg-inline[data-mode="dark"] {
    display: none !important;
}
html[data-theme="light"] .icon-svg-inline[data-mode="light"] {
    display: inline-block !important;
}
@media (prefers-color-scheme: light) {
    html:not([data-theme="light"]):not([data-theme="dark"]) .icon-svg-inline[data-mode="light"] {
        display: inline-block !important;
    }
}
html[data-theme="dark"] .icon-svg-inline[data-mode="dark"] {
    display: inline-block !important;
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="dark"]) .icon-svg-inline[data-mode="dark"] {
        display: inline-block !important;
    }
}

/* LIGHT & DARK MODE IMAGE CHANGE :: END */

/* TAB FOCUS CSS :: STARTS */
/* HEADER FOCUS CSS :: STARTS */
input:focus::-webkit-input-placeholder {
    opacity: 0;
}

:focus-visible {
    outline: none;
}

.login-content a:focus-visible,
.login-content button:focus,
.input-group.focusActive,
.enter-password-modal .modal-body button:focus,
.sip-configuration-content .gradient-btn:focus,
div.autofocus,
.check-mail-content button:focus,
.otp-verification .otp-box input:focus,
.login-content .gradient-btn:focus {
    border: 1px solid var(--input-border-focused-color) !important;
    outline: none;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.login-content button.back:focus {
    border: none !important;
}

.focused-radio-btn [type="radio"]:checked+label:before {
    border: 1px solid var(--input-border-focused-color) !important;
    outline: none;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

input:focus::-webkit-input-placeholder {
    opacity: 0;
}

.back:focus,
.back:focus-visible {
    border: none !important;
    outline: none;
    box-shadow: none !important;
}

.custom-file-input:focus,
.custom-file-input:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    outline: none;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.switch:focus-within,
.profile-dropdown .dropdown-menu li:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    outline: none;
    border-radius: 4px;
}

.sip-configuration-content .login-left-section .switch:focus-within {
    outline: 2px solid var(--input-border-focused-color) !important;
    border-radius: 4px;
    border: none !important;
}

.sip-configuration-content .login-left-section .switch:focus-within .slider:before {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 254, 254, 0.3);
}

.switch:focus-within .toggle label:after {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 254, 254, 0.3);
}

.switch .toggle label:focus-visible {
    outline: none;
    border: none;
}


.profile-dropdown:focus-visible {
    background-color: var(--bg-header-hover);
    outline: none;
    border: none;
    border-radius: 9px;
}

/* HEADER FOCUS CSS :: ENDS */

/* LEFT SIDE NAVBAR FOCUS CSS :: STARTS */
.left-side-menu.nav-pills .nav-link:focus-visible {
    background: var(--sidebar-item-hover-bg) !important;
    outline: none;
    border: none !important;
    box-shadow: none;
    border-radius: 0px;
}

.left-side-menu.nav-pills .nav-link:focus {
    outline: none;
    box-shadow: none;
}

.update-dot {
    width: 9px;
    height: 9px;
    background-color: var(--bs-danger);
    border-radius: 100%;
    right: 28px;
    top: 0px;
    position: absolute;
}

/* LEFT SIDE NAVBAR FOCUS CSS :: ENDS */

/* DIALERPAD FOCUS CSS :: STARTS */
.caller-id:focus-visible .dropdown-toggle {
    background-color: var(--element-active-bg);
}

.main-dialpad .digit:focus-visible,
.main-dialpad button.voice-mail-btn:focus {
    background-color: var(--element-active-bg);
}

.main-dialpad .audio-call-btn:focus-visible {
    border: 1.5px solid var(--input-border-focused-color);
    border-right: 2px solid var(--input-border-focused-color) !important;
}

.main-dialpad .video-call-btn:focus-visible,
.main-dialpad .call-buttons .tranfer-call-btn:focus-visible,
.caller-id .dropdown-menu ul li:focus-visible {
    border: 1.5px solid var(--input-border-focused-color);
}

/* DIALERPAD FOCUS CSS :: ENDS */

/* CALL HISTORY FOCUS CSS :: STARTS */
.type-of-call .nav-tabs .nav-link:focus-visible {
    background-color: var(--hover-icon-bg) !important;
    border: 1.5px solid var(--input-border-focused-color);
}

.clear-histroy-button:focus-visible {
    background-color: var(--hover-icon-bg) !important;
    border: 1.5px solid var(--input-border-focused-color);
}

.all-call-item:focus-visible {
    outline: none;
    border-radius: 5px;
    background-color: var(--element-active-bg);
}

.clear-history-dropdown .dropdown-menu li:focus-visible {
    border: 1.5px solid var(--input-border-focused-color);
    border-radius: 4px;
}

.calling-options div:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--element-active-bg);
}

.right-call-detail .header button:focus-visible img {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.clear-history-modal .action-btn button:focus-visible {
    border: 1.5px solid var(--input-border-focused-color);
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

/* CALL HISTORY FOCUS CSS :: ENDS */

/* CONTACT FOCUS CSS :: STARTS */
.contact-list-item.nav li:focus-visible .nav-link {
    border: 1.5px solid var(--input-border-focused-color);
    border-radius: 4px;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.all-contact-list .all-contact-list-item:focus-visible {
    border: 1.5px solid var(--input-border-focused-color);
    border-radius: 4px;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.header-options div.select-option:focus-visible {
    border: 1.5px solid var(--input-border-focused-color);
    border-radius: 4px;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.checkbox:focus-visible {
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.sync-btn:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
    outline: none;
}

.header-options div:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
    border-radius: 4px;
}

/* CONTACT FOCUS CSS :: ENDS */

/* CONTACT DETAIL FOCUS CSS :: STARTS */
.right-side .header.contact-detail-header button:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
    border-radius: 4px;
}

.other-contact-details {
    overflow: clip overlay;
    margin-right: -25px;
    padding-right: 25px;
}

[dir="rtl"] .other-contact-details {
    margin-right: unset;
    padding-right: unset;
    margin-left: -25px;
    padding-left: 25px;
}

.other-contact-details .calling-options div:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

/* CONTACT DETAIL FOCUS CSS :: ENDS */

/* CALLING SCREEN FOCUS CSS :: STARTS */
.call-connecting-header img:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.call-connecting-actions button:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.call-action-buttons button:focus-visible,
.active-call-header button:focus-visible,
.active-call-actions button:focus-visible,
.active-call-actions button:focus-visible,
.main-dialpad .call-buttons .tranfer-call-btn:focus-visible,
.main-dialpad .call-buttons .attandant-call-btn:focus-visible,
.call-button-options button:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.incoming-call-popup .incoming-call-options button:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
}

.active-call-item:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.menu-content .menu-header .accordion-button::after:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.dtmf-dropdown .keypad .digit:focus-visible {
    background-color: var(--element-active-bg);
}

.dialpad-header .close:focus-visible,
.dialpad-header .input-number img:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
}

.active-video-call-actions button:focus-visible,
.active-video-call-screen .active-call-header .back-arrow:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.active-video-call-screen .video-popup-header img:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
}

/* CALLING FOCUS CSS :: ENDS */

/* DASHBOARD FOCUS CSS :: STARTS */
.fav-contact-item .item:focus-visible {
    background-color: var(--element-active-bg);
    border: 1.5px solid var(--input-border-focused-color) !important;
}

.view-all:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
}

/* DASHBOARD FOCUS CSS :: ENDS */

/* MESSAGE FOCUS CSS :: STARTS */
.chat-list-item:focus-visible,
.start-chat .search-arrow:focus-visible,
.chat-suggestion ul li:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.chat-list-item .msz-status-icon {
    margin-right: 0.25rem;
}

.clear-history-dropdown .dropdown-toggle:focus-visible {
    background-color: var(--hover-icon-bg) !important;
    border: 1.5px solid var(--input-border-focused-color);
}

.message-footer .message-footer-option .attachment-option:focus-visible {
    background-color: var(--hover-icon-bg) !important;
    border: 1.5px solid var(--input-border-focused-color);
}

.forward-msg-modal .modal-header button:focus-visible {
    border: 1.5px solid var(--input-border-focused-color);
}


.message-container .chat-options button:focus-visible,
.message-container .close-forward:focus-visible {
    background-color: var(--hover-icon-bg) !important;
    border: 1.5px solid var(--input-border-focused-color);
}

.forward-msg-modal .modal-footer button:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.chat-header-options .group-chat-icon:focus-visible,
.chat-header-options .new-chat-icon:focus-visible,
.chat-header-options .new-message-icon:focus-visible {
    background-color: var(--hover-icon-bg) !important;
    border: 1.5px solid var(--input-border-focused-color);
}

/* MESSAGE FOCUS CSS :: ENDS */

/* SETTING FOCUS CSS :: STARTS */
.setting-list-item.nav-pills .nav-link:focus-visible,
.debugging-content button:focus-visible,
.logout-modal-popup .modal-footer button:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.logout-modal-popup .modal-header button:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
}

.checkbox label:focus-visible {
    outline: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

/* SETTING FOCUS CSS :: ENDS */

/* FORWARD MESSAGE MODAL POPUP CSS :: STARTS */
.forward-msg-modal ul li:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

/* FORWARD MESSAGE MODAL POPUP CSS :: ENDS */

/* CHAT FOCUS CSS :: STARTS */
.chat-container .chat-options .search-text-box .close:focus-visible,
.chat-container .chat-options .search-text-box .arrow:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
}

.chat-footer .attachment-option:focus-visible,
.chat-footer .emoji-option:focus-visible {
    background-color: var(--hover-icon-bg);
    border: 1.5px solid var(--input-border-focused-color) !important;
}

.chat-footer-option .dropdown ul li:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    border-radius: 5px;
}

.capture-options .capture-btn:focus-visible {
    border: 2.5px solid var(--input-border-focused-color) !important;
    border-radius: 5px;
}

.capture-options .cancel-btn:focus-visible {
    border: 2.5px solid var(--input-border-focused-color) !important;
    border-radius: 5px;
}

.chat-footer .send-btn:focus-visible {
    border: 1.5px solid var(--input-border-focused-color) !important;
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

/* CHAT FOCUS CSS :: ENDS */
/* TAB FOCUS CSS :: ENDS */

/* TOOLTIP CSS :: STARTS */
.tooltip,
.tooltip.backButton {
    position: relative !important;
    opacity: 1 !important;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: var(--toolitp-color);
    color: var(--white-color);
    text-align: center;
    padding: 5px 7px;
    position: absolute;
    z-index: 9;
    top: calc(100% + 6px);
    display: flex;
    font-size: 11px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    justify-content: center;
    align-items: center;
    height: 20px;
    border-radius: 4px;
    width: max-content;
    z-index: 9 !important;
}

.tooltip .tooltiptext.left {
    right: 0;
}

[dir="rtl"] .tooltip .tooltiptext.left {
    right: unset;
    left: 0;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.all-call-item .calling-options div .tooltiptext {
    top: 40px;
}

.all-call-item .calling-options .audio-call-otpion .tooltiptext {
    right: 0px;
}

.main-dialpad button.voice-mail-btn:hover .tooltiptext {
    visibility: visible;
}

.main-dialpad .call-buttons button .tooltiptext {
    top: unset;
    bottom: 50px;
}

.main-dialpad button.voice-mail-btn .tooltiptext,
.new-voice-mail .tooltiptext {
    bottom: 55px !important;
    top: unset;
}

.right-call-detail .header .tooltip:first-child .tooltiptext {
    right: 8px
}

.right-call-detail .header .tooltip:last-child .tooltiptext {
    right: -8px;
}

.details .caller-detail .calling-options .tooltip .tooltiptext {
    top: 38px;
}

.all-contact-list .all-contact-list-item .calling-options div .tooltiptext {
    top: 40px;
}

.all-contact-list .all-contact-list-item .calling-options div:last-child .tooltiptext {
    right: -5px;
}

.other-contact-details .calling-options div .tooltiptext {
    top: 38px;
}

.other-contact-details .calling-options div:last-child .tooltiptext {
    right: 0px;
}

.right-side .header ._removeFavcontact .tooltiptext,
.right-side .header ._addFavcontact .tooltiptext {
    right: 0px;
}

.call-connecting-actions button.end-active-call-connecting .tooltiptext,
.active-call-actions button .tooltiptext {
    top: unset;
    bottom: -25px;
}

.call-action-buttons button .tooltiptext {
    top: 33px;
}

.active-video-call-actions button .tooltiptext {
    top: -25px;
}

.logout-modal-popup .modal-header button .tooltiptext {
    top: 40px;
    right: 5px;
}

.hide-show-password .tooltiptext {
    right: 5px;
    top: 20px;
}

.blind-transfer-modal .modal-header button .tooltiptext,
.attandant-transfer-modal .modal-header button .tooltiptext {
    top: 40px;
    right: 5px;
}

.allowed-attachment-modal .modal-header button .tooltiptext {
    top: 45px;
    right: 5px;
}

.forward-msg-modal .modal-header button .tooltiptext {
    right: -5px;
    top: 25px;
}

.menu-content .menu-header h3 a .tooltiptext {
    right: -28px;
}

.new-chat-icon .tooltiptext {
    right: -5px !important;
}

.preview-modal .modal-header .tooltip .tooltiptext {
    top: 45px;
    right: 5px;
}

.right-profile-detail .profile-header span.tooltiptext {
    height: 20px !important;
    top: 20px;
}

/* TOOLTIP CSS :: ENDS */

/* ANIMATION :: STARTS */
/* @keyframes fadeInPage {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
} */

/* ANIMATION :: ENDS */

.iframeset {
    height:calC(100dvh - 58px);
    width: calc(100% - 5px);
    /* Firefox scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-bg) transparent;
}

/* Style iframe scrollbar to match app scrollbar */
.iframeset::-webkit-scrollbar {
    width: 10px;
    height: 5px;
    background: transparent;
}

.iframeset::-webkit-scrollbar-thumb {
    background: var(--scrollbar-bg);
    border-radius: 10px;
}

/* Extended side panel container scrollbar styling */


.extended-side-panel-container::-webkit-scrollbar {
    width: 10px;
    height: 5px;
    background: transparent;
}

.extended-side-panel-container::-webkit-scrollbar-thumb {
    background: var(--scrollbar-bg);
    border-radius: 10px;
}

.extended-side-panel-container {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-bg) transparent;

}


/* BUTTON ANIMATION CSS :: STARTS */
.modal-backdrop.show {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
}

.login-content button,
.enter-password-modal .modal-body button,
.check-mail-content button,
.sip-configuration-content .gradient-btn,
.clear-history-modal .action-btn button,
.message-footer .send-btn,
.debugging-content button,
.logout-modal-popup .modal-footer button,
.forward-msg-modal .modal-footer button,
.chat-footer .send-btn,
.btn-gradient,
.btn-reset,
.meeting-btn {
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    overflow: hidden;
}

.login-content button::before,
.enter-password-modal .modal-body button::before,
.check-mail-content button::before,
.sip-configuration-content .gradient-btn::before,
.clear-history-modal .action-btn button::before,
.message-footer .send-btn::before,
.debugging-content button::before,
.logout-modal-popup .modal-footer button::before,
.forward-msg-modal .modal-footer button::before,
.chat-footer .send-btn::before,
.btn-gradient::before,
.btn-reset::before,
.meeting-btn::before {
    left: -50%;
}

.login-content button::after,
.enter-password-modal .modal-body button::after,
.check-mail-content button:after,
.sip-configuration-content .gradient-btn::after,
.clear-history-modal .action-btn button:after,
.message-footer .send-btn::after,
.debugging-content button::after,
.logout-modal-popup .modal-footer button::after,
.forward-msg-modal .modal-footer button::after,
.chat-footer .send-btn::after,
.btn-gradient::after,
.btn-reset::after,
.meeting-btn::after {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    overflow: hidden;
    background: var(--white-color);
    content: "";
    height: 320px;
    opacity: 0;
    position: absolute;
    top: -90px;
    transform: rotate(35deg);
    transition: all 5000ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 128px;
    left: -100%;
}

.login-content button:hover,
.login-content button:active,
.enter-password-modal .modal-body button:hover,
.enter-password-modal .modal-body button:active,
.check-mail-content button:hover,
.check-mail-content button:active,
.sip-configuration-content .gradient-btn:hover,
.sip-configuration-content .gradient-btn:active,
.clear-history-modal .action-btn button:active,
.clear-history-modal .action-btn button:hover,
.message-footer .send-btn:hover,
.message-footer .send-btn:active,
.debugging-content button:hover,
.debugging-content button:active,
.logout-modal-popup .modal-footer button:hover,
.logout-modal-popup .modal-footer button:active,
.forward-msg-modal .modal-footer button:hover,
.forward-msg-modal .modal-footer button:active,
.chat-footer .send-btn:hover,
.chat-footer .send-btn:active,
.btn-gradient:hover,
.btn-gradient:active,
.btn-reset:hover,
.btn-reset:active,
.meeting-btn:hover,
.meeting-btn:active {
    /* transform: translateY(-1px); */
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
}

.login-content button:hover::before,
.enter-password-modal .modal-body button:hover::before,
.check-mail-content button:hover::before,
.sip-configuration-content .gradient-btn:hover::before,
.clear-history-modal .action-btn button:hover::before,
.message-footer .send-btn:hover::before,
.debugging-content button.send-btn:hover::before,
.logout-modal-popup .modal-footer button:hover::before,
.forward-msg-modal .modal-footer button:hover::before,
.chat-footer .send-btn:hover::before,
.btn-gradient:hover::before,
.btn-reset:hover::before,
.meeting-btn:hover::before {
    left: 120%;
    opacity: 0.5s;
}

.login-content button:hover::after,
.enter-password-modal .modal-body button:hover::after,
.check-mail-content button:hover::after,
.sip-configuration-content .gradient-btn:hover::after,
.clear-history-modal .action-btn button:hover::after,
.message-footer .send-btn:hover::after,
.debugging-content button:hover::after,
.logout-modal-popup .modal-footer button:hover::after,
.forward-msg-modal .modal-footer button:hover::after,
.chat-footer .send-btn:hover::after,
.btn-gradient:hover::after,
.btn-reset:hover::after,
.meeting-btn:hover::after {
    left: 200%;
    opacity: 0.6;
}

/* BUTTON ANIMATION CSS :: ENDS */

/* LOADER CSS :: STARTS */
.progress-div {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.progress-div .progress {
    width: 60px;
    height: 60px !important;
    line-height: 150px;
    background: var(--primary-bg) !important;
    margin: 20px;
    box-shadow: none;
    position: relative;
    border-radius: 100% !important;
    overflow: visible !important;
}

.progress-div .progress:after {
    content: "";
    width: 110%;
    height: 110%;
    border-radius: 50%;
    border: 3px solid var(--primary-bg);
    position: absolute;
    top: -3px;
    left: -5px;
    background-color: var(--primary-bg);
}

.progress-div .progress>span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}

.progress-div .progress .progress-left {
    left: -2px;
}

.progress-div .progress .progress-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 3px;
    border-style: solid;
    position: absolute;
    top: 0px;
}

.progress-div .progress .progress-left .progress-bar {
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}

.progress-div .progress .progress-right {
    right: 2px;
}

.progress-div .progress .progress-right .progress-bar {
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    animation: loading-1 1.8s linear forwards;
}

.progress-div .progress .progress-value {
    width: 94%;
    height: 94%;
    border-radius: 50%;
    background: var(--white-color);
    font-size: 12px;
    color: var(--primary-bg);
    font-weight: 600;
    line-height: 135px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid var(--primary-bg);
    position: absolute;
    top: 2px;
    left: 0px;
    z-index: 9;
}

.progress-div .progress.blue .progress-bar {
    border-color: var(--white-color)
}

.progress-div .progress.blue .progress-left .progress-bar {
    animation: loading-2 1.5s linear forwards 1.8s;
}

@keyframes loading-1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

@keyframes loading-2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

@keyframes loading-3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
}

.loading-text {
    color: var(--input-icon);
    font-size: 17px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: 0.2em;
    margin-bottom: 0px;
    text-transform: uppercase;
}

/* LOADER CSS :: ENDS */

/* COMMON CSS :: STARTS */

/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 5px;
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-bg);
    border-radius: 10px;
}

.tab-content>.active,
.accordion-item {
    height: 100%;
}

.overflow p {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button,
.dropdown-toggle,
.clear-histroy-button {
    cursor: pointer;
}

input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

ul {
    padding: 0px !important;
    margin: 0px !important;
}

li {
    list-style-type: none;
    cursor: pointer;
}

.left-side {
    height: 100%;
}

.middle-content {
    min-width: 360px;
    max-width: 360px;
}

.right-side {
    width: 100%;
    position: relative;
    background-color: transparent;
    overflow: hidden;
    border-left: 1px solid var(--divider-border);
}

.right-side .header:nth-child(1):not(.options-container .header),
.right-side .extended-side-panel-container ~ .header:not(.options-container .header) {
    padding: 25px 20px 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 62px;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--divider-border);
    animation: fadeInPage ease 2s;
}

.right-side .header.contact-detail-header button,
.tooltip.backButton {
    outline: none;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 20px;
    border-radius: 5px;
    -webkit-transition: background-color .8s ease-out;
    -moz-transition: background-color .8s ease-out;
    -o-transition: background-color .8s ease-out;
    transition: background-color .8s ease-out;
}

.right-side .header.contact-detail-header button#backToContactList {
    width: 22px;
    height: 22px;
}

.tooltip.backButton {
    width: 23px;
    justify-content: flex-start;
}

.right-side .header h3 {
    color: var(--black-to-white-text);
    font-size: 17px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 0px;
}

.right-side .divider {
    border-bottom: 1px solid var(--divider-border);
}

.dropdown-toggle {
    text-decoration: none;
}

.dropdown-toggle::after {
    content: unset !important;
}

/* HEADER CLEAR HISTORY DROPDOWN */
.clear-histroy-button {
    display: flex;
    justify-content: center;
    height: 23px;
    width: 23px;
    border-radius: 100%;
    align-items: center;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.clear-histroy-button:hover {
    background-color: var(--hover-icon-bg);
}

.clear-histroy-button.show {
    display: flex !important;
}

.clear-history-dropdown .dropdown-toggle {
    display: flex;
    justify-content: center;
    height: 23px;
    width: 23px;
    border-radius: 100%;
    align-items: center;
    border-radius: 100%;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.clear-history-dropdown .dropdown-toggle.show {
    display: flex !important;
}

.clear-history-dropdown .dropdown-toggle:hover {
    background-color: var(--hover-icon-bg);
}

.clear-history-dropdown .dropdown-menu {
    background-color: var(--input-bg);
    box-shadow: var(--common-box-shadow);
    padding: 10px 5px !important;
    border-radius: 10px;
    border: none;
    top: 13px !important;
}

.clear-history-dropdown .dropdown-menu li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 3px;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.clear-history-dropdown .dropdown-menu li:hover {
    background-color: var(--element-active-bg);
}

.clear-history-dropdown .dropdown-menu li span {
    color: var(--black-to-white-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
}

/* HEADER CLEAR HISTORY DROPDOWN */

/* INPUT FILED CSS :: STARTS */
.input-group-text,
.form-control {
    border: unset !important;
}

.input-group {
    border: 1px solid var(--input-border-color) !important;
    height: 49px !important;
    background-color: var(--input-bg);
    margin-bottom: 15px;
    align-items: center !important;
    border-radius: 3px;
    width: 312px !important;
    transition: all 0.5s ease;
}

.input-group-text {
    background-color: transparent !important;
}

input[type=search],
input[type="text"],
input[type="password"] {
    padding: 0;
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--black-to-white-text) !important;
    background-color: var(--input-bg) !important;
    transition: all 0.5s ease;
}

input[type=search]:focus-visible,
input[type="text"]:focus-visible,
input[type="password"]:focus-visible {
    outline: none;
}

.form-control:focus {
    box-shadow: unset !important;
}

input[type="text"]::placeholder,
.login-content .email-input::placeholder,
.input-group input::placeholder {
    color: var(--placeholder-color);
}

.hide-show-password {
    position: absolute;
    right: 8px;
    font-size: 14px;
    color: var(--input-icon);
    z-index: 999;
}

/* PROTOCOL SELECT DROPDOWN */
.protocol-select-wrapper {
    position: relative;
    flex: 0 0 auto;
    width: 100px;
    min-width: 100px;
}

#protocolSelect {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left: 2.25rem;
    padding-right: 1.75rem;
    outline: none;
    box-shadow: none;
    border: none;
    background-image: none;
    height: 46px;
    border-right: 1px solid var(--input-border-color);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 11px;
    width: 100%;
    white-space: nowrap;
    color: var(--black-to-white-text) !important;
    background-color: var(--input-bg) !important;
}

#protocolSelect::-ms-expand {
    display: none;
}

#protocolSelect:focus {
    outline: none;
    box-shadow: none;
    border: none;
    border-right: 1px solid var(--input-border-color);
}

.protocol-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
}

.protocol-chevron {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
}

/* Dropdown options list - browsers control this, but we ensure consistent appearance */
#protocolSelect option {
    padding: 0.5rem;
    background-color: var(--white-color, #fff);
    color: var(--text-gray-to-white);
    border: 1px solid var(--input-border-color);
    border-bottom: 1px solid var(--input-border-color);
    height: 40px;
    line-height: 40px;
    min-height: 40px;
}

#protocolSelect option:not(:last-child) {
    border-bottom: 1px solid var(--input-border-color);
    color: var(--black-to-white-text) !important;
    background-color: var(--input-bg) !important;
}

#protocolSelect option:first-child {
    border-top: 1px solid var(--input-border-color);
    color: var(--black-to-white-text) !important;
    background-color: var(--input-bg) !important;
}

#protocolSelect option:last-child {
    border-bottom: 1px solid var(--input-border-color);
    color: var(--black-to-white-text) !important;
    background-color: var(--input-bg) !important;
}

/* CHECKBOX */

.all-contact-list-item .form-check-input,
.call-pop-model .form-check-input {
    border: 1px solid var(--gray-color);
    width: 14px !important;
    height: 14px !important;
    width: 14px !important;
    height: 14px !important;
    padding: 0px !important;
    margin: 0px !important;
    border-radius: .25em;
    border-radius: .25em;
}


.all-contact-list-item .form-check-input:checked,
.call-pop-model .form-check-input:checked {
    background-color: var(--primary-bg) !important;
    border: 1px solid var(--primary-bg) !important;
}

.all-contact-list-item .form-check-input:focus,
.call-pop-model .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(97, 75, 152, 0.3) !important;
}

/* COMMON CSS FOR CALL HISTORY :: ENDS */

/* INPUT FIELD CSS :: ENDS */
.error-box {
    border: 1px solid var(--call-decline-red) !important;
}

.error-box svg path {
    fill: var(--call-decline-red) !important;
}

.error-box input[type="text"],
.error-box input[type="password"],
.error-box input[type="text"]::placeholder,
.error-box input[type="password"]::placeholder {
    color: var(--call-decline-red) !important;
}

.error {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: center;
    color: var(--call-decline-red) !important;
}

.not-delivered,
.failed-to-download {
    font-size: 8px;
    font-weight: 500;
    line-height: 12px;
    letter-spacing: 0em;
    color: var(--chat-counter);
    margin: 0px 5px;
}

.retry {
    display: flex;
    align-items: center;
    font-size: 9px;
    font-weight: 400;
    line-height: 13px;
    letter-spacing: 0em;
    color: var(--chat-counter);
    gap: 3px;
    margin: 5px 0px;
}

.retry .media-size {
    margin-bottom: -2px !important;
}

.retry-icon {
    top: 12px;
    left: 6px;
    width: 20px;
    height: 20px;
}

.uploading,
.downloading {
    color: var(--input-icon);
    font-size: 8px;
    font-weight: 400;
    line-height: 12px;
    letter-spacing: 0em;
    margin: 0px 5px;
}

.invalidBtn {
    background: var(--error-background-color);
    opacity: 0.9;
    border: 0.8px solid var(--chat-counter);
    height: 27px;
    min-width: 135px;
    width: fit-content !important;
    margin: auto;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}

.SuccessfulBtn {
    background: rgba(38, 171, 35, 0.4);
    opacity: 0.9;
    border: 0.8px solid var(--call-activity-green);
    padding: 3px 10px;
    width: fit-content !important;
    margin: auto;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.SuccessfulBtn-text {
    color: var(--black-to-white-text);
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
}

/* COMMON CSS :: ENDS */

/* MODAL CSS :: STARTS */

.modal-backdrop {
    z-index: 1100;
}

.modal {
    overflow-y: hidden !important;
    z-index: 1110;
}

.modal-header {
    border-bottom: unset !important;
}

.modal-header [data-bs-dismiss="modal"] {
    cursor: pointer;
    user-select: none;
}

.modal-header button:not(.close-btn) {
    height: unset !important;
    width: unset !important;
    background-color: unset !important;
    background: unset !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    padding: 0px !important;
    width: 13px !important;
    height: 13px !important;
    opacity: 1;
}

.modal-content {
    border-radius: 18px !important;
    border: unset !important;
    background-color: var(--modal-bg) !important;
}

.modal button:hover {
    box-shadow: var(--common-box-shadow);
}

#addContactToForwardDiv .modal-dialog {
    margin-block: 1rem;
}

/* ENTER PASSWORD MODAL POPUP :: STARTS */
.enter-password-modal .modal-dialog {
    width: 408px;
}

.enter-password-modal .modal-body {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    padding: 5px 48px 35px 48px !important;
}

.enter-password-modal .modal-body .input-group {
    width: 312px !important;
    direction: ltr;
}

.enter-password-modal .modal-header h5 {
    color: var(--text-dark-gray-to-white);
    font-size: 27px;
    font-weight: 700;
    line-height: 33px;
    letter-spacing: 0em;
    margin-bottom: 25px;
    padding-left: 30px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.enter-password-modal .modal-header button {
    position: absolute !important;
    top: 20px;
    right: 20px;
    height: 20px !important;
    width: 20px !important;
    border: unset;
    outline: unset;
    display: flex;
    justify-content: center;
    align-items: center;
}

.enter-password-modal .modal-header button img {
    width: 15px;
    height: 15px;
}

.enter-password-modal .modal-header button:focus {
    border: 1.5px solid var(--input-border-focused-color);
}

.enter-password-modal .modal-body button {
    width: 100%;
    height: 40px;
    border-radius: 3px;
    margin-bottom: 15px;
    border: none;
    outline: none;
    background-color: var(--primary-bg);
    color: var(--white-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: 0em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 312px;
    background: var(--btn-gradient);
    font-weight: 700 !important;
    margin-top: 15px;
}

/* ENTER PASSWORD MODAL POPUP :: ENDS */

/* CLEAR HISTORY MODAL POPUP :: STARTS */
.clear-history-modal .modal-dialog {
    width: 408px;
}

.clear-history-modal .modal-body {
    padding: 35px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.clear-history-modal .modal-body img {
    margin-bottom: 20px;
}

.clear-history-modal .modal-body h3,
.call-pop-model .modal-content h3 {
    color: var(--text-dark-gray-to-white);
    font-size: 19px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: 0em;
    text-align: center;
    margin-bottom: 30px;
}

.call-pop-model .call_row svg {
    height: 20px;
    width: 15px;
}

.call-pop-model .modal-content .btn-close {
    right: 15px;
}

.call-pop-model .call_row span,
.call-pop-model .form-check-label {
    font-size: 14px;
    color: var(--text-dark-gray-to-white);
}

.call-pop-model .form-check-label {
    font-weight: 500;
}

.clear-history-modal .action-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.clear-history-modal .action-btn button {
    width: 115px;
    height: 42px;
    display: block;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
    border-radius: 42px;
}

.clear-history-modal .action-btn .cancel-btn {
    outline: none;
    border: 1px solid var(--gray-color);
    color: var(--text-gray-to-white);
    background-color: transparent;
}

.clear-history-modal .action-btn .confirm-btn {
    background: var(--btn-gradient);
    color: var(--white-color);
    outline: none;
    border: none;
}

/* CLEAR HISTORY MODAL POPUP :: ENDS */

/* PROFILE PICTURE MODAL POPUP :: STARTS */
.profile-picture-modal .modal-dialog {
    width: 410px;
}

.profile-picture-modal .modal-header {
    background: var(--header-gadient);
    border-radius: 17px 17px 0px 0px;
    height: 58px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-picture-modal .modal-header h5 {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 0px;
}

.profile-picture-modal .modal-header button {
    outline: none;
    border: none;
    background: unset;
    width: unset !important;
    height: unset !important;
    display: flex;
}

.profile-picture-modal .modal-body {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 22px;
}

.profile-picture-modal .modal-body img {
    height: 89px;
    width: 89px;
    border-radius: 50%;
}

.profile-picture-modal .modal-body .upload-pic-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}

.profile-picture-modal .modal-body .upload-pic-content button {
    width: 360px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    outline: none;
    border-radius: 10px;
}

.profile-picture-modal .modal-body .upload-pic-content img {
    height: unset;
    width: unset;
    border-radius: unset;
}

.profile-picture-modal .take-photo {
    border: 1px dashed var(--blue-color);
    color: var(--blue-color);
    background-color: transparent;
}

.profile-picture-modal .upload-photo {
    position: relative;
    overflow: hidden;
    display: inline-block;
    background-color: var(--primary-bg);
    color: var(--white-color);
    border: none;
    outline: none;
}

.profile-picture-modal .upload-photo input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.profile-picture-modal .modal-footer {
    border-top: unset !important;
    padding-top: 10px;
}

.profile-picture-modal .modal-footer button {
    width: 115px;
    height: 42px;
    border-radius: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
    outline: none;
}

.profile-picture-modal .modal-footer .cancel-btn {
    border: 1px solid var(--gray-color);
    color: var(--text-gray-to-white);
    background-color: transparent;
}

.profile-picture-modal .modal-footer .save-btn {
    border: none;
    color: var(--white-color);
    background-color: var(--primary-color);
}

/* PROFILE PICTUR MODAL POPUP CSS :: ENDS */

/* LOGOUT MODAL POPUP CSS :: STARTS */
.logout-modal-popup .modal-dialog,
.take-photo-modal .modal-dialog {
    width: 408px;
    border-radius: 18px;
    z-index: 99999;
    margin: 0 auto;
    max-width: 90%;
}

.logout-modal-popup .modal-header {
    height: 57px;
    background: var(--header-gadient);
    border-radius: 18px 18px 0px 0px;
}

.logout-modal-popup .modal-header h5 {
    color: var(--white-color);
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0em;
}

.logout-modal-popup .modal-header button {
    background: unset !important;
    width: 17px !important;
    background: unset;
    height: 17px !important;
    position: unset !important;
    border: unset !important;
    outline: unset !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logout-modal-popup .modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 30px 15px;
    gap: 15px;
}

.logout-modal-popup.mobile-enter .modal-body {
    padding: 20px 15px;
}

/* .logout-modal-popup.mobile-enter .modal-body {
    padding: 20px 15px;
} */

.logout-modal-popup .modal-body p {
    color: var(--black-to-white-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 0em;
    text-align: center;
}

.logout-modal-popup .modal-footer {
    border-top: unset;
    justify-content: center !important;
}

#new-version.logout-modal-popup .modal-footer {
    justify-content: flex-end !important;
}

.logout-modal-popup .modal-footer button,
.btn-gradient,
.btn-reset {
    height: 42px;
    min-width: 115px;
    border-radius: 43px;
    outline: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
}

.logout-modal-popup.largFile-modal .modal-footer button {
    height: 30px;
    min-width: 100px;
    font-size: 14px;
}

.logout-modal-popup .modal-footer .cancel-btn {
    color: var(--text-gray-to-white);
    border: 1px solid var(--gray-color);
    background-color: transparent;
}

.logout-modal-popup .modal-footer .gradient-btn,
.btn-gradient {
    color: var(--white-color);
    background: var(--btn-gradient);
    border: none;
}

.btn-reset {
    color: var(--text-gray-to-white);
    border: 1px solid var(--gray-color);
    background-color: transparent;
}

/* LOGOUT MODAL CSS :: ENDS */

/* BLIND TRANSFER MODAL CSS :: STARTS */
.blind-transfer-modal .modal-dialog {
    width: 408px;
    border-radius: 18px;
    margin: 0 auto;
    max-width: 90%;
}

.blind-transfer-modal .modal-header {
    height: 50px;
    background: var(--header-gadient);
    border-radius: 18px 18px 0px 0px;
}

.blind-transfer-modal .modal-header h5 {
    color: var(--white-color);
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: 0em;
}

.blind-transfer-modal .modal-header button {
    background: unset !important;
    width: 17px !important;
    background: unset;
    height: 17px !important;
    position: unset;
    border: unset !important;
    outline: unset !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blind-transfer-modal .modal-body {
    padding: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.blind-transfer-modal .modal-body img {
    margin-bottom: 35px;
}

.blind-transfer-modal .modal-body p {
    color: var(--text-dark-gray-to-white);
    font-size: 19px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0em;
    margin-bottom: 10px;
    width: 70%;
    text-align: center;
}

.blind-transfer-modal .modal-body span {
    color: var(--text-dark-gray-to-white);
    font-size: 17px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0em;
    margin-bottom: 10px;
}

/* BLIND TRANSFER MODAL CSS :: EDNS */

/* ATTANDANT TRANSFER MODAL CSS :: STARTS */
.attandant-transfer-modal .modal-dialog {
    width: 408px;
    border-radius: 18px;
}

.attandant-transfer-modal .modal-header {
    height: 50px;
    background: var(--header-gadient);
    border-radius: 18px 18px 0px 0px;
}

.attandant-transfer-modal .modal-header h5 {
    color: var(--white-color);
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: 0em;
}

.attandant-transfer-modal .modal-header button {
    background: unset !important;
    width: 17px !important;
    background: unset;
    height: 17px !important;
    position: unset;
    border: unset !important;
    outline: unset !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.attandant-transfer-modal .modal-body {
    padding: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.attandant-transfer-modal .modal-body img {
    margin-bottom: 35px;
}

.attandant-transfer-modal .modal-body p {
    color: var(--text-dark-gray-to-white);
    font-size: 19px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0em;
    margin-bottom: 10px;
    width: 70%;
    text-align: center;
}

.attandant-transfer-modal .modal-body span {
    color: var(--text-dark-gray-to-white);
    font-size: 17px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0em;
    margin-bottom: 10px;
}

/* ATTANDANT TRANSFER MODAL CSS :: EDNS */

/* CHAT FORWARD MODAL CSS :: STARTS */
.forward-msg-modal .modal-dialog {
    width: 448px;
}

.forward-msg-modal .modal-header {
    background: var(--header-gadient);
    height: 50px;
    border-radius: 18px 18px 0px 0px;
}

.forward-msg-modal .modal-header button {
    width: 16px !important;
    height: 16px !important;
    display: flex;
    position: absolute !important;
    top: 17px;
    border: unset;
    outline: unset;
    right: 20px;
}

.forward-msg-modal .modal-header h5 {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
    color: var(--white-color);
}

.forward-msg-modal .modal-header img {
    width: 13px;
    height: 13px;
}

.forward-msg-modal .modal-searchbar {
    width: 100%;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
}

.forward-msg-modal .modal-searchbar input[type="search"] {
    width: 100%;
    height: 100%;
    border: 1px solid var(--input-border-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    border-radius: 28px;
    padding: 5px 40px 5px 15px;
}

.forward-msg-modal .modal-searchbar .search-icon {
    width: 32px;
    height: 32px;
    background-color: var(--primary-bg);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 4px;
}

.forward-msg-modal .list h3 {
    font-size: 16px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
    margin: 10px 0px;
}

.forward-msg-modal .modal-body {
    padding: 20px;
}

.forward-msg-modal .list ul {
    height: 300px;
    width: 100%;
    overflow-y: overlay;
    overflow-x: hidden;
}

.forward-msg-modal ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px 6px 5px;
}

.forward-msg-modal ul li:hover {
    background-color: var(--hover-light-bg);
}

.forward-msg-modal ul li:not(:last-child) {
    border-bottom: 0.5px solid var(--divider-border);
}

.forward-msg-modal .list-detail {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
}

.forward-msg-modal .list-detail .img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--primary-bg);
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 21px;
    font-weight: 500;
    line-height: 31px;
    letter-spacing: 0em;
    text-transform: uppercase;
}

.forward-msg-modal .list-detail .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.forward-msg-modal .list-detail .name p {
    color: var(--black-to-white-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    margin-bottom: 0px;
}

.forward-msg-modal .list-detail .name span {
    color: var(--text-dark-gray-to-white);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    max-width: 300px;
    overflow: hidden;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.forward-msg-modal .modal-footer {
    border-top: 1px solid var(--divider-border);
    justify-content: space-between;
    align-items: flex-start;
}

.forward-msg-modal .modal-footer button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: var(--btn-gradient);
    outline: none;
    border: none;
    padding: 10px 15px 10px 15px;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
    height: 40px;
    border-radius: 42px;
    color: var(--white-color);
}

.forward-msg-modal .selected-list-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    max-height: 110px;
    overflow-y: overlay;
}

.forward-msg-modal .selected-list-item div {
    background: var(--hover-dark-bg);
    padding: 3px 8px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
    flex-shrink: 0;
}

.forward-msg-modal .suggestion-list {
    position: absolute;
    transform: translate(0px, 42px) !important;
    border-radius: 16px;
    width: 100%;
    max-height: 210px;
    border: 0.77px solid var(--input-border-color);
    background: var(--input-bg);
    box-shadow: var(--common-box-shadow);
    padding: 10px;
    top: 0;
    z-index: 99;
}

.forward-msg-modal .suggestion-list ul {
    max-height: 195px;
    overflow-y: overlay;
    overflow-x: hidden;
}

.forward-msg-modal .suggestion-list ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
}

.forward-msg-modal .suggestion-list ul li .img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--primary-bg);
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0em;
    text-transform: uppercase;
}

.forward-msg-modal .suggestion-list ul li .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.forward-msg-modal .suggestion-list ul li p {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
    margin-left: 10px;
}

.forward-msg-modal .checkbox {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.forward-msg-modal .checkbox label:after {
    width: 7px;
    right: 4px;
    top: 4.5px;
    opacity: 1;
}

.forward-msg-modal .suggestion-list .checkbox {
    width: 14px;
    height: 14px;
}

.forward-msg-modal .suggestion-list .checkbox label:after {
    width: 6px;
    opacity: 1;
    right: 3px;
    top: 3px;
}

/* CHAT FORWARD MODAL CSS :: ENDS */

/* ADD MEMBER TO GROUP MODAL CSS :: STARTS */
.add-member-modal .modal-dialog {
    width: 448px;
    margin-top: 0px;
}

.add-member-modal .modal-header {
    background: var(--header-gadient);
    height: 50px;
    border-radius: 18px 18px 0px 0px;
}

.add-member-modal .modal-header h5 {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
    color: var(--white-color);
}

.add-member-modal .modal-header img {
    width: 13px;
    height: 13px;
}

.add-member-modal .modal-searchbar {
    width: 100%;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
}

.add-member-modal .modal-searchbar input[type="search"] {
    width: 100%;
    height: 100%;
    border: 1px solid var(--gray-color-lighter);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    border-radius: 28px;
    padding: 5px 15px;
}

.add-member-modal .modal-searchbar .search-icon {
    width: 32px;
    height: 32px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 4px;
}

.add-member-modal .list h3 {
    font-size: 16px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
    margin: 10px 0px;
}

.add-member-modal .modal-body {
    padding: 20px;
}

.add-member-modal .list ul {
    max-height: 335px;
    width: 100%;
    overflow-y: overlay;
}

.add-member-modal ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px 6px 5px;
    position: relative;
}

.add-member-modal ul li:not(:last-child) {
    border-bottom: 0.5px solid var(--divider-border);
}

.add-member-modal .list-detail {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
}

.add-member-modal .list-detail .img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--primary-bg);
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: 0em;
    text-transform: uppercase;
}

.add-member-modal .list-detail .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.add-member-modal .list-detail .name p {
    color: var(--black-to-white-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    margin-bottom: 0px;
}

/* ADD MEMBER TO GROUP MODAL CSS :: ENDS */

/* SHARED MEDIA PREVIEW SLIDER :: STARTS */
.media-preview-modal {
    height: calc(100dvh - 50px);
    bottom: 0;
    top: unset;
    z-index: 1080;
}

.media-preview-modal .modal-dialog {
    margin: 0px;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

.media-preview-modal .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: unset;
    padding: 22px 20px;
}

.media-preview-modal .modal-body {
    padding: 0px;
}

.media-preview-modal .modal-content {
    border-radius: 0px !important;
    height: 100%;
}

.media-preview-modal .attachment-preview .carousel {
    padding: 0px;
    height: unset;
}

.media-preview-modal .attachment-preview .user-name-info .img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.media-preview-modal .attachment-preview .user-name-info .name p {
    margin-bottom: 0px;
    font-size: 19px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
}

.media-preview-modal .attachment-preview .user-name-info .name span {
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
}

.media-preview-modal .attachment-preview .carousel-inner {
    background-color: unset;
    height: calc(100dvh - 255px);
}

.media-preview-modal .attachment-preview .carousel-item {
    margin-bottom: 0px !important;
    height: 100%;
}

.media-preview-modal .attachment-preview .carousel-item .preview-item {
    height: 375px;
}

.media-preview-modal .attachment-preview .carousel-item .preview-item img:first-child {
    height: 340px;
    width: 340px;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
}

.media-preview-modal .attachment-preview .carousel-item .preview-item .document img {
    width: unset;
    height: unset;
}

.media-preview-modal .xdContainer {
    width: -webkit-fill-available;
    height: 290px;
}

.media-preview-modal #seek {
    height: 7px;
}

.carousel-control-prev-icon {
    background-image: url(../../assets/img-new/prev.svg) !important;
    background-size: unset !important;
}

.carousel-control-next-icon {
    background-image: url(../../assets/img-new/next.svg) !important;
    background-size: unset !important;
}

.media-preview-modal .xdContainer .plybtn button {
    width: 24px !important;
    height: 24px !important;
}

.media-preview-modal .audio-player {
    width: 550px;
    margin-top: 80px;
}

.media-preview-modal .audio-player .audioplayer {
    width: 100%;
}

.media-preview-modal .audio-player .audioplayer-bar::before {
    top: 0px;
    width: 100%;
    height: 14px;
}

.media-preview-modal .audioplayer-bar>div {
    height: 14px;
    top: -1px;
}

.media-preview-modal .audioplayer-playpause {
    width: 32px;
    height: 32px;
    margin-right: 5px;
}

.media-preview-modal .audioplayer-bar {
    margin: 0px 0px 0px 5px;
    width: 100%;
}

.media-preview-modal .audioplayer-volume {
    display: none;
}

.media-preview-modal .audio-player .audioplayer-time {
    width: 45px;
    font-size: 14px;
}

.media-preview-modal .attachment-preview .caption {
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    position: unset !important;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.media-preview-modal .attachment-preview .carousel-indicators .indicator-items {
    width: auto;
    max-width: 95%;
    overflow-x: overlay;
    height: 130px;
    gap: 7px;
    margin: auto;
}

.media-preview-modal .attachment-preview .carousel-indicators .indicator-items div {
    width: 75px;
    height: 75px;
    border: unset;
    cursor: pointer;
    user-select: none;
}

.media-preview-modal .attachment-preview .carousel-indicators .indicator-items .play-pause-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.carousel-control-next,
.carousel-control-prev {
    width: 25px !important;
    height: 25px !important;
    border-radius: 50%;
    border: none;
    outline: none;
    background-color: var(--gray-color-lighter) !important;
    top: 50% !important;
    bottom: unset !important;
    opacity: 1 !important;
    box-shadow: 0px 1.4222222566604614px 2.133333444595337px 0px #00000040;
}

.carousel-control-prev {
    left: 75px !important;
}

.carousel-control-next {
    right: 75px !important;
}

/* SHARED MEDIA PREVIEW SLIDER :: ENDS */

/* ALLOWED ATTACHMENT MODAL CSS :: STARTS */
.allowed-attachment-modal .modal-dialog {
    width: 575px;
    margin-top: 0px;
}

.allowed-attachment-modal .modal-header {
    background: var(--header-gadient);
    border-radius: 18px 18px 0px 0px;
}

.allowed-attachment-modal .modal-header h5 {
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0em;
    color: var(--white-color);
}

.allowed-attachment-modal .modal-header button {
    background: unset !important;
    width: 17px !important;
    background: unset;
    height: 17px !important;
    position: unset;
    border: unset !important;
    outline: unset !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.allowed-attachment-modal .modal-body p {
    color: var(--black-to-white-text);
    font-size: 17px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0em;
    text-align: center;
    margin-top: 15px;
}

.largFile-modal .modal-dialog {
    width: 575px;
}

.largFile-modal .modal-header {
    height: 41px;
}

.largFile-modal .modal-header h5 {
    font-size: 16px;
    line-height: 24px;
}

.largFile-modal .modal-body {
    padding: 16px;
    text-align: unset;
    display: block;
}

.largFile-modal .modal-body p {
    text-align: unset;
    font-size: 12.07px;
    line-height: 20px;
    color: var(--black-to-white-text);
}

.largFile-modal .modal-footer {
    justify-content: flex-end !important;
}

#removeMemberConfirmation.largFile-modal .modal-footer {
    justify-content: center !important;
}

/* ALLOWED ATTACHMENT MODAL CSS :: ENDS */

/* UPDATE NAME MODAL CSS :: STARTS */
.update-name-modal .modal-dialog {
    width: 408px;
    margin-top: 0px;
}

.update-name-modal .modal-header {
    height: 57px;
    background: var(--header-gadient);
    border-radius: 18px 18px 0px 0px;
}

.update-name-modal .modal-header h5 {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0em;
}

.update-name-modal .modal-body {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 22px 20px;
}

.update-name-modal .modal-body input[type="text"] {
    width: 100%;
    height: 38px;
    border: 1px solid var(--gray-color-lighter);
    padding: 10px 20px;
    color: var(--text-dark-gray-to-white);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    border-radius: 25px;
}

.update-name-modal .modal-footer {
    border-top: unset;
    padding-top: 0px;
    padding-bottom: 25px;
}

.update-name-modal .modal-footer button {
    min-width: 115px;
    height: 40px;
    border-radius: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 25px;
    letter-spacing: 0em;
    outline: none;
}

.update-name-modal .modal-footer .cancel-btn {
    color: var(--text-gray-to-white);
    border: 1px solid var(--gray-color);
    background-color: transparent;
}

.update-name-modal .modal-footer .save-btn {
    background: var(--btn-gradient);
    color: var(--white-color);
    border: none;
}

/* UPDATE NAME MODAL CSS :: ENDS */

/* UPDATE PHOTO MODAL CSS :: STARTS */
.update-photo-modal .modal-dialog {
    width: 408px;
    margin-top: 0px;
    max-width: 90%;
    margin: 0 auto;
}

.update-photo-modal .modal-header {
    height: 57px;
    background: var(--header-gadient);
    border-radius: 18px 18px 0px 0px;
}

.update-photo-modal .modal-header h5 {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0em;
}

.update-photo-modal .modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}

.update-photo-modal .default-photo {
    width: 90px;
    height: 90px;
    border-radius: 100%;
    margin-bottom: 20px;
}

.update-photo-modal .default-photo .emptygrpimg {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-bg);
    color: var(--white-color);
    border-radius: 50rem;
    width: 100%;
    height: 100%;
    font-size: 32px;
    font-weight: 500;
}

.update-photo-modal .default-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.update-photo-modal .take-photo-btn {
    border-radius: 10px;
    height: 48px;
    width: 100%;
    background-color: transparent;
    border: 1px dashed var(--blue-color);
    color: var(--blue-color);
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 15px;
}

.update-photo-modal .file-input {
    width: 100%;
    margin-bottom: 15px;
}

.update-photo-modal .file-input__input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.update-photo-modal .file-input__label {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 10px;
    height: 48px;
    width: 100%;
    color: var(--white-color);
    background-color: var(--primary-bg);
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
}

.update-photo-modal .delete-btn {
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    color: var(--chat-counter);
    margin-bottom: 5px;
}

.status-wrapper {
    margin-top: 1rem;
}

.status-wrapper .view-status-box {
    display: flex;
    border-radius: 13px;
    border: 2px solid var(--divider-border);
    padding: 12px 14px;
    cursor: pointer;
}

.status-wrapper .view-status-box .status-label,
.status-wrapper .add-status-box .status-label {
    font-size: 13.8px;
    color: var(--text-dark-gray-to-white);
}

.status-wrapper .view-status-box .status-text {
    font-size: 12px;
    color: var(--black-to-white-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2em;
    max-height: 2.4em;
}

.status-wrapper.add-status .view-status-box,
.status-wrapper:not(.add-status) .add-status-box,
.status-wrapper:not(.add-status) .updat-status-buttons {
    display: none;
}

.status-wrapper .add-status-box {
    padding: 12px 14px;
    padding-bottom: 0;
    border-bottom: 2px solid var(--primary-bg);
}

.status-wrapper .add-status-box .add-status-input {
    font-size: 18px;
    color: var(--black-to-white-text);
    padding: 8px 0;
    outline: none !important;
    border: none !important;
}

.status-wrapper .add-status-box .word-limit {
    font-size: 11.5px;
    color: var(--text-gray-to-white);
    align-self: flex-end;
    padding-bottom: 8px;
}

.status-wrapper .updat-status-buttons {
    display: flex;
}

.status-wrapper .updat-status-buttons .btn {
    color: var(--input-icon);
    font-size: 15px;
}

/* UPDATE PHOTO MODAL CSS :: ENDS */

/* TAKE PHOTO MODAL CSS :: STARTS */
.take-photo-modal .modal-dialog {
    width: 408px;
    margin-top: 0px;
}

.take-photo-modal .modal-header {
    height: 57px;
    background: var(--header-gadient);
    border-radius: 18px 18px 0px 0px;
}

.take-photo-modal .modal-header h5 {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0em;
}

.take-photo-modal .modal-body {
    padding: 0px;
}

.take-photo-modal .photo-area {
    width: 100%;
    height: 280px;
    background-color: var(--black-to-white-text);
}

.take-photo-modal .modal-footer button {
    min-width: 115px;
    height: 40px;
    border-radius: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 25px;
    letter-spacing: 0em;
    outline: none;
}

.take-photo-modal .modal-footer .cancel-btn {
    color: var(--text-gray-to-white);
    border: 1px solid var(--gray-color);
    background-color: transparent;
}

.take-photo-modal .modal-footer .save-btn {
    background: var(--btn-gradient);
    color: var(--white-color);
    border: none;
}

/* TAKE PHOTO MODAL CSS :: ENDS */

/* IMPORT CHAT MODAL CSS :: STARTS */
.import-chat-modal .modal-dialog {
    width: 408px;
    margin-top: 0px;
}

.import-chat-modal .modal-header {
    height: 57px;
    background: var(--header-gadient);
    border-radius: 18px 18px 0px 0px;
}

.import-chat-modal .modal-header h5 {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0em;
}

.import-chat-modal .modal-body {
    padding: 20px;
}

.import-chat-modal .import-area {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 18px;
    text-align: center;
    border: 0.71px dashed #BDBDBD;
    border-radius: 11px;
}

.import-chat-modal .import-area img {
    margin-bottom: 15px;
}

.import-chat-modal .import-area p {
    color: var(--black-to-white-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: center;
    margin-bottom: 15px;
}

.import-chat-modal .file-input__input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.import-chat-modal .file-input__label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: var(--black-to-white-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: 0em;
}

.import-chat-modal .file-input__label span:nth-child(1) {
    color: var(--blue-color);
}

.import-chat-modal .file-input__label svg {
    height: 16px;
    margin-right: 4px;
}

.import-chat-modal .imported-file {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.import-chat-modal .imported-file .icon {
    width: 45px;
    height: 45px;
    border-radius: 9px;
    margin-right: 12px;
}

.import-chat-modal .imported-file .icon img {
    width: 100%;
    height: 100%;
    border-radius: 9px;
    object-fit: cover;
}

.import-chat-modal .imported-file p {
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
}

.import-chat-modal .imported-file span {
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    color: var(--text-gray-to-white);
}

.import-chat-modal .modal-footer {
    border-top: 0px;
    padding-top: 0px;
}

.import-chat-modal .modal-footer button {
    min-width: 115px;
    height: 40px;
    border-radius: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 25px;
    letter-spacing: 0em;
    outline: none;
}

.import-chat-modal .modal-footer .cancel-btn {
    color: var(--text-gray-to-white);
    border: 1px solid var(--gray-color);
    background-color: transparent;
}

.import-chat-modal .modal-footer .save-btn {
    background: var(--btn-gradient);
    color: var(--white-color);
    border: none;
}

/* IMPORT CHAT MODAL CSS :: ENDS */

/* EXPORT CHAT MODAL CSS :: STARTS */
.export-chat-modal .modal-dialog {
    width: 408px;
    margin-top: 0px;
}

.export-chat-modal .modal-header {
    height: 57px;
    background: var(--header-gadient);
    border-radius: 18px 18px 0px 0px;
}

.export-chat-modal .modal-header h5 {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0em;
}

.export-chat-modal .modal-body {
    padding: 20px;
}

.export-chat-modal .export-area {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 18px;
    text-align: center;
}

.export-chat-modal .export-area img {
    margin-bottom: 15px;
}

.export-chat-modal .export-area p {
    color: var(--black-to-white-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: center;
    margin-bottom: 15px;
}

/* EXPORT CHAT MODAL CSS :: ENDS */

/* MMS PREVIEW MODAL CSS :: STARTS */
.preview-modal .modal-dialog {
    max-width: 525px;
    margin-top: 0px;
}

.preview-modal .modal-header {
    background: var(--header-gadient);
    display: flex;
    align-items: center;
    border-radius: 18px 18px 0px 0px;
}

.preview-modal .modal-header h5 {
    color: var(--white-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
}

.preview-modal .modal-header button {
    display: flex;
    justify-content: center;
    align-items: center;
    border: unset;
    outline: unset;
    height: 13px !important;
    width: 13px !important;
    position: unset !important;
}

.preview-modal .modal-content {
    border-radius: 18px 18px 0px 0px !important;
}

.preview-modal .modal-body {
    padding: 0px;
}

.preview-modal .modal-body .preview-area {
    width: 525px;
    height: 310px;
}

.preview-modal .modal-body .preview-area img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    position: relative;
}

.preview-modal .modal-body .preview-area::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 59.41%, #000000 95.98%);
    opacity: 0.6;
    z-index: -1;
}

.preview-modal .modal-body .xdContainer video {
    border-radius: 0px !important;
    object-fit: cover;
}

/* MMS PREVIEW MODAL CSS :: ENDS */

/* MODAL CSS :: ENDS */

/* ERROR PAGE CSS :: STARTS */
.no-calls-found {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: fadeInPage ease 2s;
    width: 100%;
    height: 100%;
}

.no-calls-found p {
    color: var(--black-to-white-text);
    font-size: 19px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: 0em;
    margin-top: 20px;
    margin-bottom: 0px;
}

/* ERROR PAGE CSS :: ENDS */

/* CHECK BOX CSS :: STARTS */
.checkbox {
    width: 13px;
    height: 13px;
    position: relative;
}

.checkbox label {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
    background-color: var(--white-color);
    border-radius: 50px;
    border: 1px solid var(--gray-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkbox label:hover {
    box-shadow: 0 0 0 4px var(--input-shadow-color);
}

.checkbox label:after {
    content: '';
    width: 6px;
    height: 4px;
    border: 1.5px solid var(--gray-color);
    border-top: none;
    border-right: none;
    background: transparent;
    transform: rotate(-45deg);
    position: absolute;
    top: 3px;
    right: 3px;
    opacity: 0;
}

.checkbox input[type=checkbox] {
    visibility: hidden;
}

.checkbox input[type=checkbox]:checked+label,
.checkbox input[type=radio]:checked+label {
    background-color: var(--primary-bg);
    border: 1px solid var(--primary-bg);
}

.checkbox input[type=checkbox]:checked+label:after,
.checkbox input[type=radio]:checked+label:after {
    opacity: 1;
    border-color: var(--white-color);
}


.checkbox input[type=checkbox]+label:after {
    border-color: var(--white-color);
}

/* CHECK BOX CSS :: ENDS */

/* TOGGLE BUTTON :: STARTS */
.toggle {
    position: relative;
    box-sizing: border-box;
}

.toggle:hover {
    opacity: .8;
}

.toggle input[type=checkbox] {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

.toggle input[type=checkbox]:checked+label:before {
    background: var(--call-activity-green);
}

.toggle input[type=checkbox]:checked+label:after {
    left: 20px;
}

.toggle label {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.toggle label:before {
    content: "";
    width: 39px;
    height: 20px;
    background: var(--gray-color);
    position: relative;
    display: inline-block;
    border-radius: 46px;
    box-sizing: border-box;
    transition: 0.5s ease-in;
}

.toggle label:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    left: 2px;
    top: 2px;
    z-index: 0;
    background: var(--white-color);
    box-sizing: border-box;
    transition: 0.2s ease-in;
}

.switch:hover .toggle label:after {
    outline: none;
    box-shadow: 0 0 0 4px rgb(255 254 254 / 30%);
}

/* TOGGLE BUTTON :: ENDS */

/* SPLASH SCREEN PAGE CSS :: STARTS */
.splash-screen {
    height: 100vh;
    width: 100%;
    padding: 50px 0px;
    margin: 0px;
    background-image: var(--main-gradient);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.splash-screen .splash-screen-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
    background-image: url(../img-new/background-Vectors.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.splash-screen .splash-screen-content .logo {
    width: 300px;
    height: auto;
    margin-bottom: 0px;
}

.splash-screen .loader {
    position: absolute;
    bottom: 300px;
    color: var(--white-color);
}

/* SPLASH SCREEN PAGE CSS :: ENDS */

/* COMMON LOGIN RIGHT SIDE CONTENT :: STARTS */
.login-right-section {
    height: 100%;
    border-radius: 115px 0px 0px 0px;
    background-image: var(--curves-bg-image), var(--main-gradient);
    background-repeat: no-repeat;
    background-position: 100% 85%;
    background-size: contain;
    position: absolute;
    width: 552px;
    top: 36px;
    right: 0;
}


.login-right-section h3:first-child {
    font-size: 30px;
    font-weight: 300;
    line-height: 46px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--white-color);
    padding: 65px 48px 0px 48px;
    margin-bottom: 0px;
}

.login-right-section h3:nth-child(2) {
    color: var(--white-color);
    font-size: 34px;
    font-weight: 700;
    line-height: 43px;
    letter-spacing: 0em;
    text-align: left;
    padding: 0px 48px 0px 48px;
    margin-bottom: 0px;
}

.login-right-section:has(.device-img) {
    display: flex;
    flex-direction: column;
}

.login-right-section .device-img {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
    min-height: 0;
}

.login-right-section .laptop-img {
    width: 100%;
    height: auto;
    display: block;
    position: static;
}

.version-number {
    position: fixed;
    bottom: 15px;
    right: 80px;
    color: var(--login-version-color);
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    margin: 0;
}

/* COMMON RIGHT SIDE LOGIN CONTENT :: ENDS */

/* LOGIN PAGE CSS :: STARTS */
.main-container {
    height: calc(100vh + 50px);
    min-height: calc(100vh + 50px);
    padding: 0px;
}

.login-content .login-left-section {
    position: relative;
    height: 100%;
    min-width: 335px;
    max-width: 400px;
    padding-bottom: 55px;
}

.login-content {
    padding: 50px 0px 0px 50px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    position: relative;
}

.login-content .logo {
    margin-bottom: 48px;
}

.bac,
.login-left-section .back {
    color: var(--text-dark-gray-to-white);
    margin-bottom: 30px;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: left;
    cursor: pointer;
    width: fit-content;
    width: fit-content;
    background: unset;
    border: none;
    height: unset;
}

.bac::after,
.login-left-section .back::after,
.bac::before,
.login-left-section .back::before {
    content: unset !important;
}

.bac:hover,
.login-left-section .back:hover {
    box-shadow: unset !important;
}

.back svg {
    margin-right: 10px;
    height: 20px;
    width: auto;
}

.login-form .heading {
    color: var(--black-to-white-text);
    font-size: 25px;
    font-weight: 600;
    line-height: 37px;
    letter-spacing: 0em;
    text-align: left;
}

.login-form .sub-heading {
    color: var(--text-gray-to-white);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 20px;
}

.login-content .gradient-btn {
    background: var(--btn-gradient);
    font-weight: 700 !important;
    margin-top: 30px;
    overflow: hidden;
}

.login-content button {
    width: 100%;
    height: 40px;
    border-radius: 3px;
    margin-bottom: 15px;
    border: none;
    outline: none;
    background-color: var(--primary-bg);
    color: var(--white-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: 0em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 312px;
}

.login-content .forget-password {
    display: block;
    color: var(--text-dark-gray-to-white);
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    margin-bottom: 20px;
    margin-top: 5px;
    width: 100%;
    text-align: center;
}

.login-content .forget-password a {
    color: var(--input-icon)
}

.login-content .input-group-text svg,
.enter-password-modal .modal-body svg {
    margin-bottom: 1px;
}

/* LOGIN PAGE CSS :: ENDS */

/* CHECK YOUR MAIL CSS :: STARTS */
.check-mail-content {
    min-width: 315px;
    max-width: 400px;
    padding: 50px 0px 0px 50px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    position: relative;
    flex-direction: column;
}

.check-mail-content .logo {
    margin-bottom: 85px;
}

.check-mail-content .heading {
    color: var(--black-to-white-text);
    font-size: 25px;
    font-weight: 600;
    line-height: 37px;
    letter-spacing: 0em;
    text-align: left;
}

.check-mail-content .sub-heading {
    color: var(--text-gray-to-white);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 0px;
}

.check-mail-content button {
    width: 100%;
    height: 40px;
    border-radius: 3px;
    margin-bottom: 15px;
    border: none;
    outline: none;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: 0em;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 312px;
    background: var(--btn-gradient);
    font-weight: 700 !important;
    margin-top: 30px;
}

.check-mail {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.check-mail .version {
    color: var(--white-color);
    font-size: 19px;
    font-weight: 700;
    line-height: 29px;
    letter-spacing: 0em;
    margin-bottom: 65px;
    margin-top: 10px;
}

/* CHECK YOUR MAIL CSS :: ENDS */


/* LOGIN WITH OTP CSS :: STARTS */
.login-fields .dropdown {
    position: relative;
}

.login-fields .dropdown__skeleton {
    position: relative;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-fields .dropdown__skeleton .dropdown__arrow {
    margin-left: 8px;
    transition: all 0.2s ease-in-out;
}

.login-fields .dropdown__skeleton .dropdown__arrow svg {
    width: 10px;
}

.login-fields .dropdown__option img {
    width: 25px;
    margin-right: 10px;
}

.login-fields .dropdown__option span {
    font-size: 13px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
}

.login-fields .dropdown__options {
    position: absolute;
    top: 43px;
    left: 0px;
    right: 0;
    border: 1px solid var(--input-border-color);
    border-radius: 5px;
    background-color: var(--input-bg);
    min-width: 85px;
    opacity: 0;
    z-index: 1;
}

.login-fields .dropdown__options--visible .dropdown__options {
    opacity: 1 !important;
}

.login-fields .dropdown__options--visible .dropdown__arrow {
    transform: rotate(-180deg);
}

.login-fields.dropdown__option {
    display: flex;
    align-items: center;
}

.login-fields .dropdown__options .dropdown__option {
    padding: 5px 12px;
    text-align: left;
    cursor: pointer;
}

.login-fields .dropdown__options .dropdown__option {
    margin: 8px;
}

.login-fields .dropdown__options .dropdown__option:hover {
    background-color: var(--dropdown-item-bg);
}

.login-fields .country-code li img {
    width: 20px;
    height: auto;
}

.login-fields .right-line::before {
    content: "";
    background-image: url(../img-new/line.svg);
    position: absolute;
    height: 85%;
    width: 94%;
    left: 0;
    background-repeat: no-repeat;
    top: 9%;
    bottom: 5%;
    background-position: 100% 100%;
    background-size: contain;
}

/* LOGIN WITH OTP CSS :: EDNS */

/* OTP VERIFICATION CSS :: STARTS */
.otp-verification .time {
    display: block;
    margin: auto;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
    width: 20%;
    color: var(--blue-color);
}

.otp-verification .otp-box {
    margin-top: 30px;
    margin-bottom: 30px;
    gap: 13px;
}

.otp-verification .otp-box input {
    border-radius: 5px;
    border: 1px solid var(--input-border-color) !important;
    height: 48px;
    width: 68px;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 48px;
    text-align: center;
}

.otp-verification .resend-otp {
    color: var(--gray-color-lighter);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    margin-top: 15px !important;
    text-align: center;
}

.otp-verification .resend-otp span a {
    color: var(--blue-color);
    text-decoration: none !important;
}

/* OTP VERIFICATION CSS :: ENDS */

/* LOGIN WITH QR CSS :: STARTS */

.login-left-section .qr-box {
    border: 5px solid var(--blue-color);
    display: flex;
    margin: 16px auto;
    position: relative;
    border-radius: 45px;
    background-color: var(--bg-color);
    height: 340px;
    width: 340px;
}

div#qr-box {
    display: flex;
    align-items: center;
    height: 100%;
}

.login-left-section .qr-box img {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    z-index: 5;
    width: 150px;
    height: 150px;
    margin: auto;
    display: block;
}

.login-left-section .qr-box::before,
.login-left-section .qr-box::after {
    content: '';
    position: absolute;
    background: var(--bg-color);
}

.login-left-section .qr-box::before {
    width: 80%;
    height: calc(100% + 10px);
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.login-content .email-input {
    border: 1px solid var(--input-border-color) !important;
    height: 48px;
    background-color: var(--input-bg);
    margin-bottom: 15px;
    align-items: center !important;
    border-radius: 3px;
    width: 312px;
    transition: all 0.5s ease;
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    color: var(--black-to-white-text) !important;
}

.login-content .email-input:focus {
    border: 1.5px solid var(--input-border-focused-color) !important;
    outline: none;
    box-shadow: 0 0 0 4px var(--input-shadow-color) !important;
}

.qr-box::after {
    height: 78%;
    width: calc(100% + 10px);
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

#video-container {
    width: 100%;
    height: 100%;
    z-index: 99;
}

#video-container video {
    border-radius: 45px;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#qr-scan-upload,
#profile-pic-upload {
    position: absolute;
    z-index: 0;
    width: 100%;
    left: 0;
    opacity: 0;
    height: 100% !important;
}

.custom-file-input {
    width: 312px;
    display: inline-block;
    background-color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: 0em;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    gap: 5px;
    color: var(--white-color);
}

.qr-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.qr-content .version {
    color: var(--white-color);
    font-size: 19px;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: 0em;
    margin-bottom: 65px;
    margin-top: 10px;
}

/* LOGIN WITH QR CSS :: ENDS */

/* SIP CONFICURATION CSS :: STARTS */
.sip-configuration-container {
    padding: 40px 50px;
    overflow-y: overlay;
    width: 100%;
    overflow-x: hidden !important;
}

.sip-configuration-container::before {
    content: '';
    background-image: url(../img-new/curves-2.svg);
    position: absolute;
    width: 45%;
    height: 100%;
    background-position: top right;
    background-size: contain;
    background-repeat: no-repeat;
    right: 0;
    top: 0;
}

.sip-configuration-container .logo {
    margin-bottom: 50px;
}

.sip-configuration-container .input-group {
    max-width: 100%;
    width: unset;
}

.sip-configuration-content .login-left-section .toggle-box {
    display: flex;
    align-items: center;
    margin: 20px auto;
}

.sip-configuration-content .login-left-section .toggle-box span:first-child {
    font-size: 13px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--text-dark-gray-to-white);
    width: 250px;
}

/* TOGGLE BUTTON */
.sip-configuration-content .login-left-section .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

.sip-configuration-content .login-left-section .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sip-configuration-content .login-left-section .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    background-color: var(--gray-color);
    -webkit-transition: .4s;
    transition: .4s;
}

.sip-configuration-content .login-left-section .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: unset;
    background-color: var(--white-color);
    -webkit-transition: .4s;
    transition: .4s;
}

.sip-configuration-content .login-left-section input:checked+.slider {
    background: var(--label-color);
}

.sip-configuration-content .login-left-section input:checked+.slider:before {
    -webkit-transform: translateX(calc(100% - 4px));
    -ms-transform: translateX(calc(100% - 4px));
    transform: translateX(calc(100% - 4px));
}

.sip-configuration-content .login-left-section .slider.round {
    border-radius: 34px;
}

.sip-configuration-content .login-left-section .slider.round:before {
    border-radius: 50%;
}

/* TOGGLE BUTTON */

.sip-configuration-content .login-left-section .radio-box {
    margin: 15px 0px;
    display: flex;
    align-items: center;
}

.sip-configuration-content .login-left-section .radio-box p {
    margin-right: 15px;
}

.sip-configuration-content .login-left-section .radio-box span:first-child {
    font-size: 13px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--text-dark-gray-to-white);
    width: 250px;
}

.login-content .login-left-section .radio-box [type="radio"]:checked,
.login-content .login-left-section .radio-box [type="radio"]:not(:checked),
.sip-configuration-content .login-left-section .radio-box [type="radio"]:checked,
.sip-configuration-content .login-left-section .radio-box [type="radio"]:not(:checked) {
    display: none;
}

.login-content .login-left-section .radio-box [type="radio"]:checked+label,
.login-content .login-left-section .radio-box [type="radio"]:not(:checked)+label,
.sip-configuration-content .login-left-section .radio-box [type="radio"]:checked+label,
.sip-configuration-content .login-left-section .radio-box [type="radio"]:not(:checked)+label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
}

.login-content .login-left-section .radio-box [type="radio"]:checked+label:before,
.login-content .login-left-section .radio-box [type="radio"]:not(:checked)+label:before,
.sip-configuration-content .login-left-section .radio-box [type="radio"]:checked+label:before,
.sip-configuration-content .login-left-section .radio-box [type="radio"]:not(:checked)+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: -2px;
    width: 24px;
    height: 24px;
    border: 3px solid var(--radio-btn-color);
    border-radius: 100%;
    background: var(--input-bg);
}

.login-content .login-left-section .radio-box [type="radio"]:checked+label:after,
.login-content .login-left-section .radio-box [type="radio"]:not(:checked)+label:after,
.sip-configuration-content .login-left-section .radio-box [type="radio"]:checked+label:after,
.sip-configuration-content .login-left-section .radio-box [type="radio"]:not(:checked)+label:after {
    content: '';
    width: 14px;
    height: 14px;
    background: var(--label-color);
    position: absolute;
    top: 2.5px;
    left: 5px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.login-content .login-left-section .radio-box [type="radio"]:not(:checked)+label:after,
.sip-configuration-content .login-left-section .radio-box [type="radio"]:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.login-content .login-left-section .radio-box [type="radio"]:checked+label:after,
.sip-configuration-content .login-left-section .radio-box [type="radio"]:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.login-content .login-left-section .radio-box label,
.sip-configuration-content .login-left-section .radio-box label {
    text-transform: uppercase;
    color: var(--text-dark-gray-to-white);
    font-size: 13px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: 0em;
}

.login-content .login-left-section .radio-box label {
    text-transform: unset;
}

.sip-configuration-content .gradient-btn {
    width: 312px;
    height: 40px;
    border-radius: 3px;
    margin-bottom: 0px;
    border: none;
    outline: none;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: 0em;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: var(--btn-gradient);
    font-weight: 700 !important;
    margin-top: 0px;
}

.sip-configuration-img img {
    width: auto;
    margin-top: 220px;
    position: relative;
    height: 265px;
}

.sip-configuration-footer {
    padding: 25px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sip-configuration-footer p {
    color: var(--text-dark-gray-to-white);
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 0px;
}

/* SIP CONFICURATION CSS :: ENDS */

/* HEADER CSS :: STARTS */
header {
    height: 50px;
    background: var(--header-gadient);
    padding: 5px 0;
    z-index: 1090;
    position: relative;
}

header::before {
    content: "";
    order: 2;
    height: 50px;
    flex-grow: 1;
    -webkit-app-region: drag;
}

header .user-name,
header .user-name.show {
    display: flex !important;
    flex-direction: column;
}

.profile-dropdown {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 44px;
    border-radius: 9px;
    padding-left: 10px;
}

[dir="rtl"] .profile-dropdown {
    padding-left: 0;
    padding-right: 10px;
}

.profile-dropdown:hover,
.profile-dropdown:has(.dropdown-toggle.show) {
    background-color: var(--bg-header-hover);
}

.cam-overlay {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cam-overlay img {
    height: unset;
    width: unset;
}

.profile-dropdown .profile-pic:hover .cam-overlay {
    opacity: 1;
}

.profile-dropdown .profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: auto 1rem;
}

.profile-dropdown .profile-pic img[alt="Profile"] {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
}

.__MSG__loading {
    color: var(--input-icon);
}

.profile-dropdown .profile-pic .green-dot {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    position: absolute;
    right: -2px;
    top: -6px;
    z-index: 99;
}

.profile-dropdown .status-img{
    height: 14px;
    width: 14px;
    border-radius: 50%;
    position: absolute;
    z-index: 99;
    top:5px;
}

.profile-dropdown .dropdown-toggle:hover {
    color: var(--white-color);
    text-decoration: none;
}

.profile-dropdown .dropdown-menu {
    padding: 6px 0px !important;
    border-radius: 10px !important;
    box-shadow: var(--common-box-shadow);
    background-color: var(--input-bg);
    width: 235px;
    height: fit-content;
    border: unset !important;
    overflow: hidden;
    inset: 8px 0px auto auto !important;
    transform: translate(0, 43px) !important;
}

.contact-detail-dropdown .dropdown-menu {
    border-radius: 10px !important;
    box-shadow: var(--common-box-shadow);
    background-color: var(--input-bg);
    border: none;
    overflow: hidden;
}

.contact-detail-dropdown-menu li svg{
    width: 22px !important;
}

[dir="rtl"] .profile-dropdown .dropdown-menu {
    inset: 8px auto auto 0px !important;
}

.profile-dropdown .dropdown-menu li,
.contact-detail-dropdown .dropdown-menu li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    margin: 0 10px 0 8px;
    margin-bottom: 5px;
    position: relative;
    height: 30px;
    padding: 10px;
    border-radius: 3px;
    z-index: 99999;
    background-color: var(--bg-white-to-dark-color);
}

.profile-dropdown .dropdown-menu li::before {
    content: "";
    position: absolute;
    width: calc(100% + 20px);
    height: 1px;
    background-color: var(--divider-border);
    left: -10px;
    bottom: -3px;
}

.profile-dropdown .dropdown-menu li:last-of-type {
    margin-bottom: 0;
}

.profile-dropdown .dropdown-menu li:last-of-type::before {
    content: unset;
}

.profile-dropdown .dropdown-menu li .state-icon {
    width: 11px;
    height: 11px;
    border-radius: 50rem;
    background-color: var(--black-to-white-text);
}

.profile-dropdown .dropdown-menu li .state-icon.available-state {
    background-color: #4CAF50;
}

.profile-dropdown .dropdown-menu li .state-icon.busy-state {
    background-color: #FF9800;
}

.profile-dropdown .dropdown-menu li .state-icon.unavailable-state {
    background-color: #9E9E9E;
}

.profile-dropdown .dropdown-menu li .state-icon.dnd-state {
    background-color: #F44336;
}

.profile-dropdown .dropdown-menu li .state-icon.else-where-state {
    background-color: #009688;
}

.profile-dropdown .dropdown-menu li:not(.user-status):hover {
    background-color: var(--element-active-bg);
}

.profile-dropdown .dropdown-menu li p,
.contact-detail-dropdown .dropdown-menu span,
#netsapinesMobileNumber {
    margin-bottom: 0px;
    color: var(--black-to-white-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
}

.profile-dropdown .dropdown-menu li .checkbox {
    position: absolute;
    right: 10px;
}

.profile-dropdown .user-name p {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--white-color);
}

.profile-dropdown .user-name span {
    color: var(--white-color);
    font-size: 11px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0em;
    text-align: right;
}

.profile-dropdown .user-name span._extName {
    font-size: 13px;
    font-weight: 500;
}

.profile-dropdown .dropdown-menu li.user-status {
    cursor: default;
    height: auto;
}

.profile-dropdown .dropdown-menu li.user-status .status-label {
    color: var(--text-dark-gray-to-white);
    font-size: 11px;
}

.profile-dropdown .dropdown-menu li.user-status .status-text {
    font-size: 12px;
    color: var(--black-to-white-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2em;
    max-height: 2.4em;
}

.profile-dropdown .dropdown-menu li.user-status .btn-icon .tooltiptext {
    right: 0;
}

[dir="rtl"] .profile-dropdown .dropdown-menu li.user-status .btn-icon .tooltiptext {
    right: unset;
    left: 0;
}

.header-left-items {
    margin-left: 30px;
    margin-right: 10px;
}

[dir="rtl"] .header-left-items {
    margin-left: 10px;
    margin-right: 30px;
}

.header-right-items {
    gap: 20px;
    margin-left: auto;
    margin-right: 10px;
}

[dir="rtl"] .header-right-items {
    margin-left: 10px;
    margin-right: auto;
}

.header-right-items .auto-answer,
.header-right-items .dnd {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.disable-click {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

.header-right-items p {
    color: var(--white-color);
    font-size: 11px;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 0px;
    margin-right: 10px;
}

.header-right-items .auto-answer .toggle input[type=checkbox]:checked+label:before {
    background: var(--call-activity-green);
}

.header-right-items .dnd .toggle input[type=checkbox]:checked+label:before {
    background: var(--chat-counter);
}

.profile-pic .upload-profile-pic-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    background-color: #00000080;
    width: 100%;
    height: 50%;
    cursor: pointer;
    bottom: 0;
    border-radius: 0 0 50rem 50rem;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.profile-pic:hover .upload-profile-pic-icon {
    opacity: 1;
}

.custom-header__box {
    position: relative;
    z-index: 1;
    order: 3;
    align-self: flex-start;
}

[data-os-type="windows"] .custom-header__box {
    order: 4;
    align-self: flex-start;
}

[data-os-type="windows"] .header .custom-header__box {
    margin-top: -5px;
}

.custom-header__box .custom-header__option {
    all: unset;
    cursor: pointer;
}

.custom-header__box .custom-header__option>i {
    display: inline-block;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: var(--white-color);
    padding: 0;
    margin: 0;
}

[data-os-type="windows"] .custom-header__box .custom-header__option {
    width: 35px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
}

[data-os-type="windows"] .custom-header__box .custom-header__option:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"][data-os-type="windows"] .custom-header__box .custom-header__option:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

@media (prefers-color-scheme: dark) {
    [data-os-type="windows"] .custom-header__box .custom-header__option:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }
}

[data-os-type="windows"] .custom-header__box .custom-header__option:nth-last-child(1):hover {
    background-color: #de3730;
}

[data-os-type="windows"] .custom-header__box .custom-header__option>i {
    width: 11px;
    height: 11px;
}

[data-os-type="windows"] .custom-header__box .custom-header__option>i.minimize-icon {
    width: 14px;
    mask-image: url("data:image/svg+xml,%3Csvg width='11' height='1' viewBox='0 0 11 1' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.748047 1C0.679688 1 0.614583 0.986979 0.552734 0.960938C0.494141 0.934896 0.442057 0.899089 0.396484 0.853516C0.350911 0.807943 0.315104 0.755859 0.289062 0.697266C0.263021 0.635417 0.25 0.570312 0.25 0.501953C0.25 0.433594 0.263021 0.370117 0.289062 0.311523C0.315104 0.249674 0.350911 0.195964 0.396484 0.150391C0.442057 0.101562 0.494141 0.0641276 0.552734 0.0380859C0.614583 0.0120443 0.679688 -0.000976562 0.748047 -0.000976562H9.75195C9.82031 -0.000976562 9.88379 0.0120443 9.94238 0.0380859C10.0042 0.0641276 10.0579 0.101562 10.1035 0.150391C10.1491 0.195964 10.1849 0.249674 10.2109 0.311523C10.237 0.370117 10.25 0.433594 10.25 0.501953C10.25 0.570312 10.237 0.635417 10.2109 0.697266C10.1849 0.755859 10.1491 0.807943 10.1035 0.853516C10.0579 0.899089 10.0042 0.934896 9.94238 0.960938C9.88379 0.986979 9.82031 1 9.75195 1H0.748047Z' /%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='11' height='1' viewBox='0 0 11 1' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.748047 1C0.679688 1 0.614583 0.986979 0.552734 0.960938C0.494141 0.934896 0.442057 0.899089 0.396484 0.853516C0.350911 0.807943 0.315104 0.755859 0.289062 0.697266C0.263021 0.635417 0.25 0.570312 0.25 0.501953C0.25 0.433594 0.263021 0.370117 0.289062 0.311523C0.315104 0.249674 0.350911 0.195964 0.396484 0.150391C0.442057 0.101562 0.494141 0.0641276 0.552734 0.0380859C0.614583 0.0120443 0.679688 -0.000976562 0.748047 -0.000976562H9.75195C9.82031 -0.000976562 9.88379 0.0120443 9.94238 0.0380859C10.0042 0.0641276 10.0579 0.101562 10.1035 0.150391C10.1491 0.195964 10.1849 0.249674 10.2109 0.311523C10.237 0.370117 10.25 0.433594 10.25 0.501953C10.25 0.570312 10.237 0.635417 10.2109 0.697266C10.1849 0.755859 10.1491 0.807943 10.1035 0.853516C10.0579 0.899089 10.0042 0.934896 9.94238 0.960938C9.88379 0.986979 9.82031 1 9.75195 1H0.748047Z' /%3E%3C/svg%3E");
}

[data-os-type="windows"] .custom-header__box .custom-header__option>i.maximize-icon {
    mask-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.72461 10C1.5293 10 1.34212 9.96094 1.16309 9.88281C0.984049 9.80143 0.826172 9.69401 0.689453 9.56055C0.55599 9.42383 0.448568 9.26595 0.367188 9.08691C0.289062 8.90788 0.25 8.7207 0.25 8.52539V1.47461C0.25 1.2793 0.289062 1.09212 0.367188 0.913086C0.448568 0.734049 0.55599 0.577799 0.689453 0.444336C0.826172 0.307617 0.984049 0.200195 1.16309 0.12207C1.34212 0.0406901 1.5293 0 1.72461 0H8.77539C8.9707 0 9.15788 0.0406901 9.33691 0.12207C9.51595 0.200195 9.6722 0.307617 9.80566 0.444336C9.94238 0.577799 10.0498 0.734049 10.1279 0.913086C10.2093 1.09212 10.25 1.2793 10.25 1.47461V8.52539C10.25 8.7207 10.2093 8.90788 10.1279 9.08691C10.0498 9.26595 9.94238 9.42383 9.80566 9.56055C9.6722 9.69401 9.51595 9.80143 9.33691 9.88281C9.15788 9.96094 8.9707 10 8.77539 10H1.72461ZM8.75098 8.99902C8.81934 8.99902 8.88281 8.986 8.94141 8.95996C9.00326 8.93392 9.05697 8.89811 9.10254 8.85254C9.14811 8.80697 9.18392 8.75488 9.20996 8.69629C9.236 8.63444 9.24902 8.56934 9.24902 8.50098V1.49902C9.24902 1.43066 9.236 1.36719 9.20996 1.30859C9.18392 1.24674 9.14811 1.19303 9.10254 1.14746C9.05697 1.10189 9.00326 1.06608 8.94141 1.04004C8.88281 1.014 8.81934 1.00098 8.75098 1.00098H1.74902C1.68066 1.00098 1.61556 1.014 1.55371 1.04004C1.49512 1.06608 1.44303 1.10189 1.39746 1.14746C1.35189 1.19303 1.31608 1.24674 1.29004 1.30859C1.264 1.36719 1.25098 1.43066 1.25098 1.49902V8.50098C1.25098 8.56934 1.264 8.63444 1.29004 8.69629C1.31608 8.75488 1.35189 8.80697 1.39746 8.85254C1.44303 8.89811 1.49512 8.93392 1.55371 8.95996C1.61556 8.986 1.68066 8.99902 1.74902 8.99902H8.75098Z' /%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.72461 10C1.5293 10 1.34212 9.96094 1.16309 9.88281C0.984049 9.80143 0.826172 9.69401 0.689453 9.56055C0.55599 9.42383 0.448568 9.26595 0.367188 9.08691C0.289062 8.90788 0.25 8.7207 0.25 8.52539V1.47461C0.25 1.2793 0.289062 1.09212 0.367188 0.913086C0.448568 0.734049 0.55599 0.577799 0.689453 0.444336C0.826172 0.307617 0.984049 0.200195 1.16309 0.12207C1.34212 0.0406901 1.5293 0 1.72461 0H8.77539C8.9707 0 9.15788 0.0406901 9.33691 0.12207C9.51595 0.200195 9.6722 0.307617 9.80566 0.444336C9.94238 0.577799 10.0498 0.734049 10.1279 0.913086C10.2093 1.09212 10.25 1.2793 10.25 1.47461V8.52539C10.25 8.7207 10.2093 8.90788 10.1279 9.08691C10.0498 9.26595 9.94238 9.42383 9.80566 9.56055C9.6722 9.69401 9.51595 9.80143 9.33691 9.88281C9.15788 9.96094 8.9707 10 8.77539 10H1.72461ZM8.75098 8.99902C8.81934 8.99902 8.88281 8.986 8.94141 8.95996C9.00326 8.93392 9.05697 8.89811 9.10254 8.85254C9.14811 8.80697 9.18392 8.75488 9.20996 8.69629C9.236 8.63444 9.24902 8.56934 9.24902 8.50098V1.49902C9.24902 1.43066 9.236 1.36719 9.20996 1.30859C9.18392 1.24674 9.14811 1.19303 9.10254 1.14746C9.05697 1.10189 9.00326 1.06608 8.94141 1.04004C8.88281 1.014 8.81934 1.00098 8.75098 1.00098H1.74902C1.68066 1.00098 1.61556 1.014 1.55371 1.04004C1.49512 1.06608 1.44303 1.10189 1.39746 1.14746C1.35189 1.19303 1.31608 1.24674 1.29004 1.30859C1.264 1.36719 1.25098 1.43066 1.25098 1.49902V8.50098C1.25098 8.56934 1.264 8.63444 1.29004 8.69629C1.31608 8.75488 1.35189 8.80697 1.39746 8.85254C1.44303 8.89811 1.49512 8.93392 1.55371 8.95996C1.61556 8.986 1.68066 8.99902 1.74902 8.99902H8.75098Z' /%3E%3C/svg%3E");
}

[data-os-type="windows"] .custom-header__box .custom-header__option.fullscreen>i.maximize-icon {
    mask-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.82812 0C3.27584 0 2.82812 0.447715 2.82812 1V2H1.82812C1.27584 2 0.828125 2.44772 0.828125 3V11C0.828125 11.5523 1.27584 12 1.82812 12H9.82812C10.3804 12 10.8281 11.5523 10.8281 11V10H11.8281C12.3804 10 12.8281 9.55229 12.8281 9V1C12.8281 0.447715 12.3804 0 11.8281 0H3.82812ZM10.8281 9H11.8281V1H3.82812V2H9.82812C10.3804 2 10.8281 2.44772 10.8281 3V9ZM1.82812 3H9.82812V11H1.82812V3Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.82812 0C3.27584 0 2.82812 0.447715 2.82812 1V2H1.82812C1.27584 2 0.828125 2.44772 0.828125 3V11C0.828125 11.5523 1.27584 12 1.82812 12H9.82812C10.3804 12 10.8281 11.5523 10.8281 11V10H11.8281C12.3804 10 12.8281 9.55229 12.8281 9V1C12.8281 0.447715 12.3804 0 11.8281 0H3.82812ZM10.8281 9H11.8281V1H3.82812V2H9.82812C10.3804 2 10.8281 2.44772 10.8281 3V9ZM1.82812 3H9.82812V11H1.82812V3Z' fill='white'/%3E%3C/svg%3E");
}

[data-os-type="windows"] .custom-header__box .custom-header__option>i.close-win-icon {
    mask-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.25 5.70801L1.10449 9.85352C1.00684 9.95117 0.889648 10 0.75293 10C0.609701 10 0.489258 9.9528 0.391602 9.8584C0.297201 9.76074 0.25 9.6403 0.25 9.49707C0.25 9.36035 0.298828 9.24316 0.396484 9.14551L4.54199 5L0.396484 0.854492C0.298828 0.756836 0.25 0.638021 0.25 0.498047C0.25 0.429688 0.263021 0.364583 0.289062 0.302734C0.315104 0.240885 0.350911 0.188802 0.396484 0.146484C0.442057 0.100911 0.495768 0.0651042 0.557617 0.0390625C0.619466 0.0130208 0.68457 0 0.75293 0C0.889648 0 1.00684 0.0488281 1.10449 0.146484L5.25 4.29199L9.39551 0.146484C9.49316 0.0488281 9.61198 0 9.75195 0C9.82031 0 9.88379 0.0130208 9.94238 0.0390625C10.0042 0.0651042 10.0579 0.100911 10.1035 0.146484C10.1491 0.192057 10.1849 0.245768 10.2109 0.307617C10.237 0.366211 10.25 0.429688 10.25 0.498047C10.25 0.638021 10.2012 0.756836 10.1035 0.854492L5.95801 5L10.1035 9.14551C10.2012 9.24316 10.25 9.36035 10.25 9.49707C10.25 9.56543 10.237 9.63053 10.2109 9.69238C10.1849 9.75423 10.1491 9.80794 10.1035 9.85352C10.0612 9.89909 10.0091 9.9349 9.94727 9.96094C9.88542 9.98698 9.82031 10 9.75195 10C9.61198 10 9.49316 9.95117 9.39551 9.85352L5.25 5.70801Z' /%3E%3C/svg%3E ");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.25 5.70801L1.10449 9.85352C1.00684 9.95117 0.889648 10 0.75293 10C0.609701 10 0.489258 9.9528 0.391602 9.8584C0.297201 9.76074 0.25 9.6403 0.25 9.49707C0.25 9.36035 0.298828 9.24316 0.396484 9.14551L4.54199 5L0.396484 0.854492C0.298828 0.756836 0.25 0.638021 0.25 0.498047C0.25 0.429688 0.263021 0.364583 0.289062 0.302734C0.315104 0.240885 0.350911 0.188802 0.396484 0.146484C0.442057 0.100911 0.495768 0.0651042 0.557617 0.0390625C0.619466 0.0130208 0.68457 0 0.75293 0C0.889648 0 1.00684 0.0488281 1.10449 0.146484L5.25 4.29199L9.39551 0.146484C9.49316 0.0488281 9.61198 0 9.75195 0C9.82031 0 9.88379 0.0130208 9.94238 0.0390625C10.0042 0.0651042 10.0579 0.100911 10.1035 0.146484C10.1491 0.192057 10.1849 0.245768 10.2109 0.307617C10.237 0.366211 10.25 0.429688 10.25 0.498047C10.25 0.638021 10.2012 0.756836 10.1035 0.854492L5.95801 5L10.1035 9.14551C10.2012 9.24316 10.25 9.36035 10.25 9.49707C10.25 9.56543 10.237 9.63053 10.2109 9.69238C10.1849 9.75423 10.1491 9.80794 10.1035 9.85352C10.0612 9.89909 10.0091 9.9349 9.94727 9.96094C9.88542 9.98698 9.82031 10 9.75195 10C9.61198 10 9.49316 9.95117 9.39551 9.85352L5.25 5.70801Z' /%3E%3C/svg%3E ");
}

[data-os-type="linux"] .custom-header__box {
    align-self: flex-start;
    order: 4;
    padding: 5px 0;
    padding-right: 14px;
    gap: 18px;
}

[dir="rtl"][data-os-type="linux"] .custom-header__box {
    padding-right: 0;
    padding-left: 14px;
}

[data-os-type="linux"] .custom-header__box .custom-header__option {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50rem;
    color: var(--white-color);
}

[data-os-type="linux"] .custom-header__box .custom-header__option>i {
    width: 9px;
    height: 9px;
}

[data-os-type="linux"] .custom-header__box .custom-header__option>i.minimize-icon {
    mask-position: center 5px;
    -webkit-mask-position: center 5px;
    mask-image: url("data:image/svg+xml,%3Csvg width='11' height='1' viewBox='0 0 11 1' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.748047 1C0.679688 1 0.614583 0.986979 0.552734 0.960938C0.494141 0.934896 0.442057 0.899089 0.396484 0.853516C0.350911 0.807943 0.315104 0.755859 0.289062 0.697266C0.263021 0.635417 0.25 0.570312 0.25 0.501953C0.25 0.433594 0.263021 0.370117 0.289062 0.311523C0.315104 0.249674 0.350911 0.195964 0.396484 0.150391C0.442057 0.101562 0.494141 0.0641276 0.552734 0.0380859C0.614583 0.0120443 0.679688 -0.000976562 0.748047 -0.000976562H9.75195C9.82031 -0.000976562 9.88379 0.0120443 9.94238 0.0380859C10.0042 0.0641276 10.0579 0.101562 10.1035 0.150391C10.1491 0.195964 10.1849 0.249674 10.2109 0.311523C10.237 0.370117 10.25 0.433594 10.25 0.501953C10.25 0.570312 10.237 0.635417 10.2109 0.697266C10.1849 0.755859 10.1491 0.807943 10.1035 0.853516C10.0579 0.899089 10.0042 0.934896 9.94238 0.960938C9.88379 0.986979 9.82031 1 9.75195 1H0.748047Z' /%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='11' height='1' viewBox='0 0 11 1' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.748047 1C0.679688 1 0.614583 0.986979 0.552734 0.960938C0.494141 0.934896 0.442057 0.899089 0.396484 0.853516C0.350911 0.807943 0.315104 0.755859 0.289062 0.697266C0.263021 0.635417 0.25 0.570312 0.25 0.501953C0.25 0.433594 0.263021 0.370117 0.289062 0.311523C0.315104 0.249674 0.350911 0.195964 0.396484 0.150391C0.442057 0.101562 0.494141 0.0641276 0.552734 0.0380859C0.614583 0.0120443 0.679688 -0.000976562 0.748047 -0.000976562H9.75195C9.82031 -0.000976562 9.88379 0.0120443 9.94238 0.0380859C10.0042 0.0641276 10.0579 0.101562 10.1035 0.150391C10.1491 0.195964 10.1849 0.249674 10.2109 0.311523C10.237 0.370117 10.25 0.433594 10.25 0.501953C10.25 0.570312 10.237 0.635417 10.2109 0.697266C10.1849 0.755859 10.1491 0.807943 10.1035 0.853516C10.0579 0.899089 10.0042 0.934896 9.94238 0.960938C9.88379 0.986979 9.82031 1 9.75195 1H0.748047Z' /%3E%3C/svg%3E");
}

[data-os-type="linux"] .custom-header__box .custom-header__option>i.maximize-icon {
    mask-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.72461 10C1.5293 10 1.34212 9.96094 1.16309 9.88281C0.984049 9.80143 0.826172 9.69401 0.689453 9.56055C0.55599 9.42383 0.448568 9.26595 0.367188 9.08691C0.289062 8.90788 0.25 8.7207 0.25 8.52539V1.47461C0.25 1.2793 0.289062 1.09212 0.367188 0.913086C0.448568 0.734049 0.55599 0.577799 0.689453 0.444336C0.826172 0.307617 0.984049 0.200195 1.16309 0.12207C1.34212 0.0406901 1.5293 0 1.72461 0H8.77539C8.9707 0 9.15788 0.0406901 9.33691 0.12207C9.51595 0.200195 9.6722 0.307617 9.80566 0.444336C9.94238 0.577799 10.0498 0.734049 10.1279 0.913086C10.2093 1.09212 10.25 1.2793 10.25 1.47461V8.52539C10.25 8.7207 10.2093 8.90788 10.1279 9.08691C10.0498 9.26595 9.94238 9.42383 9.80566 9.56055C9.6722 9.69401 9.51595 9.80143 9.33691 9.88281C9.15788 9.96094 8.9707 10 8.77539 10H1.72461ZM8.75098 8.99902C8.81934 8.99902 8.88281 8.986 8.94141 8.95996C9.00326 8.93392 9.05697 8.89811 9.10254 8.85254C9.14811 8.80697 9.18392 8.75488 9.20996 8.69629C9.236 8.63444 9.24902 8.56934 9.24902 8.50098V1.49902C9.24902 1.43066 9.236 1.36719 9.20996 1.30859C9.18392 1.24674 9.14811 1.19303 9.10254 1.14746C9.05697 1.10189 9.00326 1.06608 8.94141 1.04004C8.88281 1.014 8.81934 1.00098 8.75098 1.00098H1.74902C1.68066 1.00098 1.61556 1.014 1.55371 1.04004C1.49512 1.06608 1.44303 1.10189 1.39746 1.14746C1.35189 1.19303 1.31608 1.24674 1.29004 1.30859C1.264 1.36719 1.25098 1.43066 1.25098 1.49902V8.50098C1.25098 8.56934 1.264 8.63444 1.29004 8.69629C1.31608 8.75488 1.35189 8.80697 1.39746 8.85254C1.44303 8.89811 1.49512 8.93392 1.55371 8.95996C1.61556 8.986 1.68066 8.99902 1.74902 8.99902H8.75098Z' /%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.72461 10C1.5293 10 1.34212 9.96094 1.16309 9.88281C0.984049 9.80143 0.826172 9.69401 0.689453 9.56055C0.55599 9.42383 0.448568 9.26595 0.367188 9.08691C0.289062 8.90788 0.25 8.7207 0.25 8.52539V1.47461C0.25 1.2793 0.289062 1.09212 0.367188 0.913086C0.448568 0.734049 0.55599 0.577799 0.689453 0.444336C0.826172 0.307617 0.984049 0.200195 1.16309 0.12207C1.34212 0.0406901 1.5293 0 1.72461 0H8.77539C8.9707 0 9.15788 0.0406901 9.33691 0.12207C9.51595 0.200195 9.6722 0.307617 9.80566 0.444336C9.94238 0.577799 10.0498 0.734049 10.1279 0.913086C10.2093 1.09212 10.25 1.2793 10.25 1.47461V8.52539C10.25 8.7207 10.2093 8.90788 10.1279 9.08691C10.0498 9.26595 9.94238 9.42383 9.80566 9.56055C9.6722 9.69401 9.51595 9.80143 9.33691 9.88281C9.15788 9.96094 8.9707 10 8.77539 10H1.72461ZM8.75098 8.99902C8.81934 8.99902 8.88281 8.986 8.94141 8.95996C9.00326 8.93392 9.05697 8.89811 9.10254 8.85254C9.14811 8.80697 9.18392 8.75488 9.20996 8.69629C9.236 8.63444 9.24902 8.56934 9.24902 8.50098V1.49902C9.24902 1.43066 9.236 1.36719 9.20996 1.30859C9.18392 1.24674 9.14811 1.19303 9.10254 1.14746C9.05697 1.10189 9.00326 1.06608 8.94141 1.04004C8.88281 1.014 8.81934 1.00098 8.75098 1.00098H1.74902C1.68066 1.00098 1.61556 1.014 1.55371 1.04004C1.49512 1.06608 1.44303 1.10189 1.39746 1.14746C1.35189 1.19303 1.31608 1.24674 1.29004 1.30859C1.264 1.36719 1.25098 1.43066 1.25098 1.49902V8.50098C1.25098 8.56934 1.264 8.63444 1.29004 8.69629C1.31608 8.75488 1.35189 8.80697 1.39746 8.85254C1.44303 8.89811 1.49512 8.93392 1.55371 8.95996C1.61556 8.986 1.68066 8.99902 1.74902 8.99902H8.75098Z' /%3E%3C/svg%3E");
}

[data-os-type="linux"] .custom-header__box .custom-header__option.fullscreen>i.maximize-icon {
    mask-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.82812 0C3.27584 0 2.82812 0.447715 2.82812 1V2H1.82812C1.27584 2 0.828125 2.44772 0.828125 3V11C0.828125 11.5523 1.27584 12 1.82812 12H9.82812C10.3804 12 10.8281 11.5523 10.8281 11V10H11.8281C12.3804 10 12.8281 9.55229 12.8281 9V1C12.8281 0.447715 12.3804 0 11.8281 0H3.82812ZM10.8281 9H11.8281V1H3.82812V2H9.82812C10.3804 2 10.8281 2.44772 10.8281 3V9ZM1.82812 3H9.82812V11H1.82812V3Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.82812 0C3.27584 0 2.82812 0.447715 2.82812 1V2H1.82812C1.27584 2 0.828125 2.44772 0.828125 3V11C0.828125 11.5523 1.27584 12 1.82812 12H9.82812C10.3804 12 10.8281 11.5523 10.8281 11V10H11.8281C12.3804 10 12.8281 9.55229 12.8281 9V1C12.8281 0.447715 12.3804 0 11.8281 0H3.82812ZM10.8281 9H11.8281V1H3.82812V2H9.82812C10.3804 2 10.8281 2.44772 10.8281 3V9ZM1.82812 3H9.82812V11H1.82812V3Z' fill='white'/%3E%3C/svg%3E");
}

[data-os-type="linux"] .custom-header__box .custom-header__option>i.close-win-icon {
    mask-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.25 5.70801L1.10449 9.85352C1.00684 9.95117 0.889648 10 0.75293 10C0.609701 10 0.489258 9.9528 0.391602 9.8584C0.297201 9.76074 0.25 9.6403 0.25 9.49707C0.25 9.36035 0.298828 9.24316 0.396484 9.14551L4.54199 5L0.396484 0.854492C0.298828 0.756836 0.25 0.638021 0.25 0.498047C0.25 0.429688 0.263021 0.364583 0.289062 0.302734C0.315104 0.240885 0.350911 0.188802 0.396484 0.146484C0.442057 0.100911 0.495768 0.0651042 0.557617 0.0390625C0.619466 0.0130208 0.68457 0 0.75293 0C0.889648 0 1.00684 0.0488281 1.10449 0.146484L5.25 4.29199L9.39551 0.146484C9.49316 0.0488281 9.61198 0 9.75195 0C9.82031 0 9.88379 0.0130208 9.94238 0.0390625C10.0042 0.0651042 10.0579 0.100911 10.1035 0.146484C10.1491 0.192057 10.1849 0.245768 10.2109 0.307617C10.237 0.366211 10.25 0.429688 10.25 0.498047C10.25 0.638021 10.2012 0.756836 10.1035 0.854492L5.95801 5L10.1035 9.14551C10.2012 9.24316 10.25 9.36035 10.25 9.49707C10.25 9.56543 10.237 9.63053 10.2109 9.69238C10.1849 9.75423 10.1491 9.80794 10.1035 9.85352C10.0612 9.89909 10.0091 9.9349 9.94727 9.96094C9.88542 9.98698 9.82031 10 9.75195 10C9.61198 10 9.49316 9.95117 9.39551 9.85352L5.25 5.70801Z' /%3E%3C/svg%3E ");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.25 5.70801L1.10449 9.85352C1.00684 9.95117 0.889648 10 0.75293 10C0.609701 10 0.489258 9.9528 0.391602 9.8584C0.297201 9.76074 0.25 9.6403 0.25 9.49707C0.25 9.36035 0.298828 9.24316 0.396484 9.14551L4.54199 5L0.396484 0.854492C0.298828 0.756836 0.25 0.638021 0.25 0.498047C0.25 0.429688 0.263021 0.364583 0.289062 0.302734C0.315104 0.240885 0.350911 0.188802 0.396484 0.146484C0.442057 0.100911 0.495768 0.0651042 0.557617 0.0390625C0.619466 0.0130208 0.68457 0 0.75293 0C0.889648 0 1.00684 0.0488281 1.10449 0.146484L5.25 4.29199L9.39551 0.146484C9.49316 0.0488281 9.61198 0 9.75195 0C9.82031 0 9.88379 0.0130208 9.94238 0.0390625C10.0042 0.0651042 10.0579 0.100911 10.1035 0.146484C10.1491 0.192057 10.1849 0.245768 10.2109 0.307617C10.237 0.366211 10.25 0.429688 10.25 0.498047C10.25 0.638021 10.2012 0.756836 10.1035 0.854492L5.95801 5L10.1035 9.14551C10.2012 9.24316 10.25 9.36035 10.25 9.49707C10.25 9.56543 10.237 9.63053 10.2109 9.69238C10.1849 9.75423 10.1491 9.80794 10.1035 9.85352C10.0612 9.89909 10.0091 9.9349 9.94727 9.96094C9.88542 9.98698 9.82031 10 9.75195 10C9.61198 10 9.49316 9.95117 9.39551 9.85352L5.25 5.70801Z' /%3E%3C/svg%3E ");
}

[data-os-type="linux"] .custom-header__box .custom-header__option:nth-last-child(1) {
    background-color: #de3730 !important;
}

[data-os-type="ios"] .custom-header__box {
    order: 0;
    align-self: center;
    gap: 6px;
    padding: 0 0 0 10px;
}

[dir="rtl"][data-os-type="ios"] .custom-header__box {
    padding: 0 10px 0 0;
}

[data-os-type="ios"] .custom-header__box .custom-header__option {
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50rem;
    color: #000;
    border: 1px solid;
}

[data-os-type="ios"] .custom-header__box .custom-header__option:nth-child(1) {
    order: 2;
    background-color: #FFBD2E;
    border-color: #DFA123;
}

[data-os-type="ios"] .custom-header__box .custom-header__option:nth-child(2) {
    order: 3;
    background-color: #28CA42;
    border-color: #1DAD2C;
}

[data-os-type="ios"] .custom-header__box .custom-header__option:nth-child(3) {
    order: 1;
    background-color: #FF5F57;
    border-color: #E14640;
}

[data-os-type="ios"] .custom-header__box .custom-header__option>i {
    height: 9px;
    width: 9px;
    display: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: unset;
}

[data-os-type="ios"] .custom-header__box:hover .custom-header__option>i {
    display: block;
}

[data-os-type="ios"] .custom-header__box .custom-header__option>i.minimize-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.882812 3.74219L7.24224 3.74219' stroke='%23AB5600' stroke-width='0.84'/%3E%3C/svg%3E%0A");
}

[data-os-type="ios"] .custom-header__box .custom-header__option:not(.fullscreen)>i.maximize-icon {
    width: 7px;
    height: 7px;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.1712 5.47107H0.432918C0.375043 5.47107 0.328125 5.42415 0.328125 5.36627V1.62799C0.328125 1.53463 0.441002 1.48788 0.507018 1.55389L4.2453 5.29217C4.31131 5.35819 4.26456 5.47107 4.1712 5.47107Z' fill='%23026600'/%3E%3Cpath d='M1.95185 -0.0101275H5.69013C5.748 -0.0101275 5.79492 0.0367899 5.79492 0.0946655V3.83294C5.79492 3.92631 5.68204 3.97306 5.61603 3.90704L1.87775 0.168766C1.81173 0.10275 1.85849 -0.0101275 1.95185 -0.0101275Z' fill='%23026600'/%3E%3C/svg%3E%0A");
}

[data-os-type="ios"] .custom-header__box .custom-header__option.fullscreen>i.maximize-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.110053 4.86487H3.84833C3.90621 4.86487 3.95312 4.91179 3.95312 4.96967V8.70794C3.95312 8.80131 3.84025 8.84806 3.77423 8.78204L0.035953 5.04377C-0.0300629 4.97775 0.0166922 4.86487 0.110053 4.86487Z' fill='%23026600'/%3E%3Cpath d='M8.01495 4.61169H4.27667C4.21879 4.61169 4.17188 4.56477 4.17188 4.5069V0.768618C4.17188 0.675257 4.28475 0.628502 4.35077 0.694518L8.08905 4.4328C8.15506 4.49881 8.10831 4.61169 8.01495 4.61169Z' fill='%23026600'/%3E%3C/svg%3E%0A");
}

[data-os-type="ios"] .custom-header__box .custom-header__option>i.close-win-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='7' viewBox='0 0 6 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.486328 6.3125L5.63947 1.15936' stroke='%23990000' stroke-width='0.836862'/%3E%3Cpath d='M0.486328 1.15625L5.63947 6.30939' stroke='%23990000' stroke-width='0.836862'/%3E%3C/svg%3E%0A");
}

#custom_header {
    display: flex;
    position: relative;
    z-index: 9999;
}

[data-os-type="ios"] #custom_header {
    flex-direction: row-reverse;
}

[data-os-type="ios"] #custom_header>.custom-header__box {
    padding-top: 10px;
}

/* #custom_header::before {
    content: "";
    align-self: stretch;
    flex-grow: 1;
    -webkit-app-region: drag;
} */

[data-os-type="windows"] #custom_header>.custom-header__box .custom-header__option>i,
[data-os-type="linux"] #custom_header>.custom-header__box .custom-header__option>i {
    background-color: var(--black-to-white-text);
}

[data-os-type="windows"] #custom_header>.custom-header__box .custom-header__option:hover:nth-last-child(1)>i,
[data-os-type="linux"] #custom_header>.custom-header__box .custom-header__option:nth-last-child(1)>i {
    background-color: var(--white-color);
}

/* HEADER CSS :: ENDS */

/* LEFT SIDE MENU CSS :: STARTS */
.left-side-menu.nav {
    width: 85px;
    height: 100%;
    position: relative;
    background: var(--sidebar-bg);
    box-shadow: 0px 1px 15px 0px #0000000F;
    z-index: 9;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* [lang="fr"] .left-side-menu.nav {
    max-width: 75px;
} */

.left-side-menu.nav-pills .nav-link {
    max-height: fit-content;
    min-height: 50px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 3px;
    position: relative;
    overflow: hidden;
    -webkit-transition: background-color .3s ease-out;
    -moz-transition: background-color .3s ease-out;
    -o-transition: background-color .3s ease-out;
    transition: background-color .3s ease-out;
    padding: 0;
}

.left-side-menu.nav-pills .nav-link:hover {
    background: var(--sidebar-item-hover-bg) !important;
}

.left-side-menu.nav-pills .nav-link.tooltip {
    overflow: visible;
    position: relative;
    z-index: auto;
}
.left-side-menu.nav-pills .nav-link.tooltip .tooltiptext {
    top:calc(100% + -5px) !important;
    position: absolute !important;
    z-index: 999999 !important;
    left: 8px;
}

.left-side-menu.nav-pills .second-last-link {
    position: absolute;
    bottom: 62px;
}

.left-side-menu.nav-pills .last-link {
    position: absolute;
    bottom: 0px;
}

.left-side-menu.nav-pills .nav-link.active::before {
    content: "";
    position: absolute;
    left: -5px;
    height: 100%;
    width: 9.25px;
    background: var(--sidebar-item-active-icon);
    border-radius: 0px 10px 10px 0px;
}

.left-side-menu.nav-pills .nav-link svg {
    fill: var(--text-dark-gray-to-white);
    stroke: var(--text-dark-gray-to-white);
}

.left-side-menu.nav-pills .nav-link.active svg {
    fill: var(--sidebar-item-active-icon);
    stroke: var(--sidebar-item-active-icon);
}

.left-side-menu.nav-pills .nav-link.active span {
    font-weight: 500;
    color: var(--sidebar-item-active-icon);
}

.left-side-menu.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background: var(--sidebar-item-active-bg) !important;
    background-position: center 8px;
    background-repeat: no-repeat;
}

.left-side-menu.nav-pills .nav-link span {
    font-size: 11px;
    font-weight: 400;
    line-height: 13px;
    letter-spacing: 0em;
    text-align: center;
    color: var(--text-dark-gray-to-white);
    margin-top: 5px;
}

[lang="fr"] .left-side-menu.nav-pills .nav-link span {
    font-size: 10px;
}

.left-side-menu.nav-pills .nav-link span {
    transition: opacity 0.2s ease-in-out;
}

.left-side-menu.nav-pills .nav-link .counter,
.left-side-menu.nav-pills .nav-link .voice-mail-btn .counter,
.left-side-menu.nav-pills .nav-link .missed-call-counter,
.left-side-menu .counter,
.voice-mail-btn .counter,
.missed-call-counter {
    min-width: 21px;
    height: 21px;
    border-radius: 50%;
    background-color: var(--chat-counter);
    color: var(--white-color);
    font-size: 11px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: center;
    position: absolute;
    right: 22px;
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1 !important;
}

.left-side-menu.nav-pills .new-version-badge .new-version-badge-text{
    position: absolute;
    border-radius: 8px !important;
    top: 0px !important;
    right: 12px !important;
    display: inline-block !important;
    background-color: var(--chat-counter) !important;
    color: var(--white-color) !important;
    font-size: 9px !important;
    padding: 2px 5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    z-index: 10 !important;
    min-width: 20px !important;
    text-align: center !important;
    height: auto !important;
    justify-content: unset !important;
    align-items: unset !important;
    text-transform: uppercase !important;
}

.voice-mail-btn .counter {
    top: -5px;
    right: 0;
}

.missed-call-counter {
    top: -10px;
    right: -10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-content {
    /* background: var(--hover-light-bg); */
    height: 100% !important;
    position: relative;
}

.menu-content .menu-header {
    padding: 5px 10px 0 0;
    position: relative;
    /* z-index: 0; */
    margin: 0 10px;
}

.menu-content .menu-header .accordion-item {
    background-color: transparent;
}

.menu-content .menu-header .accordion-button::after {
    content: unset !important;
}

.menu-content .menu-header h3 a img {
    transform: rotate(360deg);
    transition-duration: .3s;
}

.menu-content .menu-header h3 a .arrow-down {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
}

.menu-content .menu-header h3 a .arrow-down:hover {
    background-color: var(--element-active-bg);
}

.menu-content .menu-header .accordion-button.collapsed img {
    transform: rotate(268deg);
    transition-duration: .3s;
}

.menu-header h3 {
    color: var(--text-dark-gray-to-white);
    font-size: 15px;
    font-weight: 500;
    line-height: 48px;
    letter-spacing: 0em;
    padding-bottom: 0px;
}

.chat-header-options {
    display: flex;
    align-items: center;
}

.menu-content .menu-header h3 a {
    text-decoration: none;
    background-color: transparent;
    color: var(--text-dark-gray-to-white);
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0em;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    padding-bottom: 20px;
    box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
    transform: unset !important;
}

.menu-content .menu-header .divider,
.divider {
    border-bottom: 1px solid var(--divider-border);
}

.accordion-button:not(.collapsed) {
    box-shadow: unset;
}

.chat-header-options .group-chat-icon,
.chat-header-options .new-chat-icon {
    width: 23px;
    height: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    padding: 2px;
    cursor: pointer;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
    z-index: 1;
}

.chat-header-options .new-message-icon {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    padding: 2px;
    cursor: pointer;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.cursor-default {
    cursor: default !important;
}

.chat-header-options .group-chat-icon:hover,
.chat-header-options .new-chat-icon:hover,
.chat-header-options .new-message-icon:hover {
    background-color: var(--hover-icon-bg);
}

/* LEFT SIDE MENU CSS :: ENDS */

/* MAIN DAILPAD CSS :: STARTS */
.main-body-content {
    height: calc(100% - 50px);
}

.main-dialpad {
    position: absolute;
    bottom: 0px;
    padding: 10px;
    animation: fadeInPage ease 3s;
    width: 92%;
    margin: 6px 15px;
    border: 1px solid var(--divider-border);
    border-radius: 10px;
    background: var(--bg-color);
    z-index: 1100;
}

.call-suggestion-dropdown {
    width: 100%;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    
}

.caller-id {
    width: 100%;
    height: auto;
    margin: 12px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.caller-id p {
    padding: 0px 5px;
    min-width: 128px;
    border-radius: 16px;
    background: var(--input-bg);
    color: var(--input-icon);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
    justify-content: center;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.caller-id .dropdown-toggle:hover,
#contactTypeDropdown span:hover {
    background-color: var(--element-active-bg);
}

.caller-id span ,
#contactTypeDropdown span{
    color: var(--black-to-white-text);
    font-size: 13px;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;
    text-transform: capitalize;
}
#contactTypeDropdown span{
    padding: 5px 10px;
    border-radius: 22px;
    cursor: pointer;
}
.caller-id .dropdown-menu,
.contact-type-dropdown .dropdown-menu  {
    border: 1px solid var(--seprator-color);
    box-shadow: var(--common-box-shadow);
    border-radius: 20px;
    background-color: var(--input-bg);
    top: 2px !important;
    width: 230px;
    left: unset !important;
    transform: translate(0px, 28px) !important;
}

.message-footer .caller-id .dropdown-menu,
.contact-type-dropdown .dropdown-menu {
    top: unset !important;
    bottom: 60px !important;
    z-index: 1080
}

.caller-id .dropdown-toggle.show {
    display: flex !important;
}

.caller-id .dropdown-menu p,
.contact-type-dropdown .dropdown-menu li {
    padding: 12px 25px 10px 25px;
    color: var(--black-to-white-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: center;
    margin-bottom: 0px;
}

.caller-id .dropdown-menu ul,
.contact-type-dropdown .dropdown-menu ul {
    min-height: -webkit-fill-available;
    max-height: 150px;
    overflow-y: overlay;
}

.caller-id .dropdown-menu ul li,
.contact-type-dropdown .dropdown-menu ul li {
    color: var(--black-to-white-text);
    font-size: 15px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 0em;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding: 8px 20px;
    border-radius: 3px;
    width: 95%;
    margin: auto;
    margin-top: 5px;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.caller-id .dropdown-menu ul li:hover,
.contact-type-dropdown .dropdown-menu ul li:hover {
    background-color: var(--element-active-bg);
}


.caller-id .dropdown-menu .checkbox {
    height: 17px;
    width: 17px;
}

.caller-id .dropdown-menu .checkbox label:after {
    width: 8px;
    height: 5px;
    top: 4px;
    right: 4px;
}

.caller-id .dropdown-menu .checkbox label:after {
    opacity: 1;
}

.caller-id .dropdown-menu .divider {
    border-top: 1px solid var(--gray-color-lighter);
    opacity: 0.2;
}

.call-suggestion-dropdown .dropdown-menu {
    width: 325px;
    max-height: 218px;
    border: 1px solid var(--seprator-color);
    box-shadow: var(--common-box-shadow);
    border-radius: 20px;
    background-color: var(--input-bg);
    bottom: 70px !important;
    padding: 15px 5px 15px 15px;
    left: -3% !important;
    top: unset !important;
    bottom: 40px !important;
    overflow: hidden;
    min-height: fit-content;
    transform: unset !important;
}

.call-suggestion-dropdown .dropdown-menu ul {
    overflow-y: overlay;
    min-height: -webkit-fill-available;
    max-height: 195px;
    padding-right: 10px !important;
}

.call-suggestion-dropdown .dropdown-menu li {
    height: 45px;
    margin-bottom: 5px;
    padding: 3px 5px;
}

.call-suggestion-dropdown .dropdown-menu li a {
    padding: 0px !important;
}

.call-suggestion-dropdown .dropdown-menu li a:hover,
.call-suggestion-dropdown .dropdown-menu li:hover,
.call-suggestion-dropdown .dropdown-menu li:focus,
.call-suggestion-dropdown .dropdown-menu li a:focus {
    background-color: var(--element-active-bg);
    border-radius: 5px;
}

.call-suggestion-dropdown .caller-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.call-suggestion-dropdown .caller-info .caller-icon {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background-color: var(--primary-bg);
    color: var(--white-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    flex-shrink: 0;
}

.call-suggestion-dropdown .caller-info .caller-icon svg {
    width: 18px;
    height: auto;
}

.call-suggestion-dropdown .caller-info .caller-icon img:not(.status-img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.call-suggestion-dropdown .caller-name {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.call-suggestion-dropdown .caller-name span {
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--text-dark-gray-to-white);
}

.main-dialpad .entered-number {
    position: relative;
    display: flex;
    align-items: center;
    overflow: visible;
}

.main-dialpad .entered-number input[type="text"] {
    color: var(--black-to-white-text) !important;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: center;
    background-color: transparent !important;
    outline: unset;
    border: unset;
    width: 68%;
    margin: auto;
    display: block;
    cursor: text;
}

.main-dialpad .entered-number input[type="text"]::placeholder {
    color: var(--input-placeholder);
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
}

[lang="du"] .main-dialpad .entered-number input[type="text"]::placeholder {
    font-size: 13px;
}

[lang="it"] .main-dialpad .entered-number input[type="text"]::placeholder,
[lang="de"] .main-dialpad .entered-number input[type="text"]::placeholder {
    font-size: 12px;
}

.main-dialpad span.clear_number,
.main-dialpad span.mobile_option {
    height: 25px;
    width: 28px;
    position: absolute !important;
    top: 10px;
    right: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    z-index: 1;
}

.main-dialpad span.mobile_option .dropdown-toggle {
    padding: 20px;
}

.main-dialpad span.clear_number:hover {
    background-color: var(--hover-icon-bg);
    cursor: pointer;
}

.main-dialpad span.mobile_option {
    height: 25px;
    width: 28px;
    /* position: absolute !important;
    top: 8px;*/
    left: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    z-index: 1;
}

[dir="rtl"] .main-dialpad span.mobile_option {
    left: unset;
    right: 16px;
}

.main-dialpad span.mobile_option .dropdown-menu {
    /* min-width: max-content; */
    max-width: 330px;
    padding: 1rem;
    border: 1px solid var(--seprator-color);
    box-shadow: var(--common-box-shadow);
    border-radius: 20px;
    background-color: var(--input-bg);
}

.call_sip .call_sip_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    padding: 10px;
}

[dir="rtl"] .call_sip .call_sip_row {
    flex-direction: row-reverse;
}

.call_sip .call_sip_row svg {
    width: 18px !important;
    height: 18px !important;
}

.call_sip .call_sip_row span {
    font-size: 14px;
    width: -webkit-fill-available;
}

.main-dialpad .keypad {
    margin-top: 10px;
    padding: 0 10px;
}

.main-dialpad .digit {
    width: 85px;
    height: 45px;
    background: var(--digit-background);
    border-radius: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 18px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--black-to-white-text);
    cursor: pointer;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.main-dialpad .digit:hover,
.main-dialpad button.voice-mail-btn:hover {
    background-color: var(--element-active-bg);
}

.main-dialpad .digit .sub {
    color: var(--black-to-white-text);
    font-size: 9px;
    font-weight: 400;
    line-height: 12px;
    letter-spacing: 0em;
    text-align: left;
}

.main-dialpad .call-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 6px;
    min-height: 47px;
}

.main-dialpad .call-buttons button {
    width: 60px;
    height: 47px;
    background-color: var(--call-activity-green);
    border: unset;
    outline: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.main-dialpad .call-buttons button:disabled {
    background-color: var(--gray-color-lighter);
    border-color: var(--gray-color-lighter) !important;
    color: var(--white-color) !important;
    opacity: 1 !important;
}

.main-dialpad .audio-call-btn {
    border-radius: 80px 0px 0px 80px;
    border-right: 0.5px solid var(--call-btn-seprator) !important;
    box-shadow: 0px 0.5933077931404114px 5.933077335357666px 0px #00000024;
}

.main-dialpad .video-call-btn {
    border-radius: 0px 80px 80px 0px;
    box-shadow: 0px 0.5933077931404114px 5.933077335357666px 0px #00000024;
}

.main-dialpad button.voice-mail-btn {
    background: transparent;
    position: absolute !important;
    left: 12px;
    width: 85px;
    height: 45px;
    border-radius: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-dialpad .call-buttons .tranfer-call-btn,
.main-dialpad .call-buttons .attandant-call-btn,
.main-dialpad .audio-call-btn.rounded-btn {
    width: 121px;
    border-radius: 80px;
}

/* MAIN DAILPAD CSS :: ENDS */

/* CONTACT LIST CSS :: STARTS */
.contact-list-item.nav {
    margin-top: 20px !important;
    width: 100%;
    display: block;
}

.contact-list-item li a {
    color: var(--black-to-white-text) !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: left;
}

.contact-list-item.nav-pills .nav-link {
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.contact-list-item.nav-pills .nav-link:hover,
.call_sip .call_sip_row:hover,
.call_sip .call_sip_row.active,
#callPop .call_row:hover{
    background-color: var(--element-active-bg);
    cursor: pointer;
}

#callPop .call_row {
    padding: 10px;
    margin: 10px;
    border-radius: 4px;
}

#callPop .form-check{
    padding: 10px;
    margin: 10px;
}

.contact-list-item.nav-pills .nav-link.active,
.contact-list-item.nav-pills .show>.nav-link {
    background: var(--hover-dark-bg) !important;
}

.header-sync-btn {
    gap: 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    justify-content: inherit;
    align-items: center;
    margin-left: 15px;
    cursor: pointer;
}

.header-sync-btn img {
    padding: 0px !important;
}

/* CONTACT LIST CSS :: ENDS */

/* CALL CONNECTING SCREEN CSS :: STARTS */
.call-connecting-screen {
    padding: 35px 25px;
    animation: fadeInPage ease 2s;
}

.call-connecting-header {
    position: relative;
}

.call-connecting-header p {
    color: var(--black-to-white-text);
    font-size: 26px;
    font-weight: 500;
    line-height: 39px;
    letter-spacing: 0em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 80px);
}

.active-caller-name {
    color: var(--black-to-white-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.call-connecting-header img,
.active-call-header img,
.active-call-header svg,
.call-connecting-header svg {
    position: absolute;
    left: 0;
}

.call-connecting-detail {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 30px;
}

.call-connecting-detail .call-connecting-caller-img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin-bottom: 25px;
}

.call-connecting-detail .call-connecting-caller-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.call-connecting-detail .call-connecting-caller-number {
    color: var(--text-dark-gray-to-white);
    font-size: 23px;
    font-weight: 400;
    line-height: 35px;
    letter-spacing: 0em;
}

.call-connecting-detail .call-connecting-status {
    color: var(--input-icon);
    font-size: 17px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: 0em;
}

.call-connecting-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 95px;
    gap: 20px;
    left: 0;
}

.call-connecting-actions button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: background-color .3s ease-out;
    -moz-transition: background-color .3s ease-out;
    -o-transition: background-color .3s ease-out;
    transition: background-color .3s ease-out;
}

.call-connecting-actions button.end-active-call-connecting {
    background-color: var(--call-decline-red);
}

/* CALL CONNECTING SCREEN CSS :: ENDS */

/* ACTIVE CALL SCREEN CSS :: STARTS */
.active-call-screen {
    padding: 32px 25px;
    animation: fadeInPage ease 2s;
}

.active-call-header {
    position: relative;
}

.active-call-header p {
    color: var(--black-to-white-text);
    font-size: 26px;
    font-weight: 500;
    line-height: 39px;
    letter-spacing: 0em;
    text-align: center;
}

.active-call-header button {
    position: absolute;
    left: 0;
    height: 20px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: transparent;
}

.active-call-header span:hover {
    background-color: var(--hover-icon-bg);
}

.active-call-screen .type-of-call .nav-tabs {
    margin-top: -11px;
    margin-bottom: 11px;
}

.active-call-detail {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 30px;
    position: relative;   
}

.active-call-detail .active-caller-img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin-bottom: 25px;
}

.active-call-detail .active-caller-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.active-call-detail .active-caller-number {
    color: var(--text-dark-gray-to-white);
    font-size: 19px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
}

.active-call-detail .active-call-duration {
    color: var(--white-color);
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0em;
    background-color: var(--call-activity-green);
    border-radius: 6px;
    padding: 0px 5px;
}

/* Network Indicator :: START */
.network_indicator {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: flex-start;
    color: var(--white-color);
    z-index: 1;
}

[dir="rtl"] .network_indicator {
    right: unset;
    left: 0;
}

.active-video-call-screen .network_indicator {
    position: static;
    margin-left: auto;
}

[dir="rtl"] .active-video-call-screen .network_indicator {
    margin-left: unset;
    margin-right: auto;
}

.network_indicator>.network_type {
    padding: 0;
    border-radius: 50rem;
    gap: 2.32px;
    /* background-color: var(--toolitp-color); */
    display: none;
    align-items: center;
    line-height: 1;
}

[dir="rtl"] .network_indicator>.network_type {
    padding: 3.19px 3.19px 3.19px 6.75px;
}

.network_indicator>.network_type>span {
    background-color: transparent !important;
}

.network_indicator[data-network-type="Good"]>.network_type[data-network="Good"],
.network_indicator[data-network-type="Moderate"]>.network_type[data-network="Moderate"],
.network_indicator[data-network-type="Low"]>.network_type[data-network="Low"] {
    display: inline-flex;
}

.network_indicator>.network_type>.network_icon,
.network_icon svg {
    width: 22px;
    position: static;
}

.network_indicator>.network_type>.network_label {
    font-size: 12.39px;
    font-weight: 400;
    line-height: 18.59px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

/* Network Indicator :: END */

.active-call-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 95px;
    gap: 20px;
    left: 0;
    right: 0;
}

.active-call-actions button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--call-btn-bg);
    color: var(--text-dark-gray-to-white);
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.active-call-actions button:hover {
    background-color: var(--element-active-bg);
}

.active-call-actions button.end-active-call {
    background-color: var(--call-decline-red);
}

.active-call-actions .dtmf-call.show,
.active-call-actions .transfer-call.show {
    background-color: var(--primary-bg);
    color: var(--white-color);
    display: flex !important;
}

.active-call-actions .transfer-call.active,
.active-call-actions .conference-call.active,
.active-call-actions .dtmf-call.active,
.active-call-actions .remove-participant.active {
    background-color: var(--primary-bg);
    color: var(--white-color);
}

/* .headset-support.show {
    color: var(--white-color);
    background-color: var(--primary-bg) !important;
} */

.headset-dropdown {
    width: 245px;
    background-color: var(--input-bg);
    box-shadow: 0px 11px 20px 0px #0000001A;
    border: none !important;
    outline: none;
    border-radius: 15px !important;
    padding: 15px 10px !important;
    /* transform: translate(-75px, -72px) !important; */
}

.headset-dropdown ul li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease-in-out;
}

.headset-dropdown ul li:hover {
    background-color: var(--hover-icon-bg);
}

.headset-dropdown ul li.active {
    background-color: var(--hover-icon-bg);
}

.headset-dropdown ul li.selected {
    background-color: var(--element-active-bg);
}

.headset-dropdown ul li span {
    min-width: 22px;
    display: flex;
    justify-content: flex-start;
}

.headset-dropdown ul li p {
    color: var(--text-dark-gray-to-white);
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    margin-bottom: 0px;
}

.headset-dropdown ul li:not(:last-child) {
    margin-bottom: 10px;
}

/* ACTIVE CALL SCREEN CSS :: ENDS */

/* DTMF POPUP CSS :: STARTS */
.dtmf-dropdown {
    background: var(--input-bg);
    box-shadow: 0px 11px 20px rgba(0, 0, 0, 0.1);
    border-radius: 15px !important;
    width: 285px;
    height: 340px;
    bottom: 20px !important;
    left: -112px !important;
    border: none !important;
    padding: 0px !important;
    transform: translate(-40px, -57px) !important;
}

.dialpad-header {
    width: 100%;
    height: 75px;
    background: var(--header-gadient);
    box-shadow: 0px 8.35549px 52.3611px -11.1407px rgba(0, 0, 0, 0.1);
    border-radius: 15px 15px 0px 0px;
    position: relative;
}

.dialpad-header .close {
    position: absolute;
    right: 15px;
    top: 15px;
}

.dialpad-header .input-number {
    position: absolute;
    bottom: 2px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dialpad-header .input-number input[type="text"] {
    width: 74%;
    margin: auto;
    display: block;
    background-color: transparent !important;
    border: none;
    outline: none;
    color: var(--white-color) !important;
    font-size: 23px;
    font-weight: 300;
    line-height: 35px;
    letter-spacing: 0em;
    text-align: center;
    padding-right: 5px;
}

.dialpad-header .input-number input[type="text"]::placeholder {
    color: var(--white-color);
    opacity: .6;
}

.dialpad-header .input-number img {
    position: absolute;
    right: 15px;
}

.dtmf-dropdown .keypad {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 22px 18px;
}

.dtmf-dropdown .keypad .digit {
    width: 70px;
    height: 48px;
    border-radius: 60px;
    background-color: var(--digit-background);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    flex-direction: column;
    color: var(--text-dark-gray-to-white);
    font-size: 22px;
    font-weight: 300;
    line-height: 25px;
    letter-spacing: 0em;
    margin-bottom: 3px;
}

.dtmf-dropdown .keypad .digit:hover {
    background-color: var(--element-active-bg);
}

.dtmf-dropdown .keypad .sub {
    color: var(--black-to-white-text);
    font-size: 9px;
    font-weight: 400;
    line-height: 12px;
    letter-spacing: 0.19em;
}

.dtmf-dropdown .keypad .digit sub {
    font-size: 30px;
    bottom: -.2em !important;
}

/* DTMF POPUP CSS :: ENDS */

/* CALL POPUP CSS :: STARTS */
.incoming-call-popup,
.incoming-call-with-call-popup {
    width: 100%;
    height: 100dvh;
    /* background-color: var(--call-popup-background); */
    border-radius: 5px;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: auto;
    padding: 22px;
}

.incoming-call-popup .incoming-call-icon,
.incoming-call-with-call-popup .incoming-call-icon {
    width: 81px;
    height: 81px;
    border-radius: 50%;
    background-color: var(--primary-bg);
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    font-weight: 500;
    line-height: 54px;
    letter-spacing: 0em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.incoming-call-popup .incoming-call-icon img,
.incoming-call-with-call-popup .incoming-call-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

#incomingCallContactDisplayName {
    max-width: 250px;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
  
}


.incoming-call-popup .incoming-caller-name p,
.incoming-call-with-call-popup .incoming-caller-name p {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0em;
    margin-bottom: 0px;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    max-width: 180px;
    -webkit-app-region: no-drag;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.1);
}

.incoming-call-popup .incoming-caller-name span,
.incoming-call-with-call-popup .incoming-caller-name span {
    color: var(--white-color);
    font-size: 11px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
}

.incoming-call-popup .incoming-call-options,
.incoming-call-with-call-popup .incoming-call-options {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.incoming-call-popup .incoming-call-options button {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--call-activity-green);
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
}

.incoming-call-popup .incoming-call-options button.declin-call-btn {
    background-color: var(--call-decline-red);
}

.incoming-call-with-call-popup .incoming-call-options button {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--call-decline-red);
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
}

.incoming-call-with-call-popup .incoming-call-options button.hold-accept-btn {
    background-color: var(--call-activity-green);
}

/* new ui */
.incoming-call-notification {
    width: 100%;
    height: 101dvh;
    background-color: var(--call-popup-bg);
    border-radius: 11px;
    padding: 15px 15px 0px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.incoming-call-notification .incoming-call-header img {
    width: 92px;
    max-height: 34px;
}

.notification-logo {
    max-width: 70px;
}

.incoming-call-notification .incoming-call-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--primary-bg);
    color: var(--white-color);
    font-size: 34px;
    font-weight: 500;
    margin-bottom: 14px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.incoming-call-notification .incoming-call-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.incoming-call-notification .incoming-call-icon svg {
    width: 45px;
    height: auto;
}

.incoming-call-notification .incoming-caller-name {
    color: var(--white-color);
    font-size: 17px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    max-width: 220px;
}

.incoming-call-notification .incoming-caller-name span {
    font-size: 13px;
    font-weight: 400;
}

.incoming-call-notification .incoming-caller-name.has-crm span {
    display: inline-block;
    position: relative;
    bottom: -15px;
}

/* Marquee animation for overflowing text */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(min(calc(-100% + 220px), 0px));
    }
}

.incoming-call-notification .incoming-caller-name p {
    white-space: nowrap;
    overflow: hidden;
    width: fit-content;
    max-width: none;
    -webkit-app-region: no-drag;
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
    will-change: transform;
    animation: marquee-scroll 8s linear infinite;
    animation-delay: 1s;
}

/* Hide scrollbars completely */
.incoming-call-notification .incoming-caller-name p::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Pause animation when text doesn't overflow - requires JavaScript detection */
.incoming-call-notification .incoming-caller-name p.no-scroll {
    animation: none;
}

.incoming-call-notification .incoming-caller-name.has-crm p {
    visibility: hidden;
    pointer-events: none;
}

.incoming-call-notification .incoming-call-options {
    max-width: 413px;
}

.incoming-call-notification .incoming-call-options button {
    /* border-radius: 5px;
    background-color: transparent; */
    border-radius: 50%;
    line-height: 1;
    color: var(--white-color);
    flex-grow: 1;
    max-width: 38px;
    height: 38px;
    width: 38px;
}

.incoming-call-notification .incoming-call-options button[data-bg="success"] {
    background-color: var(--call-activity-green);
}

.incoming-call-notification .incoming-call-options button[data-bg="error"] {
    background-color: var(--call-decline-red);
}

.incoming-call-notification .incoming-call-crm-iframe {
    max-width: 426px;
    width: 100%;
    background-color: transparent !important;
}

/* CALL POPUP CSS :: ENDS */

/* RECENT CALLS CSS :: STARTS */
.type-of-call .nav-tabs {
    border: none;
}

.type-of-call .nav-tabs .nav-link {
    color: var(--black-to-white-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    border: none;
    border-radius: 15px;
    height: 25px;
    min-width: 38px;
    padding: 0 10px;
    margin: 0px 15px;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.type-of-call .nav-tabs .nav-item.show .nav-link,
.type-of-call .nav-tabs .nav-link.active {
    color: var(--black-to-white-text);
    background-color: var(--element-active-bg);
}

.type-of-call .nav-tabs .nav-link:hover:not(.active) {
    background-color: var(--digit-background) !important;
}

.favorite-contacts {
    padding: 15px 20px 25px 25px;
}

.sub-header h4 {
    color: var(--text-dark-gray-to-white);
    font-size: 13px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: left;
}

.sub-header .view-all {
    font-size: 11px;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--primary-color);
    text-decoration: none;
    border-radius: 3px;
    padding: 2px 5px;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.sub-header .view-all:hover {
    background-color: var(--hover-icon-bg);
}

.fav-contact-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    overflow: hidden;
    animation: fadeInPage ease 1.5s;
}

.fav-contact-item .item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 15px;
    height: 90px;
    border-radius: 7px;
    min-width: 70px;
    max-width: 70px;
    cursor: pointer;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.fav-contact-item .item:hover {
    background-color: var(--element-active-bg);
}

.favorite-contacts .fav-contact-icon {
    width: 56px;
    height: 56px;
    position: relative;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: 0em;
    text-transform: uppercase;
}

.favorite-contacts .fav-contact-icon img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.favorite-contacts .fav-contact-icon .fav-mark {
    position: absolute;
    bottom: 0px;
    right: -1px;
    height: 16px;
    width: 16px;
    padding: 2px;
    background-color: var(--white-color);
}

.fav-contact-name {
    color: var(--black-to-white-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
    margin-top: 5px;
    text-align: center;
    width: 55px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.recent-calls {
    padding: 5px 5px 0;
    height: calc(100% - 64px) !important;
    overflow-y: hidden;
}

.favorite-contacts:not(.d-none)~.recent-calls {
    height: calc(100% - 254px) !important;
}

.all-call-item {
    padding: 6px 20px;
    display: flex;
    justify-content: start;
    align-items: center;
    border-radius: 5px;
    min-height: 58px;
    position: relative;
    margin-bottom: 9px;
    cursor: pointer;
    /* -webkit-transition: background-color .8s ease-out;
    -moz-transition: background-color .8s ease-out;
    -o-transition: background-color .8s ease-out;
    transition: background-color .8s ease-out;
    animation: .3s fadeInUp; */
}

.all-call-item.in-recent-tab {
    cursor: default;
}

.all-call-item:not(:last-child):after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    border-bottom: 0.5px solid var(--divider-border);
    left: 0;
    right: 0;
    bottom: -5px;
}

.all-calls .all-call-item .calling-options>div {
    display: none;
}

.all-calls .all-call-item:hover .calling-options>div {
    display: flex;
}

.all-calls .all-call-item .calling-options>div[id^="favButton"]:has(._removeFavcontact) {
    display: flex;
}

.all-calls .header {
    position: sticky;
    top: 0;
    z-index: 9;
    background: transparent;
    border-bottom: 1px solid var(--divider-border);
}

.all-call-item:hover {
    background-color: var(--element-active-bg);
}

.all-call-item .all-call-caller {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    max-width: 250px;
    min-width: 250px;
}

.all-call-item .icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: 0em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.all-call-item .icon img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.all-call-item .caller-name p {
    color: var(--black-to-white-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
    margin-bottom: 0px;
    display: flex;
    align-items: baseline;
    max-width: 175px;
    word-break: break-all;
    gap: 0.25rem;
}

.all-call-item .caller-name p img {
    margin-right: 12px;
    margin-left: 5px;
}

.all-call-item .caller-name .number {
    color: var(--text-dark-gray-to-white);
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
}

.all-call-type-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.all-call-type-time .call-type {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 4px;
}

html[data-theme="dark"] .all-call-type-time .call-type.inbound-call img,
html[data-theme="dark"] .chat-list-item .msz-status-icon,
html[data-theme="dark"] .msg-box .recieved>img {
    filter: invert(1) brightness(10);
}

@media (prefers-color-scheme: dark) {

    html:not([data-theme="light"]):not([data-theme="dark"]) .all-call-type-time .call-type.inbound-call img,
    html:not([data-theme="light"]):not([data-theme="dark"]) .chat-list-item .msz-status-icon,
    html:not([data-theme="light"]):not([data-theme="dark"]) .msg-box .recieved>img {
        filter: invert(1) brightness(10);
    }
}

.all-call-type-time .call-duration {
    text-align: right;
    position: relative;
}

.all-call-type-time .call-duration.in-recent-tab {
    margin-left: auto;
}

[dir="rtl"] .all-call-type-time .call-duration.in-recent-tab {
    margin-left: unset;
    margin-right: auto;
}

.all-call-type-time .call-type p {
    font-size: 11px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    margin-bottom: 0px;
    color: var(--black-to-white-text);
}

.all-call-type-time .call-duration p {
    color: var(--text-dark-gray-to-white);
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    margin-top: -20px;
    margin-bottom: 8px;
}

.all-call-type-time .call-duration span {
    color: var(--text-dark-gray-to-white);
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    white-space: nowrap;
    position: absolute;
    right: 0;
}

.call-history-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50rem;
    margin-right: -10px;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.call-history-btn:hover,
.call-history-btn:focus {
    background-color: var(--hover-icon-bg);
}

[dir='rtl'] .call-history-btn {
    margin-left: -10px;
    margin-right: unset;
}

.call-history-btn .tooltiptext {
    right: -6px;
}

[dir='rtl'] .call-history-btn .tooltiptext {
    right: unset;
    left: -6px;
}

.missed-call .call-type p {
    color: var(--missed-call-red);
}

.conference-call .icon {
    width: 32px;
    height: 32px;
    position: relative;
}

.conference-call .icon .second-person {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: absolute;
    right: -10px;
    top: 5px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: 0em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.conference-call .icon .second-person img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.conference-call .caller-name {
    margin-left: 10px;
}

/* Remove Participant Button Styles */
.remove-participant-btn {
    background-color: var(--call-decline-red) !important;
    color: var(--white-color) !important;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 3px;
    padding: 0;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
}

.remove-participant-btn.visible {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9999 !important;
}

.remove-participant-btn:hover {
    background-color: var(--call-decline-red-hover, #d32f2f);
    transform: scale(1.05);
}

.remove-participant-btn:active {
    transform: scale(0.95);
}

.remove-participant-btn svg {
    width: 12px;
    height: 12px;
}

/* Ensure remove participant button is always visible in call action buttons */
.call-action-buttons .remove-participant-btn {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
}

/* Override any potential hiding rules */
.active-call-item .remove-participant-btn,
.active-call-item:hover .remove-participant-btn,
.active-call-item:focus .remove-participant-btn,
.active-call-item:active .remove-participant-btn {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force remove participant button to be always visible */
.remove-participant-btn,
button.remove-participant-btn,
.call-action-buttons .remove-participant-btn,
.active-call-item .call-action-buttons .remove-participant-btn {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 9999 !important;
    background-color: var(--call-decline-red) !important;
    color: white !important;
}

/* Override any potential CSS that might hide the button */
* .remove-participant-btn,
* button.remove-participant-btn,
* .call-action-buttons .remove-participant-btn {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 9999 !important;
    background-color: var(--call-decline-red) !important;
    color: white !important;
}

/* Legacy remove-participant class for backward compatibility */
.remove-participant {
    background-color: var(--call-decline-red);
    color: var(--white-color);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 5px;
}

.remove-participant:hover {
    background-color: var(--call-decline-red-hover, #d32f2f);
    transform: scale(1.05);
}

.remove-participant:active {
    transform: scale(0.95);
}

.remove-participant svg {
    width: 16px;
    height: 16px;
}

.sortby-container+.all-contact-list {
    padding-top: 38px;
}

.all-contact-list .calling-status {
    position: absolute;
    bottom: 0;
    right: -4px;
}

.sortby-container>.sortby-btn {
    position: relative;
    z-index: 3;
    color: var(--black-to-white-text);
    background: var(--digit-background);
    font-size: 12px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    border: none;
    border-radius: 15px;
    height: 25px;
    min-width: 38px;
    padding: 0 10px;
    margin: 10px 20px -33px;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.sortby-container>.sortby-btn:hover,
.sortby-container>.sortby-btn:focus {
    background-color: var(--element-active-bg);
}

.calling-options {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: absolute;
    right: 10px;
    cursor: pointer !important;
    z-index: 1;
}

.calling-options.in-recent-tab {
    right: 41px;
}

#favContactList .all-contact-list-item:has(.form-check-input.checkbox:not(.d-none)) .calling-options {
    right: 36px;
}

.calling-options>div,
.voice-mail-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--primary-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white-color);
}

.calling-options>div a {
    color: inherit !important;
}

.calling-options>div[id^="favButton"],
.calling-options>div[id^="favButton"]>button {
    all: unset;
    box-shadow: none !important;
}

.calling-options>div[id^="favButton"]>button {
    display: inline-flex;
    width: 25px;
    height: 25px;
    padding: 4px;
    box-sizing: border-box;
}

.calling-options>div[id^="favButton"]>button>.tooltiptext {
    left: 50%;
    transform: translateX(-80%);
}

[dir="rtl"] .calling-options>div[id^="favButton"]>button>.tooltiptext {
    left: unset;
    right: 50%;
    transform: translateX(80%);
}

.all-contact-list .contact-detail .icon .blf-state-img,
.all-contact-list .contact-detail .icon .status-img,
.open-contact-detail .contact-name .icon .status-img,
.open-contact-detail .contact-name .icon .blf-state-img,
.caller-info .status-img {
    position: absolute;
    top: 0;
    right: -4px;
    max-height: 14px;
}

[dir="rtl"] .all-contact-list .contact-detail .icon .blf-state-img,
[dir="rtl"] .all-contact-list .contact-detail .icon .status-img,
[dir="rtl"] .open-contact-detail .contact-name .icon .status-img,
[dir="rtl"] .open-contact-detail .contact-name .icon .blf-state-img,
[dir="rtl"] .caller-info .status-img {
    right: unset;
    left: -4px;
}

.calling-options .blf-box {
    background-color: transparent;
}

.calling-options .blf-box>.dropdown-toggle {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calling-options .blf-box>.dropdown-toggle>img {
    margin-top: 4px;
}

.calling-options .blf-box [aria-labelledby="blf_option"] {
    display: none;
    background-color: var(--input-bg);
    box-shadow: var(--common-box-shadow);
    padding: 12px !important;
    border-radius: 10px;
    border: none;
    min-width: max-content;
    cursor: default;
}

.all-contact-list>.all-contact-list-item .calling-options .blf-box .dropdown-menu:has(> div:only-child)>.delete-btn {
    margin-top: 0 !important;
}

.calling-options .blf-box [aria-labelledby="blf_option"].show {
    display: block;
}

.calling-options .blf-box .delete-btn {
    cursor: pointer;
    border-radius: 50rem;
    padding: 2px 10px 1px 7px;
    transition: all .3s ease-in-out;
}

[dir="rtl"] .calling-options .blf-box .delete-btn {
    padding: 2px 7px 1px 10px;
}

.calling-options .blf-box .delete-btn:hover {
    background-color: var(--element-active-bg);
}

.calling-options .blf-box .delete-btn>span {
    font-size: 13px;
    color: var(--black-to-white-text);
}

.calling-options>div:hover {
    box-shadow: 0 0 0 3px var(--input-shadow-color);
}

.all-call-item:hover .calling-options {
    display: flex;
}

.all-call-item.remove-hover .call-duration {
    display: block !important;
}

.all-call-item:hover .call-duration {
    display: none;
}

/* RECENT CALLS CSS :: ENDS */

/* ALL CONTACTS CSS :: STARTS */
.searchbar {
    width: 205px;
    height: 32px;
    display: flex;
    align-items: center;
}

.searchbar input[type="search"] {
    width: 100%;
    height: 100%;
    border: 0.66129px solid var(--input-border-color);
    border-radius: 19.8387px;
    background: var(--input-bg);
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    padding: 5px 5px 5px 28px;
    outline: none;
    color: var(--black-to-white-text);
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: ease;
}

.searchbar input[type="search"] ::placeholder {
    color: var(--placeholder-color);
}

.searchbar img,
.searchbar svg {
    position: absolute;
    left: 10px;
}

.all-contact-list .contact-order,
.all-contact-list>p {
    display: none;
    color: var(--black-to-white-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    margin-bottom: 15px;
    padding: 10px 25px 0px 25px;
    position: sticky;
    top: 0;
    background: var(--white-color);
    z-index: 2;
}

.all-contact-list {
    padding: 0px 5px;
    width: calc(100% - 5px);
    height: calc(100dvh - 117px);
    overflow-y: overlay;
    overflow-x: hidden;
    padding-bottom: 20px;
}

.all-calls>.all-contact-list {
    max-height: unset;
    height: 100%;
    width: 100%;
}

[dir='rtl'] .all-calls>.all-contact-list {
    width: 100%;
}

.all-contact-list .all-contact-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 58px;
    border-radius: 5px;
    padding: 5px 22px;
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
    animation: .3s fadeInUp;
    -webkit-transition: background-color .8s ease-out;
    -moz-transition: background-color .8s ease-out;
    -o-transition: background-color .8s ease-out;
    transition: background-color .8s ease-out;
}

.all-contact-list .all-contact-list-item:not(:last-child):after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    border-bottom: 0.5px solid var(--divider-border);
    left: 0;
    right: 0;
    bottom: -5px;
}

.all-contact-list .contact-detail {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.all-contact-list .contact-detail .name {
    display: flex;
    flex-direction: column;
}

.all-contact-list .contact-detail .icon {
    position: relative;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--primary-bg);
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0em;
    text-transform: uppercase;
}

.all-contact-list .contact-detail .icon img.person {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50rem;
}

.all-contact-list .contact-detail .name p {
    margin-bottom: 0px;
    color: var(--black-to-white-text);
    font-size: 14.5px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
    display: inline-block;
    gap: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 350px;
}

.all-contact-list .contact-detail .name p span {
    font-size: 9px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
}

.all-contact-list .contact-detail .name span {
    color: var(--text-dark-gray-to-white);
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
}

.all-contact-list .all-contact-list-item .name .status-text {
    font-size: 9px;
    color: var(--text-dark-gray-to-white);
    line-height: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 350px;
}

.all-contact-list .all-contact-list-item .calling-options>div {
    display: none;
}

.all-contact-list .all-contact-list-item:hover .calling-options>div {
    display: flex;
}

.all-contact-list .all-contact-list-item .calling-options>div[id^="favButton"]:has(._removeFavcontact) {
    display: flex;
}

.all-contact-list .all-contact-list-item:hover,
.call_sip_row:hover {
    background: var(--element-active-bg);
}

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

.call-history-screen {
    transition: .5s;
}

.add-contact {
    margin-bottom: -10px;
    font-size: 11px;
    color: var(--label-color);
}

.right-side .tab-content {
    overflow: clip overlay;
    height: 100% !important;
}

.header-options {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
}

.header-options div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.header-options div.select-option {
    height: 27px;
    border-radius: 33px;
    min-width: 96px;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 10px;
    cursor: pointer;
    padding: 0 8px;
}

.header-options div.select-option:hover {
    background-color: var(--element-active-bg);
}

.header-options span {
    color: var(--black-to-white-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
}

.google-mark {
    font-size: 10px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: 0em;
    color: var(--blue-color);
    margin-right: auto;
    margin-left: 8px;
}

.all-contact-list .checkbox label {
    border-radius: 2px;
}

.all-contact-list .checkbox {
    width: 14px !important;
    height: 14px !important;
    position: absolute;
    right: 10px;
}

.all-contact-list .checkbox label:after {
    top: 2px;
    right: 2px;
}

/* ALL CONTACTS CSS :: ENDS */

/* CONTACT DETAIL CSS :: STARTS */
.open-contact-detail {
    padding: 20px 25px 0;
    animation: fadeInPage ease 1.5s;
    display: flex;
    flex-direction: column;
    /* height: calc(100dvh - 114px); */
    overflow: hidden;
}

.open-contact-detail .contact-name {
    padding: 15px 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    height: 96px;
    border-radius: 5px;
    background-color: var(--light-bg-color);
}

.open-contact-detail .contact-name .icon {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--primary-bg);
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 500;
    line-height: 45px;
    letter-spacing: 0em;
    flex-shrink: 0;
    text-transform: uppercase;
}

.open-contact-detail .contact-name .icon svg {
    width: 36px;
    height: auto;
}

.open-contact-detail .contact-name .icon img.person {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50rem;
}

.open-contact-detail .contact-name p {
    color: var(--black-to-white-text);
    font-size: 21px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0em;
    margin-bottom: 0px;
}

.other-contact-details .calling-options {
    display: flex;
    position: unset;
}

.other-contact-details .calling-options div {
    width: 30px;
    height: 30px;
}

.contact-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.contact-detail-item:nth-child(1) {
    margin-top: 20px;
}

.contact-detail-item:nth-last-child(1) {
    margin-bottom: 30px;
}

.contact-detail-item svg {
    flex-shrink: 0;
}

.contact-detail-item p {
    margin-bottom: 0px;
    color: var(--black-to-white-text);
    font-size: 17px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0em;
    display: flex;
    align-items: center;
    word-break: break-all;
}

.contact-detail-item h6 {
    color: var(--text-dark-gray-to-white);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
    margin-bottom: 0px;
}

.fav-remove-fav {
    color: var(--black-to-white-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
}

/* CONTACT DETAIL CSS :: EDNS */

/* CLOUD CONTACT :: SYNC OPTION CSS :: STARTS */
.action-rounded-btn {
    width: 31px;
    height: 31px;
    justify-content: center;
    padding: 4px;
    transition: background-color 0.3s ease-in-out;
}

.action-rounded-btn:hover {
    background-color: var(--hover-icon-bg);
}

.action-rounded-btn:active {
    background: var(--hover-dark-bg);
}

.sync-details {
    width: 380px;
    min-height: 395px;
    background: var(--bg-white-to-dark-color);
    box-shadow: 0px 7.11111px 17.7778px rgba(0, 0, 0, 0.05);
    border-radius: 18px;
    display: block;
    padding: 22px 25px;
    margin: 30px auto 20px auto;
}

.sync-details .sync-banner {
    margin: auto;
    margin-bottom: 25px;
}

.sync-details h3 {
    color: var(--black-to-white-text);
    font-size: 19px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: 0em;
    text-align: center;
    margin-bottom: 20px;
}

.sync-details .sync-with {
    height: 47px;
    padding: 15px;
    border-radius: 5px;
}

.sync-details .sync-with:hover {
    background-color: var(--hover-light-bg);
}

.sync-details .sync-with p {
    color: var(--black-to-white-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0em;
    margin-bottom: 0px;
}

.sync-details .checkbox label {
    border-radius: 3px;
}

button.sync-btn.m-auto.d-block {
    min-width: 100px;
    height: 40px;
    padding: 0px 10px;
    border-radius: 7px;
    border: none;
    outline: none;
    color: var(--white-color);
    background: var(--blue-color-to-primary);
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: 0em;
}

/* CLOUD CONTACT :: SYNC OPTION CSS :: ENDS */

/* CALL HISTROY CSS :: STARTS */
.call-history-container .left-side,
.voice-mail-container .left-side {
    width: unset;
}

.call-history-container .right-side,
.voice-mail-container .right-side {
    width: 100%;
}

.call-history-container,
.voice-mail-container {
    padding: 10px;
    width: calc(100% - 5px);
    height: calc(100dvh - 117px);
    overflow-y: overlay;
    margin-top: 5px;
    overflow-x: hidden;
}

.voice-mail-container {
    margin-top: 0;
}

.voice-mail-container .voice-list {
    border: 1px solid var(--call-btn-bg);
    box-shadow: 0px 1px 3px 0px #0000000D;
    margin: 0 15px;
}

.voice-mail-container .voice-list>div {
    cursor: pointer;
}

.voice-mail-container .voice-list .badge {
    background: var(--placeholder-color);
    color: var(--bg-white-to-dark-color);
    margin-left: 10px;
}

[dir="rtl"] .voice-mail-container .voice-list .badge {
    margin-right: 10px;
    margin-left: 0px;
}

.audiorange {
    background: var(--input-icon);
    width: 0%;
    height: 100%;
}

.full-audio {
    background: var(--received-chat-file-icon-bg);
    height: 6px;
    position: relative;
}

.voice-user-profile {
    width: 60px;
    height: 60px;
    font-size: 25px;
    border-radius: 50%;
    background-color: var(--primary-bg);
    color: var(--white-color);
    margin-right: 15px;
}

[dir="rtl"] .voice-user-profile {
    margin-right: 0px;
    margin-left: 15px;
}

.playv-recording {
    width: 20.6708984375px;
    height: 20.6708984375px;
    background: var(--input-icon);
    border-radius: 50%;
    position: absolute;
    top: -8px;
    border-width: 3px;
}

.right-call-detail {
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    overflow-x: hidden;
    transition: .5s;
    width: 0;
    border-left: 1px solid var(--divider-border);
}

.right-call-detail .header {
    padding: 12px 20px 12px 20px;
    border-bottom: 1px solid var(--divider-border);
    animation: fadeInRight ease .5s;
}

.right-call-detail .header div {
    gap: 15px;
}

.right-call-detail .header button {
    border: none;
    outline: none;
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    background-color: unset;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.right-call-detail .header button:hover {
    background-color: var(--hover-icon-bg);
}

.right-call-detail .details .call-detail {
    margin: 0;
}

.right-call-detail .details .call-detail {
    padding: 10px 8px 0 20px;
}

.details {
    /* padding: 15px 20px; */
    width: calc(100% - 5px);
    height: calc(100% - 62px);
    overflow-y: overlay;
    background-color: transparent;
}

.details .caller-detail {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--divider-border);
    position: relative;
}

.details .contact-detail-h {
    padding: 15px 20px;
    display: flex;
    align-items: center;
}

.details .contact-detail-h p {
    margin-bottom: 0;
    margin-left: 15px;
    font-size: 13px;
}

.details .call-detail {
    padding: 0px 20px;
}

.details .call-detail .recording-call {
    background: var(--my-chat-color);
    border-radius: 4.42px;
    padding: 0 5px;
    margin: 8px 0;
}

.recording-call .audioplayer-bar::before {
    background: var(--background);
}

.recording-call .audioplayer-bar-played {
    background: var(--sidebar-active-icon);
}

.caller-detail .calling-options {
    display: flex;
    position: absolute;
    right: 10px;
}

.call-detail .caller-id-detail {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    background: var(--call-btn-bg);
    height: 13px;
    width: fit-content;
    border-radius: 13px;
    padding: 0px 5px;
    margin: 10px 0;
    color: var(--text-dark-gray-to-white);
}

.call-detail .caller-id-detail span {
    font-size: 9px;
    font-weight: 400;
    line-height: 8px;
    letter-spacing: 0em;
}

.details .icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: 0em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.details .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.details .caller-name p {
    color: var(--black-to-white-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
    margin-bottom: 0px;
    line-break: anywhere;
    max-width: 140px;
}

.details .caller-name .number {
    color: var(--text-dark-gray-to-white);
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
}

.details .call-detail {
    margin: 0 25px 0px 0;
}

.call-detail .date-and-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.call-detail .date-and-time p {
    color: var(--text-dark-gray-to-white);
    margin-bottom: 0px;
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
}

.call-detail .call-type {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
    margin-top: 10px;
}

html[data-theme="dark"] .call-detail .call-type img[alt="inbound-call"] {
    filter: invert(1) brightness(10);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="dark"]) .call-detail .call-type img[alt="inbound-call"] {
        filter: invert(1) brightness(10);
    }
}

.call-detail .call-type p {
    color: var(--black-to-white-text);
    font-size: 11px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    margin-bottom: 0px;
}

.call-detail .missed-call p {
    color: var(--missed-call-red);
}

/* CALL HISTROY CSS :: ENDS */

/* BLIND TRANSFER CSS :: STARTS */
.transfer-to-dropdown {
    position: absolute;
    min-width: 325px;
    max-width: 325px !important;
    height: 240px;
    border: 1px solid var(--seprator-color);
    box-shadow: var(--common-box-shadow);
    border-radius: 20px;
    background-color: var(--input-bg);
    padding: 15px 5px 15px 15px;
    top: 10px;
    z-index: 1;
}

.transfer-to-dropdown p {
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.01em;
    color: var(--primary-color);
    margin-bottom: 5px;
    padding-left: 5px;
}

.transfer-to-dropdown ul {
    overflow-y: overlay;
    height: 96%;
}

.transfer-to-dropdown ul li:not(:last-child) {
    border-bottom: 1px solid var(--seprator-color);
}

.transfer-to-dropdown ul li {
    height: 45px;
    margin-bottom: 5px;
    padding: 0px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.transfer-to-dropdown ul li .checkbox {
    display: none;
}

.transfer-to-dropdown ul li.active {
    background-color: var(--hover-light-bg);
    border-radius: 5px;
}

.transfer-to-dropdown ul li.active .checkbox {
    display: block;
}

.transfer-to-dropdown ul li:hover {
    background-color: var(--hover-light-bg);
    border-radius: 5px;
}

.transfer-to-dropdown li a {
    padding: 0px !important;
}

/* ONCLCIK ACTIVE BUTTON */

.active-btn {
    background-color: var(--primary-color) !important;
}

.active-btn svg path {
    fill: var(--white-color) !important;
}

/* ONCLCIK ACTIVE BUTTON */

.transfer-to-dropdown .caller-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.transfer-to-dropdown .caller-info .caller-icon {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    flex-shrink: 0;
}

.transfer-to-dropdown .caller-name {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
    padding: 0px;
}

.transfer-to-dropdown .caller-name span {
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--text-dark-gray-to-white);
}

/* BLIND TRANSFER CSS :: ENDS */

/* ATTENDANT TRANSFER CSS :: STARTS */

.active-call-item {
    height: 45px;
    border-radius: 5px;
    padding: 5px 10px;
    width: 330px;
}

.active-call-item:hover {
    background-color: var(--element-active-bg);
}

.active-call-item.active {
    background-color: var(--element-active-bg);
}

.call-action-buttons button {
    width: 32px;
    height: 32px;
    background-color: var(--white-color);
    border-radius: 50%;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    /* z-index: 1000; */
}

.active-call-info .person-icon,
.conference-call .person-icon {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    border-radius: 50%;
}

.active-call-info .person-name {
    color: var(--black-to-white-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 13px;
    letter-spacing: 0em;
    display: flex;
    align-items: center;
    gap: 5px;

}

.active-call-info .person-name>span {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 122px;
}

.active-call-info .call-duration,
.active-call-info .call-status {
    color: var(--black-to-white-text);
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: left;
    display: contents;
}

.active-call-info .call-duration img,
.active-call-info .call-status img {
    margin-right: 2px;
}

.active-call-info .call-status {
    color: var(--input-icon);
}

.active-call-info .person-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.call-action-buttons button.play-call-btn {
    background-color: var(--primary-bg);
}

.call-action-buttons button.unmute-call-btn {
    background-color: var(--primary-bg);
    /* color: var(--text-dark-gray-to-white) !important; */
}

/* .call-action-buttons button.mute-call-btn {
    background: var(--primary-bg);
    color: var(--white-color) !important;

} */

.call-action-buttons button.end-call-btn {
    background-color: var(--call-decline-red);
}

.active-call-info .caller-detail {
    gap: 10px;
    max-width: calc(100% - 117px);
}

.active-call-info .caller-detail .person-details-box {
    max-width: calc(100% - 50px);
}

.call-action-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.call-button-options {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 0;
    position: relative;
    flex-wrap: wrap;
    background: var(--bg-color);
}

.call-button-options button {
    height: 30px;
    border-radius: 56px;
    border: 1px solid var(--input-icon);
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--input-icon);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
    /* width: 50%; */
    margin-top: 5px;
    z-index: 99;
    width: 22%;
    padding: 10px 15px;
    margin: 0;
}

.call-button-options button svg {
    /* margin-right: 5px; */
}

/* Disabled merge button styling for 1-to-1 calls */
.call-button-options button:disabled {
    border: 1px solid var(--text-gray-to-white);
    color: var(--text-gray-to-white);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Disabled styling for buttons when blind transfer is active */
.call-button-options.blind-transfer-active button:not(.blind-transfer) {
    border: 1px solid var(--text-gray-to-white) !important;
    color: var(--text-gray-to-white) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Tooltip positioning for call-button-options buttons - show above button to avoid SVG overlap */
.call-button-options button .tooltiptext {
    top: auto;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    z-index: 999;
    white-space: nowrap;
}

/* VIDEO CALL CSS :: STARTS */
.right-side:has(.active-video-call-screen) {
    background-color: #1E1E1E;
    height: 100%;
}

.active-video-call-screen .active-call-header {
    padding: 25px 25px 16px 25px;
    position: relative;
    z-index: 1;
}

.active-video-call-screen .active-call-header>.active-caller-name {
    color: var(--white-color);
    font-size: 18px;
    padding: 5px 10px;
    border-radius: 8px;
    background-color: rgb(0 0 0 / 31%);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 50px);
}

.active-video-call-screen .active-call-header .back-arrow {
    border: none;
    outline: none;
    background-color: transparent;
}

.active-video-call-screen .video-call-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.active-video-call-screen .main-video {
    height: 100%;
    width: 100%;
}

.video-popup video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.active-video-call-screen .main-video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.active-video-call-screen .main-video img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.active-video-call-screen .video-popup {
    position: absolute;
    bottom: 60px;
    min-width: 150px;
    max-width: 214px;
    right: 20px;
    height: 160px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #1E1E1E;
}

.active-video-call-screen .video-popup::before {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0D0D0D 0%, rgba(183, 183, 183, 0) 36.62%);
    display: block;
    position: absolute;
    border-radius: 10px;
}

.active-video-call-screen .video-popup-header {
    position: absolute;
    top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0px 10px;
    z-index: 9;
}

.active-video-call-screen .video-popup-header.show {
    display: flex !important;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.active-video-call-screen .video-popup-header p {
    color: var(--white-color);
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
}

.active-video-call-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    position: absolute;
    width: 100%;
    bottom: 40px;
    left: 0;
    z-index: 1;
}

.active-video-call-actions button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--call-btn-bg);
    color: var(--text-dark-gray-to-white);
}

.active-video-call-actions .dtmf-call.show,
.active-video-call-actions .transfer-call.show {
    background-color: var(--primary-bg) !important;
    color: var(--white-color);
    display: flex !important;
}

.active-video-call-actions .dtmf-call.active,
.active-video-call-actions .transfer-call.active,
.active-video-call-actions .conference-call.active,
.active-video-call-actions .remove-participant.active {
    background-color: var(--primary-bg) !important;
    color: var(--white-color);
}

.active-video-call-actions button.end-active-call {
    background-color: var(--call-decline-red);
}

.active-video-call-actions .call-duration {
    max-width: fit-content;
    padding: 1px 5px;
    background: var(--call-activity-green);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white-color);
    border-radius: 7px;
    left: 25px;
    font-size: 14px;
    font-weight: 500;
}

.active-video-call-actions .call-duration p {
    margin-bottom: 0px;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0em;
}

.active-video-call-screen .video-popup .off-camera,
.active-video-call-screen .main-video .off-camera {
    display: flex;
    position: absolute;
    z-index: 1;
}

.active-video-call-screen .main-video .off-camera svg {
    width: 60px;
    height: 60px;
}

.active-video-call-screen .video-popup .off-camera svg {
    width: 20px;
    height: 20px;
}

.active-video-call-screen .main-video .off-camera:not(.d-none)~video,
.active-video-call-screen .video-popup .off-camera:not(.d-none)~video {
    position: relative;
    z-index: 0;
    visibility: hidden;
}

/* VIDEO CALL CSS :: ENDS */


/* SETTING CSS :: STARTS */

.setting-list-item.nav {
    margin-top: 15px !important;
    width: 100%;
    display: block;
    padding: 5px 15px !important;
    animation: fadeInPage ease 1s;
}

.setting-list-item li a {
    color: var(--black-to-white-text) !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: left;
}

.setting-list-item li a span:first-child {
    min-width: 28px;
    display: flex;
    justify-content: center;
}

.setting-list-item.nav-pills .nav-link {
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: start;
    margin-bottom: 10px;
    gap: 12px;
    cursor: pointer;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.setting-list-item.nav-pills .nav-link:hover {
    background-color: var(--element-active-bg);
}

.setting-list-item.nav-pills .nav-link.active,
.setting-list-item.nav-pills .show>.nav-link {
    background: var(--hover-dark-bg) !important;
}

.setting-list-item+.app-version {
    font-size: 11px;
    position: absolute;
    /* bottom: 30px; */
    bottom: 15px;
    left: 2.15rem;
    display: flex;
    column-gap: 4px;
    align-items: center;
    color: var(--black-to-white-text);
}

.new-version-btn {
    font-size: 10px;
    font-weight: 500;
    column-gap: 4px;
    text-transform: capitalize;
    color: var(--white-color);
    text-decoration: none;
    cursor: pointer;
    background-color: var(--primary-color);
    border: none;
    border-radius: 3px;
    display: inline-block;
    padding: 0.5px 3.8px;
    user-select: none;
}

.new-version-btn:hover {
    color: var(--white-color);
}

.download-msg-box>p {
    text-align: unset !important;
    font-size: 13px !important;
}

.download-msg-box h6 {
    font-size: 12px;
}

.download-msg-box>.release-note-container {
    background-color: var(--divider-border);
    border-radius: 10px;
    padding: 0.7rem;
    margin-top: 0.5rem;
    max-height: 220px;
    overflow: clip overlay;
}

.download-msg-box>.release-note-container>h6 {
    font-size: 16px;
}

.download-msg-box>.release-note-container>p {
    font-size: 11px !important;
    line-height: 18px;
    color: var(--text-dark-gray-to-white);
    text-align: unset !important;
}

.download-msg-box>.release-note-container>.chip {
    display: inline-block;
    font-size: 10px;
    line-height: 18px;
    color: var(--white-color);
    background-color: var(--primary-color);
    padding: 1px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 500;
}

.download-msg-box>.release-note-container>.list-points {
    font-size: 11px;
    margin-left: 18px !important;
    color: var(--text-dark-gray-to-white);
}

[dir="rtl"] .download-msg-box>.release-note-container>.list-points {
    margin-left: 0 !important;
    margin-right: 18px !important;
}

.download-msg-box>.release-note-container>.list-points li {
    list-style: inherit;
    cursor: default;
}

.version-modal-popup.logout-modal-popup .modal-footer {
    justify-content: end !important;
}

.version-modal-popup.logout-modal-popup .modal-header h5 {
    font-size: 16px;
    font-weight: 500;
}

.downloading-msg-box p {
    text-align: unset !important;
    font-weight: 500 !important;
}

.downloading-msg-box .total-size,
.downloading-msg-box .total-size-percentage {
    font-size: 12px;
    line-height: 18px;
    color: var(--text-dark-gray-to-white);
}

.downloading-msg-box span::after {
    content: "...";
    animation: loadingAnimation 2s linear infinite;
}

@keyframes loadingAnimation {
    0% {
        content: "...";
    }

    25% {
        content: "";
    }

    50% {
        content: ".";
    }

    75% {
        content: "..";
    }
}

[dir="rtl"] .setting-list-item+.app-version {
    left: unset;
    right: 2.15rem;
}

.setting-container {
    height: 100%;
    overflow-y: overlay;
}

.setting-conatiner {
    padding-bottom: 1px;
}

.setting-conatiner .options-container,
.setting-container .options-container,
.tab-content .options-container {
    height: calc(100dvh - 125px);
    overflow: clip overlay;
}

.setting-container>.header:nth-child(1) {
    padding: 15px 20px;
    cursor: default !important;
}

.setting-container .header h3 {
    color: var(--black-to-white-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    margin-bottom: 0px;
    cursor: text !important;
}

.setting-options {
    background-color: var(--bg-card-color);
    box-shadow: -0.6208994388580322px 1.8626981973648071px 4.967195510864258px 0px #0000001F;
    margin: 20px;
    border-radius: 5px;
    height: fit-content !important;
    animation: fadeInPage ease 1.5s;
}

.setting-options h3 {
    color: var(--black-to-white-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    padding: 10px 15px 0px 15px;
}

/* APPLICATION SETTING CSS :: STARTS */

.setting-options ul {
    padding: 1px 18px !important;
}

.setting-options ul li {
    cursor: default;
}

.setting-options .application-option li .theme-dropdown {
    width: 200px;
}

.setting-options .application-option li .theme-dropdown .form-select.new-select-input,
.setting-options .application-option li .theme-dropdown .form-select.new-select-input:read-only {
    border: none !important;
    background-color: var(--dropdown-secondary-bg);
    color: var(--black-to-white-text);
}

.setting-options .application-option li .theme-dropdown .form-select.new-select-input .select2-chosen,
.setting-options .application-option li .theme-dropdown .form-select.new-select-input:read-only .select2-chosen {
    font-size: 12px;
    font-weight: 500;
}

.setting-options .call-options {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.setting-options .call-options div {
    display: flex;
    justify-content: flex-start;
    align-items: start;
    min-width: 150px;
    flex-direction: column;
}

.setting-options .call-options input[type="text"] {
    width: 235px;
    height: 30px;
    padding: 5px 10px;
    border-radius: 3px;
    border: 1px solid var(--input-border-color);
    color: var(--text-dark-gray-to-white);
    font-size: 9px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0em;
}

.call-forwarding-options h3 {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--black-to-white-text);
    padding: 13px 0px 0px 15px;
    margin-bottom: 0px;
}

.setting-options .call-options input[type="text"]::placeholder {
    color: var(--placeholder-color);
}

.setting-options .application-option li,
.setting-options .answering-rule li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0px;
}

.setting-options .application-option li:not(:last-child) {
    border-bottom: 1px solid var(--divider-border);
}

.setting-options .application-option li p,
.greetings p,
.language-option li p,
.answering-rule li p {
    color: var(--input-icon);
    font-size: 14px;
    font-weight: 600;
    line-height: 23px;
    letter-spacing: 0em;
    margin-bottom: 0px !important;
}

.setting-options .application-option li span,
.answering-rule li span {
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
}

.setting-container .toggle label:before {
    width: 22px;
    height: 13px;
}

.setting-container .toggle label:after {
    height: 9px;
    width: 9px;
}

.setting-container .toggle input[type=checkbox]:checked+label:after {
    left: 10px;
}

.setting-container .toggle input[type=checkbox]:checked+label:before {
    background-color: var(--blue-color);
}

/* APPLICATION SETTING CSS :: ENDS */

/* LANGUAGE SETTING CSS :: STARTS */

.setting-options .language-option li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    padding: 20px 0px;
}

.setting-container .language-option li:not(:last-child) {
    border-bottom: 1px solid var(--divider-border);
}

.setting-options .language-option .checkbox {
    height: 17px;
    width: 17px;
}

.setting-container .language-option .checkbox label:after {
    width: 7px;
    height: 4.5px;
    top: 4px;
    right: 4px;
    opacity: 1;
}

/* LANGUAGE SETTING CSS :: STARTS */

/* TEST CONNECTION CSS :: STARTS */
.connection-settings {
    width: 100%;
    padding: 20px;
    border-collapse: unset !important;
    animation: fadeInPage ease 2s;
}

.connection-settings tr {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.connection-settings tr td:first-child {
    font-size: 11px;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--input-icon);
}

.connection-settings tr td {
    color: var(--black-to-white-text);
    font-size: 11px;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 25px;
    width: 40%;
}

.connection-successfully {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 30px;
}

.connection-successfully img,
.connection-successfully svg {
    margin-bottom: 10px;
}

.connection-successfully p {
    font-size: 9px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
}

.connection-successfully p.time {
    font-variant: var(--black-to-white-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
}

.connection-successfully .progress:after {
    content: unset;
}

.connection-successfully .progress {
    width: 150px;
    height: 13px !important;
    background: unset !important;
}

.connection-successfully .progress-bar-animated {
    -webkit-animation: 1s linear infinite progress-bar-stripes !important;
    animation: 1s linear infinite progress-bar-stripes !important;
}

.connection-successfully .progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent) !important;
    background-size: 1rem 1rem !important;
}

.connection-successfully .progress .progress-bar {
    background-color: var(--call-activity-green);
    border-width: unset;
    position: unset !important;
    border-style: unset !important;
    width: 100% !important;
    border-radius: 50px;
}

/* TEST CONNECTION CSS :: ENDS */


/* DEBUGGING LOG CSS :: STARTS */
.debugging-content {
    padding: 30px 25px;
    animation: fadeInPage ease 1.5s;
}

.debugging-content p {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 15px;
}

.debugging-content button,
.meeting-btn {
    height: 40px;
    padding: 0px 25px;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
    border: none;
    outline: none;
    border-radius: 36px;
    margin-right: 10px;
    margin-bottom: 20px;
}

.debugging-content button.log-btn,
.meeting-btn {
    background-color: var(--primary-bg);
    color: var(--white-color);
}

.debugging-content button.disable-btn {
    background-color: var(--tertiary-color);
    color: var(--white-color);
}

.websocket-test {
    padding: 15px 25px;
}

.websocket-test h3 {
    color: var(--input-icon);
    font-size: 19px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: 0em;
    margin-bottom: 20px;
}

.connection-detail {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    border: 1px solid var(--divider-border);
    border-radius: 11px;
    background: var(--bg-card-color);
    padding: 15px;
    animation: fadeInPage ease 1.5s;
}

.connection-detail p {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--black-to-white-text);
}

.connection-detail .time {
    width: 100%;
    background: var(--hover-dark-bg);
    padding: 8px 10px;
    border-radius: 6px;
}

.connection-detail .time p {
    margin-bottom: 0px;
    font-size: 10px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 2px;
}

.connection-detail .time span {
    font-size: 9px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
}

.connection-detail.connection-failed p {
    color: var(--chat-counter);
}

.connection-detail.connection-failed .time p {
    color: var(--black-to-white-text);
}

/* DEBUGGING LOG CSS :: ENDS */

/* RE-REGISTER CSS :: STARTS */
.re-register-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 75px;
    animation: fadeInPage ease 1.5s;
}

.re-register-content img,
.re-register-content svg {
    margin-bottom: 10px;
}

.re-register-content p {
    color: var(--black-to-white-text);
    font-size: 9px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0em;
    margin-bottom: 0px;
}

.re-register-content .progress:after,
.downloading-msg-box .progress:after {
    content: unset;
}

.re-register-content .progress,
.downloading-msg-box .progress {
    width: 150px;
    height: 13px !important;
    background: #F1F2F5 !important;
    border-radius: 50px !important;
    margin-top: 18px;
}

.re-register-content .progress-bar-animated,
.downloading-msg-box .progress-bar-animated {
    -webkit-animation: 1s linear infinite progress-bar-stripes !important;
    animation: 1s linear infinite progress-bar-stripes !important;
}

.re-register-content .progress-bar-striped,
.downloading-msg-box .progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent) !important;
    background-size: 1rem 1rem !important;
}

.re-register-content .progress .progress-bar,
.downloading-msg-box .progress .progress-bar {
    background: var(--tertiary-color);
    border-width: unset;
    position: unset !important;
    border-style: unset !important;
    border-radius: 50px;
}

.re-register-content.register-done .progress .progress-bar,
.completed .progress .progress-bar {
    background: var(--call-activity-green);
    width: 100% !important;
}

/* RE-REGISTER CSS :: ENDS */

/* KEYBOARD SHORTCUT CSS :: STARTS */
.shortcuts-container {
    padding: 20px;
}

.shortcuts-container h3 {
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0em;
    color: var(--text-gray-to-white);
}

.shortcuts-container .setting-options {
    margin: 0px;
    padding: 20px 15px;
}

.shortcuts-container .setting-options p {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 5px;
}

.shortcuts-container .setting-options .settings {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shortcuts-container .setting-options .settings p {
    color: var(--text-dark-gray-to-white);
    margin-bottom: 0px;
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    max-width: 385px;
}

.shortcuts-container .message-formating {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--white-color);
    box-shadow: -0.6208994388580322px 1.8626981973648071px 4.967195510864258px 0px #0000001F;
    border-radius: 5px;
    height: fit-content !important;
    margin: 0px;
    padding: 20px 15px;
    animation: fadeInPage ease 1.5s;
    gap: 30px;
}

.shortcuts-container .message-formating .column {
    width: 100%;
}

.shortcuts-container .message-formating .column .options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.shortcuts-container .message-formating .options p {
    font-size: 10px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
}

.shortcuts-container .message-formating .options .option-keys {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
}

.shortcuts-container .message-formating .options button {
    box-shadow: -0.7892683744430542px 1.9731708765029907px 0.9865854382514954px 0px #00000030;
    background: var(--divider-border);
    height: 18px;
    padding: 3px 6px;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-dark-gray-to-white);
    font-size: 10px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: 0em;
    border: none;
    outline: none;
}

/* KEYBOARD SHORTCUT CSS :: ENDS */

/* SETTING CSS :: ENDS */

/*  START CHAT CSS :: STARTS */
.start-chat {
    padding: 50px 100px;
    padding-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: fadeInPage ease 2s;
}

[lang="de"] .start-chat.message-home {
    padding: 50px 65px;
}

.start-chat h3 {
    color: var(--black-to-white-text);
    font-size: 19px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: 0em;
    margin-bottom: 10px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.start-chat p {
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
}

.start-chat .chat-search-bar {
    width: 100%;
    min-width: 380px;
    max-width: 500px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-bottom: 10px;
}

.start-chat input[type="search"] {
    width: 100%;
    height: 100%;
    border: 1px solid var(--input-border-color);
    border-radius: 26px;
    padding: 8px 10px 8px 32px;
    color: var(--text-dark-gray-to-white);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    cursor: auto;
}

.start-chat.message-home input[type="search"] {
    padding-left: 50px;
}

[lang="du"] .start-chat.message-home input[type="search"] {
    padding-left: 60px;
}

.chat-search-bar>span {
    position: absolute;
    height: 100%;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--input-border-color);
    color: var(--black-to-white-text);
    left: 0;
    padding-left: 3px;
}

[lang="du"] .chat-search-bar>span {
    width: 55px;
}

.start-chat .chat-search-bar .search-icon {
    position: absolute;
    left: 10px;
}

.start-chat .search-arrow {
    width: 30px;
    height: 30px;
    background-color: var(--primary-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 5px;
    border-radius: 100%;
    border: none;
    cursor: pointer;
}

.start-chat .search-arrow img {
    position: unset;
}

.start-chat input[type="search"].send-msz-search-bar {
    padding-right: 70px;
}

[dir="rtl"] .start-chat input[type="search"].send-msz-search-bar {
    padding-right: 32px;
    padding-left: 70px;
}

/*  changes for Manual roster fetch TRAG-5736  */
.start-chat .roster-refetch {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 40px;
    border-radius: 100%;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

[dir="rtl"] .start-chat .roster-refetch {
    right: unset;
    left: 40px;
}

.start-chat .roster-refetch:hover {
    background: var(--hover-dark-bg);
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

.rotate-el {
    animation: rotate 3s infinite linear;
    transform-origin: center;
}

.no-data {
    pointer-events: none !important;
    border-radius: 0 !important;
}

.chat-suggestion {
    background-color: var(--dropdown-bg) !important;
    box-shadow: var(--common-box-shadow);
    border-radius: 15px !important;
    min-height: fit-content;
    max-height: 195px;
    width: 98%;
    left: 1% !important;
    right: 1% !important;
    padding: 5px 5px 5px 12px !important;
    top: 5px !important;
}

.chat-suggestion:not(:has(li)) {
    display: none !important;
}

.chat-suggestion ul {
    max-height: 185px;
    overflow-y: overlay;
    width: 100%;
}

.chat-suggestion ul li {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.chat-suggestion ul li div {
    position: relative;
    flex-shrink: 0;
}

.chat-suggestion ul li div .status {
    position: absolute;
    top: -2px;
    right: -5px;
    height: 14px !important;
    width: 14px !important;
    object-fit: unset !important;
}

.chat-suggestion ul li:hover {
    background-color: var(--element-active-bg);
}

.chat-suggestion ul li:not(:last-child)::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: -2.5px;
    background-color: var(--divider-border);
}

.chat-suggestion ul li div {
    height: 32px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-bg);
    border-radius: 50%;
    color: var(--white-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
}

.chat-suggestion ul li div svg {
    width: 20px;
    height: auto;
}

.chat-suggestion ul li .onclick-checkbox {
    height: unset;
    width: unset;
    background-color: unset;
    position: absolute;
    right: 20px;
}

.chat-suggestion ul li .checkbox {
    width: 14px !important;
    height: 14px !important;
    position: relative;
    background-color: unset !important;
}

.chat-suggestion ul li div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.chat-suggestion ul li .checkbox label:after {
    width: 6px;
    height: 4px;
    right: 2.5px;
    opacity: 1;
}

.chat-suggestion ul li p {
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
}

.chat-suggestion ul li p .ext-num {
    font-size: 8px;
    color: var(--text-dark-gray-to-white);
}

.chat-suggestion .action-btn {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-top: 35px;
    gap: 10px;
}

.chat-suggestion .action-btn button {
    width: 130px;
    height: 40px;
    border-radius: 35px;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
}

.chat-suggestion .action-btn .cancel-btn {
    background-color: transparent;
    border: 1px solid var(--gray-color-lighter);
    color: var(--gray-color-lighter);
}

.chat-suggestion .action-btn .create-btn {
    background: var(--btn-gradient);
    color: var(--white-color);
    border: none;
    outline: none;
}

/* START CHAT CSS :: ENDS */

/* RECENT CHAT SECTION CSS :: STARTS */
#recentMessage {
    padding: 0px 20px;
}

.recent-chat-info {
    height: calc(100% - 66px);
    overflow-y: auto;
    padding: 20px;
    margin-top: -30px;
    padding-bottom: 0px;
}

.chat-header-options {
    position: absolute;
    right: 10px;
    gap: 20px;
}

.chat-header-options .menu-content .menu-header .accordion-button::after {
    content: unset !important;
}

.recent-chat-list .recent-search-bar {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-top: 8px;
    margin-bottom: 10px;
}

.recent-chat-list input[type="search"] {
    width: 100%;
    height: 100%;
    border: 1px solid var(--input-border-color);
    border-radius: 26px;
    padding: 8px 10px 8px 32px;
    color: var(--text-dark-gray-to-white);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
}

.recent-chat-list .recent-search-bar svg {
    position: absolute;
    left: 10px;
}

.recent-chat-list .chat-list-item:not(:last-child)::after {
    content: '';
    width: 100%;
    position: absolute;
    border-bottom: 1px solid var(--hover-dark-bg);
    left: 0;
    right: 0;
    bottom: -4px;
}

/* ._recentMsgtab .chat-list-item{
    animation: unset !important;
} */

.chat-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px;
    border-radius: 8px;
    margin: 6px 0px;
    position: relative;
    height: 60px;
    cursor: pointer;
    transition: background-color 200ms ease-out;
}

.chat-list-item:hover {
    background: var(--hover-dark-bg);
}

.chat-list-item.selected-chat {
    background: var(--hover-dark-bg);
}

.info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    width: calc(100% - 75px);
}

.info .img {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    position: relative;
    background-color: var(--primary-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
}

.info .img span {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: 0em;
    text-transform: uppercase;
    text-align: center;
}

.info .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
}

.info .img .status {
    width: 13px;
    height: 13px;
    position: absolute;
    top: 0px;
    right: -3px;
}

.info p {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 170px;
}

#_recentMsgtab .info>div>p+span,
#recentChatList .info>div>p+span>span:nth-child(2)>span.d-flex {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    line-break: anywhere;
    width: 205px;
    text-overflow: ellipsis;
    display: inline-block;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: nowrap;
}

#recentChatList .info>div>p+span>span:nth-child(2)>span.d-flex {
    line-height: 1.6;
    display: inline-block !important;
    width: 130px;
}

#recentChatList .info>div>p+span.d-flex {
    line-height: 0.9;
}

.time-date {
    display: flex;
    justify-content: end;
    flex-direction: column;
    align-items: end;
    flex-shrink: 0;
}

.time-date .time {
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
    margin-bottom: 0px;
    padding-top: 6px;
}

.time-date .chat-counter {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--chat-counter);
    color: var(--white-color);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0em;
    margin-top: 2px;
}

.time-date .chat-counter.small-dot {
    width: 7px;
    height: 7px;
}


/* RECENT CHAT SECTION CSS :: ENDS */
/* START CHAT CSS :: ENDS */

/* CHAT BODY CSS :: STARTS */
.chat-container {
    position: relative;
    transition: 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.chat-container.info-open {
    margin-right: 220px;
}

[dir='rtl'] .chat-container.info-open {
    margin-right: 0;
    margin-left: 220px;
}

.chat-container .header {
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 62px;
    position: sticky;
    top: 0;
    z-index: 9;
    border-bottom: 1px solid var(--divider-border);
    animation: unset !important;
}

.chat-container .header .user-detail-box {
    width: calc(100% - 114px);
    flex-grow: 1;
}

.chat-container .header .user-detail-box .main-wrapper {
    max-width: calc(100% - 43px);
}

.chat-container .chat-forward-header {
    border-bottom: 1px solid var(--divider-border);
    padding: 25px 20px 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 62px;
}

.chat-container .chat-forward-header h3 {
    font-size: 19px;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
}

.chat-forward-header .chat-options {
    gap: 20px !important;
}

.chat-container .person-img {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background-color: var(--primary-bg);
    color: var(--white-color);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    text-transform: uppercase;
    margin-right: 10px;
}

.chat-container .person-img .remoteUserName svg {
    width: 18px;
    height: auto;
}

.chat-container .person-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.chat-container .person-detail {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    cursor: pointer;
}

.chat-container .person-detail p {
    margin-bottom: 0px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-container .person-detail span {
    font-size: 9px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
    display: flex;
    align-items: center;
    gap: 2.5px;
}

.chat-container .person-detail span#remoteUserDurationAgo {
    height: 14px;
}

.chat-container .chat-options {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.chat-container .chat-options .option-btn-box {
    position: relative;
}

.chat-container .chat-options .option-btn-box button,
.chat-container .chat-options .option-btn-box#chatVideo>div,
.chat-container .chat-options .option-btn-box#chatCall>div {
    outline: none !important;
    border: none !important;
    cursor: pointer;
    background-color: transparent;
    padding: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50rem;
    color: var(--input-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease-in-out;
}

.chat-container .chat-options .option-btn-box button:hover,
.chat-container .chat-options .option-btn-box#chatVideo>div:hover,
.chat-container .chat-options .option-btn-box#chatCall>div:hover {
    background-color: var(--element-active-bg);
}

.chat-container .chat-options .searchbar {
    height: 32px;
    width: 228px;
    position: absolute;
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: ease;
    right: 0;
    top: 0;
    display: none;
    z-index: 1080;
}

.chat-container .chat-options .searchbar input[type="search"] {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    background-color: var(--white-color);
    border: 0.75px solid var(--input-border-color);
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
}

.chat-container .chat-options .searchbar input[type="search"] ::placeholder {
    color: var(--placeholder-color);
}

.chat-container .chat-options .searchbar input[type="search"]:focus,
.chat-container .chat-options .searchbar input[type="search"]:not(:placeholder-shown) {
    padding: 5px 115px 5px 28px;
}

[dir="rtl"] .chat-container .chat-options .searchbar input[type="search"]:focus,
[dir="rtl"] .chat-container .chat-options .searchbar input[type="search"]:not(:placeholder-shown) {
    padding: 5px 28px 5px 115px;
}

.chat-container .chat-options .searchbar input[type="search"]:focus,
.chat-container .chat-options .searchbar input[type="search"]:not(:placeholder-shown),
.chat-container .chat-options .searchbar:has(input[type="search"]:focus),
.chat-container .chat-options .searchbar:has(input[type="search"]:not(:placeholder-shown)) {
    width: 312px;
}

.chat-container .chat-options .search-text-box {
    width: fit-content;
    height: 32px;
    opacity: 0;
    visibility: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--text-dark-gray-to-white);
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    position: absolute;
    right: 0px;
    top: 0;
    pointer-events: none;
}

.chat-container .chat-options .search-text-box .close {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-container .chat-options .search-text-box .close svg {
    height: 12px;
}

.chat-container .chat-options .search-text-box .close:hover,
.chat-container .chat-options .search-text-box .arrow:hover {
    background-color: var(--element-active-bg);
}

.chat-footer .attachment-option:hover,
.chat-footer .emoji-option:hover {
    background-color: var(--hover-icon-bg);
}

.chat-container .chat-options .search-text-box .arrow {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--hover-light-bg);
    outline: none;
    border: none;
    margin: 0px 2px;
    padding: 2.5px;
}

.chat-container .chat-options .search-text-box .vr-border {
    width: 0px;
    height: 30px;
    border-left: 0.5px solid var(--divider-border);
    margin: 0px 5px;
}

.chat-container .chat-options .search-text-box .arrow img,
.chat-container .chat-options .search-text-box .close img {
    position: unset !important;
}


.chat-container .chat-options .searchbar input[type="search"]:focus .search-text-box,
.chat-container .chat-options .searchbar input[type="search"]:not(:placeholder-shown) .search-text-box,
.chat-container .chat-options .searchbar:has(input[type="search"]:focus) .search-text-box,
.chat-container .chat-options .searchbar:has(input[type="search"]:not(:placeholder-shown)) .search-text-box {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.chat-container .chat-options .searchbar img {
    position: absolute;
    left: 10px;
}

.chat-body {
    padding: 15px 0px;
    height: 100%;
    width: 100%;
    overflow-y: overlay;
    position: relative;
    overflow-x: hidden;
}

.yellow-text {
    background-color: var(--highlight-txt);
    color: #000;
}

.chat-body .date-time {
    color: var(--text-gray-to-white);
    width: 100%;
    text-align: center;
    font-size: 9px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0em;
}

.type-first-msg {
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.type-first-msg p {
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
    margin-bottom: 0px;
    color: var(--black-to-white-text);
    margin-top: 30px;
}

.chat-meta-ft {
    position: absolute;
    bottom: 100%;
    left: 20px;
    z-index: 99;
}

[dir="rtl"] .chat-meta-ft {
    left: unset;
    right: 20px;
}

.typing {
    font-size: 9px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0em;
    color: var(--text-gray-to-white);
}

.chat-meta-box {
    max-width: 255px;
    min-width: 250px;
    position: relative;
    padding: 4px;
    border-radius: 8px;
    box-shadow: 0px 8.41px 21.02px 0px #0000000D;
    border: 0.84px solid var(--digit-background);
    margin-bottom: 6px;
    background-color: var(--bg-white-to-dark-color);
}

.chat-meta-box .meta-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
    background: linear-gradient(0deg, var(--primary-bg) 0%, var(--primary-bg) 100%);
}

.chat-meta-box .meta-details {
    height: 60px;
    width: calc(100% - 90px);
}

.chat-meta-box .meta-details>.meta-title {
    font-size: 11px;
    font-weight: 500;
    line-height: 15px;
    color: var(--black-to-white-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.chat-meta-box .meta-details>.meta-url {
    font-size: 8px;
    font-weight: 400;
    line-height: 12px;
    color: var(--text-dark-gray-to-white);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.chat-meta-box .close-btn {
    line-height: 0em;
    margin-top: -0.2rem;

}

#searchCounter {
    color: var(--text-dark-gray-to-white);
}

.chat-footer {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 35px 10px 20px;
    border-top: 1px solid var(--divider-border);
}

.chat-footer .chat-footer-option {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    user-select: none;
}

.chat-footer textarea {
    flex-grow: 1;
    color: var(--text-dark-gray-to-white);
    font-size: 15px;
    /* TRAG-6469 */
    font-weight: 400;
    letter-spacing: 0em;
    border: unset;
    min-height: 43px;
    outline: none;
    resize: none;
    padding-right: 20px;
    overflow-y: overlay;
    max-height: calc(1em * 14);
    background-color: transparent !important;
}

.chat-footer .attachment-option,
.chat-footer .emoji-option {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 21px;
    height: 21px;
    position: relative;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

div#emojisOptions {
    bottom: 40px;
    right: 0;
    background-color: var(--bg-card-color) !important;
}

.chat-footer .clicked-option,
.chat-footer .attachment-option.show,
.chat-footer .emoji-option.show {
    background: var(--hover-dark-bg);
    display: flex !important;
}

emoji-picker.light,
emoji-picker.dark {
    width: 100% !important;
}

.chat-footer .dropdown-menu.emoji-picker {
    bottom: 75px;
    left: 0;
    right: 0px;
    width: 100%;
    background-color: var(--bg-card-color) !important;
}

.chat-footer.net-chat-footer ul {
    height: 100px;
}

.chat-footer ul {
    padding: 10px 5px !important;
    min-width: 130px;
    box-shadow: var(--common-box-shadow);
    border-radius: 11px;
    height: 165px;
    border: unset;
    bottom: 15px !important;
    left: -58px !important;
    background-color: var(--input-bg);
}

.chat-footer ul::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -11px;
    border-width: 14px;
    border-style: solid;
    border-color: var(--input-bg) transparent transparent transparent;
}

.chat-footer ul li {
    padding: 8px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 15px;
    margin-bottom: 4px;
}

.chat-footer ul li span {
    width: 20px;
    display: flex;
    justify-content: center;
}

.chat-footer ul li p {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
}

.chat-footer .send-btn,
.message-footer .send-btn {
    height: 28px;
    padding: 0 10px;
    background-color: var(--primary-bg);
    color: var(--white-color);
    border-radius: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
    border: unset;
    outline: unset;
}

.meta-box {
    display: block;
    width: 100%;
    max-width: 224px;
    border-radius: 8px;
    border: 0.84px solid var(--digit-background);
    overflow: hidden;
    text-decoration: none !important;
    position: relative;
    z-index: 1;
}

.meta-box .meta-img {
    width: 100%;
    height: 114px;
    object-fit: cover;
}

.meta-box .meta-details {
    padding: 10px;
}

.meta-box .meta-details>.meta-title {
    font-size: 11px;
    font-weight: 500;
    line-height: 15px;
    color: var(--black-to-white-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.meta-box .meta-details>.meta-url {
    font-size: 9px;
    font-weight: 400;
    line-height: 12px;
    color: var(--text-dark-gray-to-white);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.loader-line,
.loader-line-top-chat {
    height: 3px;
    position: relative;
    overflow: hidden;
    background-color: #ddd;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.loader-line-top-chat {
    width: 320px;
}

.loader-line::before,
.loader-line-top-chat::before {
    content: "";
    position: absolute;
    left: -50%;
    height: 3px;
    width: 40%;
    background-color: var(--primary-bg);
    -webkit-animation: lineAnim 3s linear infinite;
    -moz-animation: lineAnim 3s linear infinite;
    animation: lineAnim 3s linear infinite;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    z-index: 2;
}

@keyframes lineAnim {
    0% {
        left: -40%;
    }

    50% {
        left: 20%;
        width: 70%;
    }

    100% {
        left: 100%;
        width: 100%;
    }
}

.recieved {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.msg-box .slash.slash {
    font-size: 12px;
    color: var(--text-dark-gray-to-white) !important;
}

/* RECIEVER SIDE CHAT CSS :: STARTS */
.reciever-msg {
    padding: 3px 20px 4px 30px;
    border-radius: 0px 6px 6px 0px;
    margin-bottom: 16px;
    width: 97%;
}

.reciever-msg.admin_actions {
    width: 100% !important;
    margin: 0 !important;
    padding: 3px 0px !important;
}

.reciever-msg .meta-box {
    background-color: var(--other-chat);
}

.reciever-msg .msg-box .time {
    font-size: 11px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
    color: var(--text-gray-to-white);
}

.reciever-msg .msg {
    background-color: var(--other-chat);
    padding: 4px 7px 5px 7px;
    border-radius: 3px 9px 9px 9px;
    width: fit-content;
    margin-bottom: 2px;
    margin-right: 30px;
    max-width: calc(100% - 15%);
    word-break: break-word;
    white-space: unset;
    cursor: default;
}

.reciever-msg:has(.onclick-checkbox input[type="checkbox"]:checked) {
    background-color: var(--hover-light-bg);
}

.reciever-msg .msg .chat-drop-btn {
    position: absolute;
    border: none;
    outline: none !important;
    display: none !important;
    width: 22px;
    height: 16px;
    padding-left: 2px;
    top: 0px;
    right: -16px;
    justify-content: center;
    align-items: center;
    border-radius: 0 5px 5px 0;
    background-color: var(--other-chat);
}

[dir="rtl"] .reciever-msg .msg .chat-drop-btn {
    left: -16px;
    right: unset;
    border-radius: 5px 0 0 5px;
    padding-left: 0;
    padding-right: 2px;
}

.chat-body:not(.active-msg-selection) .reciever-msg .msg .chat-drop-btn.show,
.chat-body:not(.active-msg-selection) .reciever-msg .msg:hover .chat-drop-btn,
.message-body:not(.active-msg-selection) .reciever-msg .msg .chat-drop-btn.show,
.message-body:not(.active-msg-selection) .reciever-msg .msg:hover .chat-drop-btn {
    display: inline-flex !important;
}

.reciever-msg .msg p {
    font-size: 15px;
    /* TRAG-6469 */
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
    white-space: break-spaces;
}

.reciever-msg .forwarded-label {
    display: flex;
    align-items: center;
    gap: 2px;
}

.reciever-msg .forwarded-label img,
.sender-msg .forwarded-label img {
    width: 10px;
    margin-top: -3px;
}

.sender-msg .larg-file,
.reciever-msg .larg-file {
    font-size: 12.8px;
    color: var(--label-color) !important;
    text-decoration: underline;
}

.reciever-msg .forwarded-label span {
    font-size: 9px;
    font-style: italic;
    font-weight: 400;
    line-height: 11px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
}

.reciever-msg .select-chat-option {
    border-radius: 11px !important;
    background-color: var(--input-bg);
    border: unset;
    box-shadow: var(--common-box-shadow);
}

.reciever-msg .select-chat-option ul {
    padding: 5px 10px !important;
}

.reciever-msg .select-chat-option ul li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-radius: 6px;
    margin: 2px 0px;
}

.reciever-msg .select-chat-option ul li span {
    width: 25px;
    display: flex;
    justify-content: center;
}

.reciever-msg .select-chat-option ul li:hover {
    background: var(--hover-dark-bg);
}

.reciever-msg .select-chat-option ul li p {
    margin-bottom: 0px;
    color: var(--black-to-white-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
}

.reciever-msg .onclick-checkbox {
    margin-left: -20px;
    margin-right: 2px;
    cursor: pointer;
}

.reciever-msg .document-icon {
    color: var(--input-icon);
}

.reciever-msg .document-icon>a {
    color: inherit !important;
}

/* RECIEVER SIDE CHAT CSS :: ENDS */

/* SENDER SIDE CHAT CSS :: STARTS */
.sender-msg {
    padding: 3px 30px 4px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-end;
    width: 97%;
    border-radius: 6px 0px 0px 6px;
    margin-left: 20px;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
}

.sender-msg.admin_actions {
    width: 100% !important;
    margin: 0 !important;
    padding: 3px 0px !important;
}

.sender-msg .msg-box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
}

.sender-msg .meta-box {
    background-color: var(--my-chat);
}

.sender-msg .msg .cancel-upload-btn {
    top: 5px;
    right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12px;
    height: 12px;
    cursor: pointer;
}

.sender-msg .msg .video .cancel-upload-btn {
    position: absolute;
}

.sender-msg .msg .video .cancel-upload-btn svg path {
    stroke: var(--white-color);
}

.sender-msg:has(.onclick-checkbox input[type="checkbox"]:checked) {
    background-color: var(--hover-light-bg);
}

.sender-msg .user-picture {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 13px;
    font-weight: 400;
    line-height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    flex-shrink: 0;
    line-height: 20px;
}

.sender-msg .user-picture svg {
    width: 12px;
    height: auto;
}

.sender-msg .user-picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.sender-msg .msg-box .time {
    font-size: 11px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
    color: var(--text-gray-to-white);
}

.sender-msg .msg {
    background-color: var(--my-chat);
    padding: 4px 7px 5px 10px;
    border-radius: 9px 3px 3px 9px;
    width: fit-content;
    margin-bottom: 2px;
    max-width: calc(100% - 15%);
    word-break: break-word;
    white-space: unset;
}

.sender-msg .msg .chat-drop-btn {
    position: absolute;
    border: none;
    outline: none !important;
    display: none !important;
    width: 22px;
    height: 16px;
    padding-right: 2px;
    top: 0px;
    left: -16px;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0 0 5px;
    background-color: var(--my-chat);
}

[dir="rtl"] .sender-msg .msg .chat-drop-btn {
    right: -16px;
    left: unset;
    border-radius: 0 5px 5px 0;
    padding-right: 0;
    padding-left: 2px;
}

.chat-body:not(.active-msg-selection) .sender-msg .msg .chat-drop-btn.show,
.chat-body:not(.active-msg-selection) .sender-msg .msg:hover .chat-drop-btn,
.message-body:not(.active-msg-selection) .sender-msg .msg .chat-drop-btn.show,
.message-body:not(.active-msg-selection) .sender-msg .msg:hover .chat-drop-btn {
    display: inline-flex !important;
}

.sender-msg .msg p {
    font-size: 15px;
    /* TRAG-6469 */
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
    white-space: break-spaces;
}

.sender-msg .msg p a {
    letter-spacing: 0em;
    color: var(--label-color) !important;
    text-decoration: underline;
}

.sender-msg .forwarded-label {
    display: flex;
    align-items: center;
    gap: 2px;
}

.sender-msg .forwarded-label span {
    font-size: 9px;
    font-style: italic;
    font-weight: 400;
    line-height: 11px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
}

.sender-msg .select-chat-option {
    border-radius: 11px !important;
    background-color: var(--input-bg);
    border: unset;
    box-shadow: var(--common-box-shadow);
}

.sender-msg .select-chat-option ul {
    padding: 5px 10px !important;
}

.sender-msg .select-chat-option ul li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-radius: 6px;
    margin: 2px 0px;
}

.sender-msg .select-chat-option ul li span {
    width: 25px;
    display: flex;
    justify-content: center;
}

.sender-msg .select-chat-option ul li:hover {
    background: var(--hover-dark-bg);
}

.sender-msg .select-chat-option ul li p {
    margin-bottom: 0px;
    color: var(--black-to-white-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
}

.sender-msg .onclick-checkbox {
    position: absolute;
    right: 8px;
    top: 6px;
    cursor: pointer;
}

.chat-container .sender-msg .onclick-checkbox {
    position: static;
    margin-right: -20px;
    margin-left: 2px;
}

.sender-msg .document-icon {
    color: var(--label-icon);
}

.sender-msg .document-icon>a {
    color: inherit !important;
}

/* SENDER SIDE CHAT CSS :: ENDS */

/* CHAT DOCUMENT CSS :: STARTS */
.document-box {
    display: flex;
    gap: 6px;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 0px;
    width: 206px;
}

.document-box .document-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-start;
    flex-shrink: 0;
    height: 40px;
    width: 40px;
    border-radius: 7px;
    position: relative;
}

.document-box .document-icon .download-sm {
    margin: unset !important;
    margin-right: 0px !important;
    position: absolute !important;
    top: unset;
    left: unset;
    z-index: 999;
    right: unset;
    bottom: unset;
}

.reciever-msg .document-box .document-icon {
    background-color: var(--doc-bg-reciever);
}

.sender-msg .document-box .document-icon {
    background-color: var(--doc-bg-sender);
}

.document-box .document-info {
    display: flex;
    flex-direction: column;
}

.document-box .document-info p {
    color: var(--black-to-white-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 0px;
}

.document-box .document-info span {
    font-size: 9px;
    font-weight: 400;
    line-height: 13px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--text-gray-to-white);
}

/* CHAT DOCUMENT CSS :: ENDS */

/* CHAT IMAGE CSS :: STARTS */
.image-box {
    max-width: 188px !important;
}

.image-box .image {
    width: 175px;
    height: 145px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2px 0px 5px 0px;
    position: relative;
}

.image-box .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px 11px 11px 11px;
}

.sender-msg .image-box .image img {
    border-radius: 11px 4px 11px 11px;
}

.video-box .video {
    width: 225px;
    height: 125px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2px 0px 5px 0px;
    position: relative;
}

.video-box .video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px 11px 11px 11px;
}

.video-box .video::before,
.sender-msg .image-box .image::before {
    content: '';
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 59.73%, #000000 100%);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 4px 11px 11px 11px;
    opacity: .5;
}

.sender-msg .video video {
    border-radius: 11px 4px 11px 11px;
}

.video-box .video-control button {
    width: 35px;
    height: 35px;
    border: none;
    outline: none;
    background: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
}

.size-on-img,
.retry-btn {
    position: absolute;
    height: 28px;
    background-color: var(--black-color);
    display: inline-flex;
    padding: 0 10px;
    justify-content: center;
    align-items: center;
    border-radius: 35px;
    color: var(--white-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0em;
    gap: 5px;
    bottom: 15px;
}

.size-on-img img,
.retry-btn>img {
    width: unset !important;
    height: unset !important;
}

.retry-btn {
    font-size: 13px;
}

.retry-btn>img {
    border-radius: 0 !important;
}

.img-size {
    position: absolute;
    top: 5px;
    left: 5px;
}

.image .img-size p,
.video .img-size p {
    font-size: 9px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0em;
    color: var(--white-color);
    margin-bottom: 0px;
    display: flex;
    align-items: normal;
    gap: 3px;
}

.video-box .video-control {
    position: absolute;
}

.caption-area .caption {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
    column-gap: 6px;
}

.caption-area .media-size {
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 13px !important;
    letter-spacing: 0em !important;
    color: var(--text-gray-to-white) !important;
    white-space: normal !important;
}

/* CHAT IMAGE CSS :: ENDS */
/* CHAT BODY CSS :: ENDS */

/* DOWNLOAD/UPLOAD CSS :: STARTS */
.download {
    width: 45px;
    height: 44px;
    position: absolute;
    right: 0;
    bottom: 50px;
    left: 0;
    margin: auto;
    display: block;
    flex-shrink: 0;
}

.media-status {
    color: var(--white-color);
    font-size: 8px;
    font-weight: 600;
    line-height: 12px;
    letter-spacing: 0em;
    position: absolute;
    bottom: -18px;
    justify-content: center;
    display: flex;
    width: 65px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}

.media-type-box {
    column-gap: 6px;
}

.download:hover {
    cursor: pointer;
}


.circle {
    fill: transparent;
    stroke: var(--white-color);
    stroke-width: 15px;
    stroke-dasharray: 0 880;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    opacity: 0;
}

.circle2 {
    fill: transparent;
    stroke: var(--call-activity-green);
    stroke-width: 15px;
}

.download-sm {
    width: 20px !important;
    height: 20px !important;
    margin: unset !important;
    margin-right: 5px !important;
    position: absolute !important;
    top: 14px;
    left: 5px;
}

.reciever-msg .audio-player .download-sm {
    background-color: var(--other-chat);
}

.sender-msg .audio-player .download-sm {
    background-color: var(--my-chat);
}

.sender-msg .audio-player .download-sm {
    left: 19px;
}

.download-sm span {
    position: absolute;
    top: -1px;
    left: 30px;
    width: 100px;
}

.download-sm svg,
.upload-sm svg {
    margin-right: 0px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.download-sm .circle {
    stroke: var(--gray-color-lighter);
    stroke-width: 30px !important;
}

.download-sm .circle2 {
    stroke-width: 25px !important;
}

.download-sm .icon-box svg path {
    stroke: var(--call-activity-green);
}

.document-icon:has(> .download:not(.d-none))>a,
.document-icon:has(> .download:not(.d-none))>svg {
    display: none;
}


.upload-sm {
    width: 16px !important;
    height: 16px !important;
    margin: unset !important;
    position: relative !important;
    top: 4px;
    left: unset;
}

/* DOWNLOAD/UPLOAD CSS :: ENDS */

/* TAKE PHOTO CSS :: STARTS */
.take-photo {
    position: absolute;
    width: 100%;
    z-index: 1;
    height: calc(100dvh - 50px);
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--hover-light-bg);
    border-radius: 9px;
}

.take-photo .header {
    width: 100%;
    height: unset;
    margin-bottom: 8px;
    padding: 20px;
}

.take-photo .photo-container {
    width: 90%;
}

.take-photo .image-section {
    width: 100%;
    height: calc(100dvh - 364px);
    min-height: 280px;
    margin-top: 46px;
    overflow: hidden;
}

.take-photo .image-section video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.capture-options {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    margin: 46px 0;
}

.capture-options button {
    min-width: 235px;
    max-width: 300px;
    height: 40px;
    border-radius: 9px;
    background-color: var(--text-gray-to-white);
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    outline: none;
    border: none;
}

.capture-options .capture-btn {
    background-color: var(--primary-bg);
}

.capture-options .cancel-btn {
    background-color: var(--gray-color);
}

/* TAKE PHOTO CSS :: ENDS */

/* ATTACHMENT PREVIEW CSS :: STARTS */

.attachment-preview .header {
    border-bottom: 1px solid var(--divider-border);
}

.attachment-preview .header img[data-bs-dismiss="modal"] {
    cursor: pointer;
}

.attachment-preview .user-name-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.attachment-preview .user-name-info .img {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background-color: var(--primary-bg);
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white-color);
    font-size: 15px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: 0em;
    text-transform: uppercase;
}

.attachment-preview .user-name-info .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.attachment-preview .user-name-info .name p {
    margin-bottom: 0px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
}

.attachment-preview .user-name-info .name span {
    font-size: 9px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
}

.attachment-preview .active-item-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    position: relative;
    margin-bottom: 8px;
}

.active-item-header h3 {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
}

.attachment-preview .carousel {
    height: 100%;
    overflow: hidden;
    padding: 20px 15px;
    padding-bottom: 0px;
}

.attachment-preview .carousel-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: calc(100dvh - 230px);
    border-radius: 5px;
    width: 100%;
    background: var(--hover_states_light);
}

html[data-theme="dark"] .attachment-preview .carousel-inner {
    background: var(--card-color-dark);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="dark"]) .attachment-preview .carousel-inner {
        background: var(--card-color-dark);
    }
}

.attachment-preview .carousel-item {
    flex-direction: column;
    padding: 20px;
    justify-content: center;
    align-items: center;
    display: none !important;
    margin: 0px !important;
    margin-bottom: 15px !important;
}

.attachment-preview .carousel-item.active {
    display: flex !important;
}

.attachment-preview .carousel-item.audio-file {
    margin-bottom: 0 !important;
}

.attachment-preview .carousel-item .preview-item img:first-child {
    width: auto;
    height: 100%;
}

.attachment-preview .carousel-item .preview-item {
    height: calc(100dvh - 350px);
    min-height: 240px;
    padding: 10px 0 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.attachment-preview .carousel-item .preview-item .document {
    background: var(--doc-bg-sender);
    width: 128px;
    height: 128px;
    border-radius: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.attachment-preview .carousel-item .preview-item .document svg {
    width: 100%;
    height: 100%;
    padding: 16px;
}

.attachment-preview .preview-item .document img {
    width: unset !important;
    height: unset !important;
}

.attachment-preview .carousel-item .xdContainer .player {
    height: 100%;
}

.attachment-preview .carousel-item .preview-item h3 {
    font-size: 15px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 0em;
    margin-bottom: 0px;
    color: var(--black-to-white-text);
}

.attachment-preview .carousel-item .preview-item p {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    margin-bottom: 0px;
    color: var(--text-dark-gray-to-white);
}

.attachment-preview .caption {
    width: 95%;
    position: relative;
    margin: auto;
    display: flex;
    align-items: center;
    height: 40px;
    margin-top: -50px;
    margin-bottom: 30px;
}

.attachment-preview .caption input[type="text"] {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    position: relative;
    background: var(--hover-dark-bg) !important;
    color: var(--text-dark-gray-to-white);
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    border: none;
    outline: none;
    padding: 12px 30px 12px 20px;
}

.attachment-preview .caption svg {
    position: absolute;
    right: 15px;
}

.attachment-preview .carousel-indicators {
    position: unset;
    display: flex;
    justify-content: space-between;
    margin: 0px;
    width: 100%;
    align-items: center;
    margin-top: 0px;
    border-top: 1px solid var(--divider-border);
}

.attachment-preview .carousel-indicators .indicator-items {
    width: 80%;
    overflow-x: overlay;
    height: 55px;
    gap: 10px;
}

.attachment-preview .carousel-indicators .indicator-items .preview-icon {
    height: unset !important;
    width: unset !important;
    border-radius: unset !important;
}

.attachment-preview .carousel-indicators .indicator-items div {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    position: relative;
    border: 0.59px solid var(--gray-color);
    background-color: var(--doc-bg-sender);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    flex-shrink: 0;
}

.attachment-preview .carousel-indicators .indicator-items div.add-btn {
    background-color: transparent;
}

.attachment-preview .active-slide {
    border: 2px solid var(--primary-bg) !important;
    box-shadow: var(--common-box-shadow) !important;
}

.media-preview-modal .attachment-preview .carousel-indicators .indicator-items div>svg.demo {
    height: 51px;
}

.attachment-preview .add-btn img,
.attachment-preview .carousel-indicators .indicator-items .delete img {
    height: unset !important;
    width: unset !important;
}

.attachment-preview .carousel-indicators .indicator-items div img,
.attachment-preview .carousel-indicators .indicator-items div video,
.attachment-preview .carousel-indicators .indicator-items div audio {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
}

.attachment-preview .activeSlide {
    border: 2px solid var(--primary-color) !important;
    box-shadow: var(--common-box-shadow) !important;
}

.attachment-preview .carousel-indicators .indicator-items .delete {
    position: absolute;
    top: -5px;
    right: -5px;
    cursor: pointer;
    height: 14px;
    width: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--primary-bg);
}

.attachment-preview .carousel-indicators .send-btn {
    border-radius: 30px;
    height: 38px;
    padding: 6px 15px;
    font-size: 17px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0em;
    background: var(--primary-bg);
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    border: none;
    outline: none;
}

.attachment-preview .carousel-indicators .counter {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--secondary-bg);
    border-radius: 50%;
    color: var(--white-color);
    height: 16px;
    width: 16px;
    font-family: Poppins;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;
}

.attachment-preview .carousel-indicators .indicator-items div .current-time,
.attachment-preview .carousel-indicators .indicator-items div .slash,
.attachment-preview .carousel-indicators .indicator-items div .total-time,
.attachment-preview .carousel-indicators .indicator-items div .volume,
.attachment-preview .carousel-indicators .indicator-items div .controls-main {
    display: none;
}

.attachment-preview .carousel-indicators .indicator-items div .plybtn {
    width: unset !important;
    height: unset !important;
    border-radius: unset !important;
    position: unset !important;
    border: unset !important;
    background-color: unset !important;
}



.media-box button[type="play-btn"] {
    background-color: transparent;
    border: 0;
}

.attachment-preview .carousel-indicators .indicator-items .play-pause-icon {
    width: 18px;
    height: 18px;
    border: none;
    background: var(--white-color);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ATTACHMENT PREVIEW CSS :: ENDS */

/* USER PROFILE CSS :: STARTS */
.right-profile-detail {
    height: 100%;
    position: absolute;
    z-index: 2300;
    top: 0;
    right: -220px;
    overflow: hidden;
    transition: .2s;
    width: 220px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    border-left: 1px solid var(--divider-border);
    background-color: var(--bg-color);

}

[dir="rtl"] .right-profile-detail {
    right: unset;
    left: -220px;
    border-left: none;
    border-right: 1px solid var(--divider-border);
}

.right-profile-detail.info-open {
    right: 0;
    pointer-events: all;
    opacity: 1;
    visibility: visible;
}

[dir="rtl"] .right-profile-detail.info-open {
    right: unset;
    left: 0;
}

.right-profile-detail .profile-header {
    padding: 25px 10px 20px 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 62px;
    gap: 15px;
    border-bottom: 1px solid var(--divider-border)
}

.right-profile-detail .profile-header span:first-child {
    height: 11px;
    display: flex;
    cursor: pointer;
}

.right-profile-detail .profile-header h3 {
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
}

.right-profile-detail .profile-detail {
    padding: 10px 10px 20px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-bottom: 1px solid var(--divider-border);
}

.profile-detail .user-img {
    width: 72px;
    height: 72px;
    border-radius: 100%;
    background: var(--primary-bg);
    color: var(--white-color);
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: 500;
    line-height: 42px;
    letter-spacing: 0em;
    text-transform: uppercase;
    overflow: hidden;
}

.group-empty-profile-label {
    line-height: 72px;
}

.profile-detail .user-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
}

.profile-detail .user-name {
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0em;
    margin-bottom: 0px;
    color: var(--black-to-white-text);
    display: flex;
    align-items: center;
    gap: 5px;
    line-break: anywhere;
    max-width: 180px;
}

.profile-detail .user-name span {
    font-size: 10px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
}

.right-profile-detail .shared-details {
    padding: 15px;
}

.right-profile-detail .shared-details.group-chat-media {
    border-bottom: 1px solid var(--divider-border);
}

.right-profile-detail .shared-details .details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.shared-details .details-header p {
    margin-bottom: 0px;
    font-size: 9px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
}

.shared-details .details-header p:last-child {
    cursor: pointer;
}

[dir="rtl"] .shared-details .details-header p:last-child>em.ms-1 {
    margin-left: 0 !important;
    margin-right: .25rem;
}

.media-box-auto-flow {
    overflow: clip overlay;
    height: calc(100dvh - 297px);
    padding-bottom: 8px;
    margin-right: -15px;
}

.group-chat-media .media-box-auto-flow {
    height: 50px;
}

[dir="rtl"] .media-box-auto-flow {
    margin-right: 0;
    margin-left: -15px;
}

.media-box {
    display: flex;
    justify-content: start !important;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.media-box div {
    width: 41px;
    height: 41px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    border-radius: 9px;
    background-color: var(--doc-bg-sender);
}

.media-box div img,
.media-box div video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
}

.media-box div.video-control {
    position: absolute;
    background-color: transparent;
}

.media-box div .video-control button {
    width: 18px;
    height: 18px;
    background-color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    border: none;
    outline: none;
}

.right-profile-detail .action-list {
    padding: 20px 15px !important;
}

.right-profile-detail .action-list li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.right-profile-detail .action-list li span {
    font-size: 10px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: 0em;
    color: var(--chat-counter);
}

.right-profile-detail .tab-content {
    overflow: clip overlay;
    max-height: calc(100dvh - 168px);
    margin-top: -16px;
    padding-top: 16px;
}

.shared-media-tabs .nav {
    justify-content: center;
    align-items: center;
    position: sticky;
    top: -1px;
    z-index: 1;
}

.shared-media-tabs .tab-pane {
    padding: 0 14px;
}

.shared-media-tabs .tab-pane .media-box p,
.shared-details .media-box p {
    font-size: 14px;
    text-align: center;
    color: var(--text-dark-gray-to-white);
}

.shared-media-tabs .nav li {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid var(--divider-border);
}

.shared-media-tabs .nav-link {
    width: 100%;
    font-size: 10px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
    padding: 15px 0px;
}

.shared-media-tabs .nav-link:hover {
    color: var(--text-dark-gray-to-white) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--input-icon) !important;
    background-color: unset !important;
    font-weight: 500;
}

.shared-media-tabs .nav li:has(.nav-link.active) {
    border-color: var(--primary-bg);
}

.tab-content .media-box {
    justify-content: center;
    gap: 7px;
}

/* USER PROFILE CSS :: ENDS */



/* MESSAGE CSS :: STARTS */
.message-container {
    height: 100%;
    animation: fadeInPage ease 2s;
}

.message-container .header {
    padding: 25px 20px 20px 25px;
    border-bottom: 1px solid var(--divider-border);
    animation: unset !important;
}

.message-container .person-img {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background-color: var(--primary-bg);
    color: var(--white-color);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    text-transform: uppercase;
}

.message-container .person-img svg {
    width: 18px;
    height: auto;
}

.message-container .person-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* .message-container .name-info {
    max-width: calc(100% - 30px) !important;
} */

.message-container-n .name-info {
    max-width: calc(100% - 90px) !important;
}

.message-container .person-detail {
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    max-width: calc(100% - 43px);
}

.message-container .person-detail p {
    margin-bottom: 0px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    max-width: 100%;
}

.message-container .person-detail .contact-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.message-container .person-detail .person-num {
    font-size: 8.5px;
    font-weight: 400;
    line-height: 14px;
    color: var(--text-dark-gray-to-white);
}

.message-body {
    padding: 15px 0px;
    height: calc(100% - 159px);
    overflow-y: overlay;
    position: relative;
    overflow-x: hidden;
    width: 99%;
}

.message-footer {
    bottom: 0px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 35px 10px 20px;
    border-top: 1px solid var(--divider-border);
}

.message-footer .message-footer-option {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.message-footer .message-footer-option .attachment-option {
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
    border-radius: 100%;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.message-footer .message-footer-option .attachment-option:hover {
    background-color: var(--hover-icon-bg);
}

.message-footer textarea {
    width: 100%;
    color: var(--text-dark-gray-to-white);
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    border: unset;
    height: 100%;
    outline: none;
    resize: none;
    padding-right: 20px;
    overflow-y: auto;
}

.warning {
    position: absolute;
    top: -30px;
    font-size: 9px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0em;
    color: var(--text-gray-to-white);
    margin-bottom: 8px;
    left: 20px;
    z-index: 99;
    max-width: 570px;
}

.message-container .message-forward-header {
    border-bottom: 1px solid var(--divider-border);
    /* padding: 25px 20px 20px 25px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 62px;
}

.message-container .close-forward {
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
}

.message-container .close-forward img {
    height: 13px;
    width: auto;
}

.message-container .close-forward:hover {
    background-color: var(--hover-icon-bg);
}

.message-container .message-forward-header h3 {
    font-size: 19px;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
    margin-left: 30px;
}

.message-container textarea {
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    border: none;
    resize: none;
    height: 25px;
    background-color: transparent !important;
    color: var(--black-to-white-text) !important;
    flex-grow: 1;
    max-height: 150px;
}

.msg-note+.tooltip-box {
    width: 100%;
    bottom: 25px;
    left: 0;
    color: var(--white-color);
    font-size: 9px;
    line-height: 12px;
    background-color: #626262f2;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease-in-out;
}

.msg-note:hover+.tooltip-box,
.msg-note:focus-within+.tooltip-box {
    opacity: 1;
    pointer-events: all;
}

/* MESSAGE CSS :: ENDS */

/* MMS CSS :: STARTS */
.message-container .chat-options {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

.message-container .chat-options button {
    width: 23px;
    height: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: unset;
    border: none;
    outline: none;
    border-radius: 100%;
}

.message-container .chat-options button:hover {
    background-color: var(--hover-icon-bg);
}

.message-footer-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.message-footer .attachment-media-image {
    width: 85px;
    height: 85px;
    border-radius: 5px;
    border: 1px solid var(--gray-color-lighter);
    position: relative;
}

.message-footer .attachment-media-video {
    width: 128px;
    height: 85px;
    border-radius: 5px;
    border: 1px solid var(--gray-color-lighter);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.message-footer .attachment-media-video .video-control {
    width: 26px;
    height: 26px;
    background: var(--white-color);
    border: none;
    outline: none;
    border-radius: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.message-footer .attachment-media-document {
    width: 220px;
    position: relative;
    border-radius: 11px;
    background: var(--sended-chat-bubble-color);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
}

.message-footer .attachment-media-document .icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--sended-chat-file-icon-bg);
    flex-shrink: 0;
}

.message-footer .attachment-media-document p {
    font-size: 12px;
    font-weight: 400;
    line-height: 13px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    word-break: break-all;
}

.message-footer .attachment-media-audio {
    width: 282px;
    height: 48px;
    border-radius: 11px;
    position: relative;
    background-color: var(--sended-chat-file-icon-bg);
}

.message-footer .attachment-media-audio .audioplayer {
    width: 280px;
}

.message-footer .attachment-media-image img,
.message-footer .attachment-media-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.message-footer .delete-attachment {
    width: 20px;
    height: 20px;
    border: unset;
    outline: none;
    border-radius: 100%;
    background: var(--primary-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: -8px;
    top: -8px;
}

.message-footer .delete-attachment img {
    width: unset;
    height: unset;
}

/* MMS CSS :: ENDS */

/* CHAT SETTING CSS :: STARTS */
.chat-setting-container .header {
    border-bottom: 1px solid var(--divider-border);
    z-index: 0;
}

.chat-setting-container .user-profile {
    background: var(--hover-light-bg);
    padding: 12px 16px;
    margin: 20px 10px;
    border-radius: 6px;
    height: 92px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    position: relative;
}

.chat-setting-container .update-photo {
    width: 68px;
    height: 68px;
    border-radius: 100%;
    position: relative;
}

.chat-setting-container .update-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
}

.chat-setting-container .update-photo .cam-icon {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-bg);
    cursor: pointer;
}

.chat-setting-container .update-photo .cam-icon img {
    height: unset;
    width: unset;
}

.chat-setting-container .update-name h3 {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    margin-bottom: 0px;
    color: var(--black-to-white-text);
}

.chat-setting-container .update-name p {
    font-size: 10px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
    margin-bottom: 0px;
}

.chat-setting-container .edit {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
}

.chat-setting-container .edit span {
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0em;
    color: var(--primary-color);
}

.chat-setting-container .user-profile .dropdown-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    height: 14px;
    border: 1px solid var(--hover-dark-bg);
    border-radius: 20px;
    padding: 2px 5px;
    width: fit-content;
    gap: 3px;
}

.chat-setting-container .user-profile .dropdown-toggle.show {
    display: flex !important;
    ;
}

.chat-setting-container .user-profile .dropdown-toggle img:last-child {
    margin-top: 2px;
}

.chat-setting-container .user-profile .dropdown-toggle .status-img {
    height: 8px;
    width: 8px;
}

.chat-setting-container .user-profile .dropdown-toggle span {
    color: var(--text-dark-gray-to-white);
    font-size: 9px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0em;
}

.chat-setting-container .user-profile .dropdown-menu {
    min-width: 268px;
    box-shadow: var(--common-box-shadow);
    border: unset;
    height: fit-content;
    border-radius: 12px;
    background: var(--input-bg);
    top: 8px;
}

.chat-setting-container .user-profile .dropdown-menu p {
    padding: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
}

.chat-setting-container .user-profile .dropdown-menu ul {
    padding: 25px 35px !important;
}

.chat-setting-container .user-profile .dropdown-menu ul li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.chat-setting-container .user-profile .dropdown-menu ul li span {
    font-size: 14px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
}

.chat-setting-container .user-profile .dropdown-menu ul li {
    margin-top: 15px;
}

.chat-setting-container .import-export-chat {
    margin: 15px 25px;
    background: var(--bg-card-color);
    box-shadow: -0.6501369476318359px 1.9504108428955078px 5.2010955810546875px 0px #0000001F;
    border-radius: 5px;
}

.chat-setting-container .import-export-chat ul {
    padding: 20px 15px !important;
}

.chat-setting-container .import-export-chat ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
    cursor: pointer;
}

.chat-setting-container .import-export-chat ul li:not(:first-child) {
    padding-top: 20px;
}

.chat-setting-container .import-export-chat ul li:not(:last-child) {
    border-bottom: 1px solid var(--divider-border);
    padding-bottom: 20px;
}

/* CHAT SETTING CSS :: ENDS */

/* ADD GROUP MEMBER CSS :: STARTS */
.start-chat .selected-list-item,
.attendees-search-bar .selected-list-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    flex-wrap: wrap;
    left: 10px;
    gap: 5px;
}

.attendees-search-bar .selected-list-item {
    position: unset;
    padding-top: 10px;
}

.attendees-search-bar .selected-list-item svg {
    cursor: pointer;
}

.start-chat.message-home .selected-list-item {
    left: 50px;
}

[lang="du"] .start-chat.message-home .selected-list-item {
    left: 60px;
}

[dir="rtl"] .start-chat.message-home .selected-list-item {
    left: unset;
    right: 50px;
}

.start-chat .selected-list-item div,
.attendees-search-bar .selected-list-item div {
    background: var(--hover-dark-bg);
    padding: 3px 8px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
    flex-shrink: 0;
    max-width: 380px;
}

.group-pic {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 147px;
    height: 147px;
    border-radius: 50rem;
    overflow: hidden;
}

.group-pic .group-profile {
    width: 147px;
    height: 147px;
    background-color: var(--primary-bg);
    color: var(--white-color);
    border-radius: 50rem;
    overflow: hidden;
}

.group-pic .group-profile img {
    object-fit: cover;
    border-radius: 100%;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.group-pic .select-pic-icon {
    width: 100%;
    height: 40%;
    border-radius: 0 0 50rem 50rem;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: var(--white-color) !important;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.group-pic .group-profile:hover+.select-pic-icon,
.group-pic .select-pic-icon:hover,
.group-pic .group-profile:has(> svg)+.select-pic-icon {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

.group-name-input {
    min-width: 260px;
    max-width: 310px;
    border-radius: 50rem;
    height: 40px !important;
}

.group-name-input .form-control {
    font-size: 13px;
}

.selected-list-box {
    min-width: 380px;
    max-width: 500px;
}

.selected-list-box .member-count-text {
    color: var(--text-dark-gray-to-white);
    font-size: 11px;
    margin: 6px 0;
}

.selected-list-box .selected-list-item {
    position: static;
    overflow: clip overlay;
    max-height: calc(100dvh - 480px);
    min-height: 60px;
}

.group-chat-container .reciever-msg {
    padding: 3px 30px 20px 20px;
    display: flex;
    align-items: flex-start;
    width: 97%;
    border-radius: 6px 0px 0px 6px;
}

.group-chat-container .reciever-msg .msg-box {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: unset;
}

.group-chat-container .reciever-msg .msg-box .msg {
    padding: 8px 5px 5px 8px;
    border-radius: 9px 3px 3px 9px;
    width: fit-content;
    margin-bottom: 2px;
    max-width: 100%;
    word-break: break-word;
    white-space: unset;
}

.group-chat-container .reciever-msg .user-picture {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 13px;
    font-weight: 400;
    line-height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.group-chat-container .reciever-msg .user-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
}

.group-chat-container .name {
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0em;
    margin-bottom: 3px;
    color: var(--input-icon);
}

.edit-btn {
    border-radius: 50rem;
    transition: all 0.2s ease-in-out;
}

.edit-btn:hover,
.edit-btn:focus {
    background-color: var(--element-active-bg);
}

.edit-btn .tooltiptext {
    right: 0;
    top: 26px !important;
}

[dir='rtl'] .profile-detail .select-pic-icon,
[dir="rtl"] .edit-btn .tooltiptext {
    right: unset;
    left: 0;
}

.profile-detail .select-pic-icon {
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--white-color);
    width: 100%;
    height: 40%;
    bottom: 0;
    right: 0;
    border-radius: 0 0 50rem 50rem;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.profile-detail .user-img:hover .select-pic-icon,
.profile-detail .user-img .select-pic-icon:hover {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

.profile-detail .group-name-edit-input {
    font-size: 14px;
    border: 1px solid var(--input-border-color);
    color: var(--black-to-white-text);
    padding-right: 1.2rem !important;
}

[dir="rtl"] .profile-detail .group-name-edit-input {
    padding-right: 0.5rem !important;
    padding-left: 1.2rem !important;
}

.group-edit-emojiPicker {
    --emoji-size: 1rem;
    --emoji-padding: 0.25rem;
    --indicator-height: 1.5px;
    --input-font-size: 0.8rem;
    --num-columns: 6;
    --outline-size: 1px;
    --border-size: 0;
    height: 290px;
}

.group-emojiPicker {
    border-radius: 12px;
    overflow: hidden;
}

.group-emojiPicker #emojisOptionsGroupchat {
    --emoji-size: 1.2rem;
    --emoji-padding: 0.6rem;
    --indicator-height: 2px;
    --input-border-radius: 0.3rem;
    --input-border-size: 1px;
    --input-font-size: 12px;
    --input-padding: 0.25rem;
    --num-columns: 8;
    --outline-size: 2px;
    --border-size: 0px;
    height: calc(100dvh - 448px);
    min-height: 220px;
}

.member-header {
    padding: 12px;
    border-bottom: 1px solid var(--divider-border);
    font-size: 11px;
    color: var(--text-gray-to-white);
}

.member-list {
    padding: 12px 6px;
    overflow: clip overlay;
    max-height: calc(100dvh - 455px);
    min-height: 96px;
}

.member-list ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    position: relative;
    padding: 4px 6px;
    border-radius: 4px;
}

.member-list ul li:not(.cursor-pointer) {
    cursor: default;
}

.member-list ul li:hover,
.member-list ul li:has(.dropdown .dropdown-menu.show) {
    background-color: var(--hover-light-bg);
}

.member-list ul li:last-child {
    margin-bottom: 0px;
}

.member-list ul li>div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 7px;
}

.member-list ul li .img,
.member-list ul li .icon,
.member-list ul li .invite-link {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 27px;
    height: 27px;
    border-radius: 100%;
    background-color: var(--primary-bg);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
    color: var(--white-color);
    text-transform: uppercase;
}

.member-list ul li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
}

.member-list ul li .img svg {
    width: 16px;
}

.member-list ul li p {
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
    max-width: 144px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.member-list ul li:has(.group-admin) p {
    max-width: 87px;
}

.member-list ul li .dropdown {
    cursor: pointer;
    display: none;
    margin-right: -4px;
}

[dir="rtl"] .member-list ul li .dropdown {
    margin-right: unset;
    margin-left: -4px;
}

.member-list ul li:hover .dropdown,
.member-list ul li .dropdown:has(.dropdown-menu:hover),
.member-list ul li .dropdown:has(.dropdown-menu.show) {
    display: block;
}

.group-admin {
    height: 12px;
    background: var(--hover-dark-bg);
    border-radius: 4px;
    font-size: 7px;
    font-weight: 400;
    line-height: 9px;
    letter-spacing: 0em;
    padding: 0px 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 21px;
    z-index: 9;
    color: var(--blue-color);
}

[data-theme="dark"] .group-admin {
    color: var(--white-color);
}

@media (prefers-color-scheme: light) {
    html:not([data-theme="light"]):not([data-theme="dark"]) .group-admin {
        color: var(--blue-color);
    }
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="dark"]) .group-admin {
        color: var(--white-color);
    }
}

[dir="rtl"] .group-admin {
    right: unset;
    left: 21px;
}

.group-action-list {
    padding: 12px 18px !important;
    border-top: 1px solid var(--divider-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.group-action-list li {
    padding: 2px 0;
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    color: var(--chat-counter);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.admin-action {
    margin-left: 30px;
    margin-right: 30px;
}

.admin-action p {
    font-size: 11px;
    padding: 2px 12px;
    border-radius: 10px;
    text-align: center;
    color: var(--text-dark-gray-to-white);
    background-color: var(--hover-icon-bg);
}

.admin-action p span {
    color: inherit;
    font-weight: 500;
}

.group-left-massage {
    color: var(--black-to-white-text);
    font-weight: 500;
    text-align: center;
    max-width: 400px;
    font-size: 14px;
    height: 72px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.member-dropdown {
    box-shadow: var(--common-box-shadow);
    background-color: var(--input-bg);
    border: none !important;
    width: 155px;
    border-radius: 9px 3px 9px 9px !important;
    padding: 10px !important;
}

[dir="rtl"] .member-dropdown {
    border-radius: 3px 9px 9px 9px !important;
}

.member-dropdown li {
    display: flex;
    justify-content: flex-start !important;
    align-items: center;
    gap: 10px;
    cursor: pointer !important;
}

.member-dropdown li span {
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
}

/* ADD GROUP MEMBER CSS :: ENDS */

/* BLF CSS :: STARTS */
.blf-option {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    border-radius: 50rem;
    padding: 5px 5px 5px 7px;
    transition: all .3s ease-in-out;
    background-color: transparent !important;
}

[dir="rtl"] .blf-option {
    padding: 5px 7px 5px 5px;
}

.blf-option:hover {
    background-color: var(--element-active-bg) !important;
}

.blf-option p {
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
    margin-bottom: 0px;
}

.blf-option .toggle label:before {
    width: 21px;
    height: 12px;
}

.blf-option .toggle input[type=checkbox]:checked+label:before {
    background: var(--call-activity-green);
}

.blf-option .toggle input[type=checkbox]:checked+label:after {
    left: 9.5px;
}

.blf-option .toggle label:after {
    width: 10px;
    height: 10px;
    left: 2px;
    top: 1px;
}

/* BLF CSS :: ENDS */

/* CALL RECORDING CSS :: STARTS */
.call-recording {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
}

.call-recording span {
    color: var(--black-to-white-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0em;
}

.call-recording .active-call-duration {
    background-color: var(--call-decline-red);
    margin-bottom: 0px;
}

.call-recorded {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
    margin: 0px 10px;
}

.call-recording-history .accordion-item {
    border: unset;
}

.call-recording-history .accordion-item button {
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
    padding: 0px;
    margin-bottom: 10px;
}

.call-recording-history .accordion-item .accordion-button::after {
    background-image: url(../img-new/call-recording-history-arrow.svg);
    width: 7px;
    background-size: contain;
    height: 7px;
}


.call-recording-history .accordion-item .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg) !important;
    transform-origin: center;
}

.call-recording-history .accordion-item .accordion-button:not(.collapsed) {
    background-color: transparent !important;
    box-shadow: unset !important;
}

.call-recording-history .accordion-item .accordion-button:focus {
    border: unset !important;
    box-shadow: unset !important;
}

.call-recording-history .accordion-body {
    padding: 0px;
}

.call-recording-history .audio-player {
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--my-chat);
    border-radius: 4px;
    padding: 10px;
    width: fit-content;
    margin-bottom: 10px;
    max-width: 290px;
}

.call-recording-history .audioplayer {
    width: 240px;
    padding-right: 0px;
}

.call-recording-history .audio-player span {
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--hover-dark-bg);
    padding: 10px;
    border-radius: 22px;
    font-size: 10px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: 0em;
    color: var(--blue-color);
}

.call-recording-history .audio-player img {
    margin: 0px 0px 0px 10px;
}

/* CALL RECORDING CSS :: ENDS */

/* VISUAL VOICE MAIL CSS :: STARTS */
.details .call-detail .accordion .accordion-item {
    margin-top: 15px;
}

.details .call-detail .accordion-item .accordion-button {
    padding: 0px !important;
}

.details .call-detail .accordion-item .accordion-button::after {
    background-image: url(../img-new/transcript-arrow.svg);
    width: 7px;
    background-size: contain;
    height: 6px;
    margin-left: unset;
}

.details .call-detail .accordion-item .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg) !important;
    transform-origin: center;
}

.details .call-detail .accordion-item .accordion-button:not(.collapsed) {
    background-color: transparent !important;
    box-shadow: unset !important;
}

.details .call-detail .accordion-item .accordion-button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    color: var(--text-dark-gray-to-white);
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
}

.details .call-detail .accordion-item .accordion-button:focus,
.details .call-detail .accordion .accordion-item {
    border: unset !important;
    box-shadow: unset !important;
    border: unset !important;
}

.details .call-detail .accordion-body {
    padding: 15px 0px;
}

.details .call-detail .accordion-body h6 {
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: 0em;
    color: var(--text-dark-gray-to-white);
    margin-bottom: 5px;
}

.details .call-detail .accordion-body p {
    margin-bottom: 0px;
    font-size: 10px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
}

.details .call-detail .audio-player {
    display: flex;
    justify-content: start;
    align-items: center;
}

/* VISUAL VOICE MAIL CSS :: ENDS */
#callActivityUl {
    height:auto;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: overlay;
    overflow-x: hidden;
    margin-right: -10px;
    scroll-behavior: smooth;
}

/* Conference accordion height management is handled by JavaScript */

/* When main-dialpad is hidden (d-none), set callActivityUl max-height to 100% */
.main-dialpad.d-none ~ * #callActivityUl,
.main-dialpad.d-none #callActivityUl {
    max-height: 100% !important;
}
div#conferenceCallAccordion .active-call-info {
    max-height: 50px;
    padding-top: 0px;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: overlay;
    overflow-x: hidden;
    margin-right: -10px;
    scroll-behavior: smooth;
}
div#conferenceCallAccordion .active-call-item {
    margin-bottom: 0px !important;
    max-width: 330px;
    border-radius: 0;
}

[dir="rtl"] #callActivityUl {
    padding-right: 0;
    margin-right: 0;
    padding-left: 10px;
    margin-left: -10px;
}

/* MEDIA QUERY FOR SMALL RESOULTION (WHEN HEIGHT IS : 650px) */
@media only screen and (max-height: 650px) {
    #forgotPasswordIframeParent {
        height: calc(100vh - 209px); 
    }
    /* LOGIN PAGE CSS :: STARTS */
    .login-content .logo {
        margin-bottom: 50px;
    }

    .login-form .heading,
    .check-mail-content .heading {
        font-size: 20px;
    }

    .login-form .sub-heading,
    .check-mail-content .sub-heading {
        font-size: 11px;
    }

    .call_sip .call_sip_row span {
        font-size: 12px;
    }

    .input-group,
    .login-content .email-input {
        height: 40px;
    }

    #protocolSelect {
        height: 47px;
    }

    .login-content .forget-password {
        font-size: 10px;
    }

    .login-content button,
    .check-mail-content button,
    .custom-file-input {
        height: 35px;
        font-size: 12px;
    }

    .login-right-section h3:first-child {
        font-size: 22px;
    }

    .login-right-section h3:nth-child(2) {
        font-size: 25px;
    }

    .check-mail .version,
    .qr-content .version {
        font-size: 15px;
    }

    .check-mail .vectors img,
    .right-vector img {
        width: 85%;
        display: block;
        margin: auto;
    }

    .login-fields .dropdown__option span {
        font-size: 12px;
    }

    .otp-verification .otp-box input {
        height: 40px;
        font-size: 24px;
    }

    .otp-verification .time {
        font-size: 12px;
    }

    .otp-verification .resend-otp {
        font-size: 11px;
    }

    .login-left-section .qr-box {
        height: 300px;
        width: 312px;
        margin: unset;
        margin-bottom: 20px;
        border: 3px solid var(--blue-color);
    }

    .invalidBtn {
        height: 24px;
        font-size: 10px;
        margin-bottom: 10px;
    }

    .SuccessfulBtn {
        height: 24px;
        margin-bottom: 10px;
    }

    .SuccessfulBtn-text {
        font-size: 10px;
    }

    .sip-configuration-container {
        padding: 25px 50px;
    }

    .sip-configuration-container .input-group {
        height: 38px;
    }

    .sip-configuration-content .login-left-section .toggle-box {
        margin: 10px auto;
    }

    .sip-configuration-content .gradient-btn {
        font-size: 12px;
        height: 35px;
    }

    .sip-configuration-content .login-left-section .toggle-box span:first-child,
    .sip-configuration-content .login-left-section .radio-box span:first-child {
        font-size: 12px;
    }

    .sip-configuration-content .login-left-section .switch {
        height: 20px;
    }

    .sip-configuration-content .login-left-section .slider:before {
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 2px;
    }

    .sip-configuration-content .login-left-section input:checked+.slider:before {
        -webkit-transform: translateX(19px);
        -ms-transform: translateX(19px);
        transform: translateX(19px);
    }

    .login-content .login-left-section .radio-box [type="radio"]:checked+label:before,
    .login-content .login-left-section .radio-box [type="radio"]:not(:checked)+label:before,
    .sip-configuration-content .login-left-section .radio-box [type="radio"]:checked+label:before,
    .sip-configuration-content .login-left-section .radio-box [type="radio"]:not(:checked)+label:before {
        width: 20px;
        height: 20px;
        border: 2px solid var(--label-color);
    }

    .login-content .login-left-section .radio-box [type="radio"]:checked+label:after,
    .login-content .login-left-section .radio-box [type="radio"]:not(:checked)+label:after,
    .sip-configuration-content .login-left-section .radio-box [type="radio"]:checked+label:after,
    .sip-configuration-content .login-left-section .radio-box [type="radio"]:not(:checked)+label:after {
        width: 12px;
        height: 12px;
        top: 2px;
        left: 4px;
    }

    body:has(.sip-configuration-container) {
        overflow: unset !important;
        overflow-x: hidden !important;
        overflow-y: overlay !important;
    }

    /* LOGIN PAGE CSS :: ENDS */

    /* HEADER CSS :: STARTS */
    .profile-dropdown .profile-pic,
    .profile-dropdown .profile-pic img[alt="Profile"] {
        width: 40px;
        height: 40px;
    }

    .toggle label:before {
        content: "";
        width: 35px;
        height: 18px;
    }

    .header-right-items p {
        font-size: 10px;
    }

    .toggle label:after {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        left: 3px;
    }

    .toggle input[type=checkbox]:checked+label:after {
        left: 18px;
    }


    .profile-dropdown .user-name p {
        font-size: 13px;
    }

    .profile-dropdown .user-name span._extName {
        font-size: 12px;
        font-weight: 500;
    }

    .profile-dropdown .dropdown-menu li img {
        height: 12px;
        width: 12px;
    }

    .profile-dropdown .dropdown-menu li p,
    #netsapinesMobileNumber {
        font-size: 11px;
    }

    .searchbar {
        height: 28px;
    }

    /* HEADER CSS :: ENDS */

    /* MODAL CSS :: STARTS */
    /* ENTER PASSWORD MODAL :: STARTS */
    .enter-password-modal .modal-header h5 {
        font-size: 20px;
    }

    .enter-password-modal .modal-body button {
        height: 35px;
        font-size: 12px;
    }

    /* ENTER PASSWORD MODAL :: ENDS */

    /* LOGOUT MODAL :: STARTS */
    .logout-modal-popup .modal-header {
        height: 45px;
    }

    .logout-modal-popup .modal-header h5 {
        font-size: 16px;
    }

    .logout-modal-popup .modal-body p {
        font-size: 14px;
    }

    .logout-modal-popup .modal-footer button {
        height: 35px;
        min-width: 100px;
        font-size: 12px;
    }

    /* LOGOUT MODAL :: ENDS */

    /* MODAL CSS :: ENDS */

    /* LEFT SIDE MENU CSS :: STARTS */
    .left-side-menu.nav-pills .nav-link {
        min-height: 53px;
        /* TRAG-5944
        max-height: 53px; */
        margin-bottom: 3px;
    }

    .left-side-menu.nav-pills .nav-link svg,
    .left-side-menu.nav-pills .nav-link img {
        height: 19px;
    }

    .left-side-menu.nav-pills .nav-link span {
        font-size: 10px;
        line-height: 12px;
    }

    .left-side-menu .counter {
        font-size: 9px;
        right: 15px;
        top: 0px;
        min-width: 19px;
        height: 19px;
        line-height: 19px;
        width: 19px;
    }

    /* LEFT SIDE MENU CSS :: ENDS */

    /* MIDDLE CONTENT CSS :: STARTS */
    .missed-call-counter,
    .voice-mail-btn .counter {
        line-height: 19px;
        font-size: 9px;
        height: 19px;
        width: 19px;
        min-width: 19px;
        top: -8px;
        right: -8px;
    }

    .voice-mail-btn .counter {
        top: -6px;
        right: -6px;
    }

    .time-date .chat-counter {
        font-size: 9px;
        height: 19px;
        width: 19px;
    }

    .call-suggestion-dropdown .dropdown-menu ul center,
    .call-suggestion-dropdown .dropdown-menu ul center p {
        font-size: 15px !important;
        margin-bottom: 0px;
        margin-top: 0px !important;
    }

    .caller-id .dropdown-menu p {
        font-size: 10px;
    }

    .caller-id span ,
    #contactTypeDropdown span{
        font-size: 12px;
    }

    .caller-id .dropdown-menu .checkbox {
        height: 14px;
        width: 14px;
    }

    .caller-id .dropdown-menu .checkbox label:after {
        width: 7px;
        height: 4px;
        top: 3px;
        right: 3px;
    }

    .menu-content .menu-header h3 a,
    .menu-header h3 {
        font-size: 13px;
    }

    .contact-list-item li a {
        font-size: 12px;
    }

    /* DAILPAD CSS */
    .call-suggestion-dropdown {
        margin-top: 5px;
    }

    .main-dialpad .keypad {
        margin-top: 16px;
    }

    .main-dialpad span.clear_number,
    .main-dialpad span.mobile_option {
        height: 12px;
        width: 20px;
    }

    .main-dialpad .entered-number input[type="text"] {
        font-size: 15px;
        width: 75%;
    }

    .main-dialpad .entered-number input[type="text"]::placeholder {
        font-size: 13px;
    }

    .main-dialpad .digit {
        width: 75px;
        height: 38px;
        font-size: 14px;
        line-height: 18px;
        margin: auto;
    }

    .main-dialpad .call-buttons {
        min-height: 38px;
    }

    .main-dialpad .call-buttons button {
        width: 50px;
        height: 38px;
    }

    /* DAILPAD CSS */

    .all-contact-list .all-contact-list-item {
        height: 45px;
    }

    .all-contact-list .contact-detail .icon {
        width: 38px;
        height: 38px;
    }

    .all-contact-list .contact-detail .name p {
        font-size: 12px;
    }

    .all-contact-list .contact-detail .name span {
        font-size: 10px;
    }

    .contact-list-item.nav-pills .nav-link {
        margin-bottom: 12px;
    }

    .main-dialpad {
        padding-bottom: 10px;
    }

    .active-call-info .person-name {
        font-size: 12px;
    }

    .active-call-info .call-duration,
    .active-call-info .call-status {
        font-size: 10px;
    }

    .call-action-buttons button {
        width: 28px;
        height: 28px;
    }

    /* MIDDLE CONTENT CSS :: ENDS */

    /* RIGHT SIDE CONTENT COMMON CSS :: STARTS */
    .right-side .header h3 {
        font-size: 15px;
    }

    .type-of-call .nav-tabs .nav-link {
        font-size: 11px;
    }

    .type-of-call .nav-tabs {
        gap: 10px;
    }

    .sub-header h4 {
        font-size: 12px;
    }

    /* RIGHT SIDE CONTENT COMMON CSS :: ENDS */

    /* DASHBOARD FAVOURITE CONTACT CSS :: STARTS */
    .fav-contact-item {
        margin-top: 5px;
    }

    .favorite-contacts .fav-contact-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .favorite-contacts .fav-contact-icon .fav-mark {
        right: -4px;
    }

    /* DASHBAORD FAVOURITE CONTACT CSS :: ENDS */

    /* DASHBOARD CALL HISTORY CSS :: STARTS */
    .recent-calls {
        height: 350px;
    }

    .all-call-item {
        height: 50px;
    }

    .all-call-item .icon,
    .conference-call .icon .second-person {
        width: 38px;
        height: 38px;
    }

    .all-call-item .caller-name p {
        font-size: 12px;
    }

    .all-call-item .caller-name .number,
    .all-call-type-time .call-type p,
    .all-call-type-time .call-duration p,
    .all-call-type-time .call-duration span {
        font-size: 10px;
    }

    /* DASHBOARD CALL HISTORY CSS :: ENDS */

    /* CHAT CSS :: STARTS */
    .chat-suggestion ul {
        max-height: 170px;
    }

    .attachment-preview .carousel-item .xdContainer {
        height: 300px;
    }

    /* CHAT CSS :: ENDS */

    /* CONTACT DETAIL CSS :: STARTS */
    .open-contact-detail .contact-name .icon {
        width: 60px;
        height: 60px;
        font-size: 25px;
    }

    .open-contact-detail .contact-name p {
        font-size: 18px;
    }

    .contact-detail-item p {
        font-size: 13px;
    }

    .other-contact-details .calling-options div {
        width: 28px;
        height: 28px;
    }

    /* CONTACT DETAIL CSS :: ENDS */

    /* CLEAR HISTORY DROPDOWN CSS :: STARTS */
    .clear-history-dropdown .dropdown-menu li svg {
        width: 13px;
    }

    .clear-history-dropdown .dropdown-menu li span {
        font-size: 12px;
    }

    .details .icon {
        width: 38px;
        height: 38px;
    }

    /* CLEAR HISTORY DROPDOWN CSS :: ENDS */

    /* SETTING CSS :: STARTS */
    .setting-list-item.nav-pills .nav-link {
        margin-bottom: 10px;
        margin-bottom: 10px;
        height: 30px;
        font-size: 12px;
    }

    .setting-list-item.nav-pills .nav-link img {
        width: 15px;
        height: auto;
    }

    .setting-options .application-option li p,
    .language-option li p {
        font-size: 12px;
    }

    .setting-options .language-option .checkbox {
        height: 14px;
        width: 14px;
    }

    .setting-container .language-option .checkbox label:after {
        width: 6px;
        height: 3px;
        top: 4px;
        right: 3px;
        opacity: 1;
    }

    .debugging-content p {
        font-size: 11px;
    }

    .debugging-content button {
        height: 32px;
        font-size: 12px;
    }

    .websocket-test h3 {
        font-size: 14px;
    }

    .connection-detail p {
        font-size: 13px;
    }

    /* SETTING CSS :: ENDS */

    /* CALLING SCREEN CSS :: STARTS */
    #activeCallInfo .accordion-body {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .call-connecting-header p,
    .active-call-header p {
        font-size: 18px;
    }

    .call-connecting-detail .call-connecting-caller-img,
    .active-call-detail .active-caller-img {
        width: 110px;
        height: 110px;
    }

    .call-connecting-detail .call-connecting-caller-number {
        font-size: 16px;
    }

    .active-call-detail .active-call-duration {
        font-size: 12px;
    }

    .call-connecting-detail .call-connecting-status {
        font-size: 13px;
    }

    .call-connecting-actions,
    .active-call-actions {
        bottom: 60px;
    }

    .call-connecting-actions button,
    .active-call-actions button {
        width: 55px;
        height: 55px;
    }

    .call-suggestion-dropdown .dropdown-menu {
        max-height: 170px;
    }

    .call-suggestion-dropdown .dropdown-menu ul {
        max-height: 145px;
    }

    .call-suggestion-dropdown .caller-info .caller-icon {
        height: 30px;
        width: 30px;
    }

    .call-suggestion-dropdown .caller-name {
        font-size: 12px;
    }

    .call-suggestion-dropdown .caller-name span {
        font-size: 10px;
    }

    .dtmf-dropdown .keypad .digit {
        width: 65px;
        height: 42px;
        font-size: 17px;
    }

    .dialpad-header .input-number input[type="text"] {
        font-size: 18px;
    }

    /* CALLING SCREEN CSS :: ENDS */

    /* VIDEO CALL SCREEN CSS :: STARTS */
    .active-video-call-screen .active-call-header {
        padding: 16px 25px 16px 25px;
    }

    .active-video-call-actions button {
        height: 55px;
        width: 55px;
    }

    .active-video-call-actions .call-duration {
        font-size: 12px;
    }

    /* VIDEO CALL SCREEN CSS :: ENDS */

    /* MESSAGE SCREEN CSS :: STARTS */

    .forward-msg-modal .selected-list-item {
        max-height: 51px;
    }

    .start-chat .chat-search-bar,
    .forward-msg-modal .modal-searchbar {
        height: 35px;
    }

    .forward-msg-modal .modal-footer button {
        height: 32px;
    }

    .start-chat .search-arrow {
        height: 28px;
        width: 28px;
    }

    .info .img,
    .forward-msg-modal .list-detail .img {
        width: 38px;
        height: 38px;
    }

    .info p,
    .forward-msg-modal .list-detail .name p,
    .forward-msg-modal .list-detail .name span {
        font-size: 13px;
        /* TRAG-6469 */
    }

    .info span,
    .time-date .time {
        font-size: 10px;
    }

    .forward-msg-modal .modal-header {
        height: 45px;
    }

    .forward-msg-modal .list ul {
        height: 240px;
    }

    .message-footer .delete-attachment {
        width: 15px;
        height: 15px;
        right: -5px;
        top: -5px;
    }

    .message-footer .delete-attachment img {
        width: 9px;
        height: 9px;
    }

    .audioplayer-playpause {
        width: 18px;
        height: 18px;
    }

    .forward-msg-modal .modal-searchbar .search-icon {
        width: 29px;
        height: 29px;
    }

    /* MESSAGE SCREEN CSS :: ENDS */

    .sync-details .divider.my-3 {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
}

.chat-loader {
    position: relative;
    width: 40px;
    padding-top: 32px;
    margin: 6px auto;
    -webkit-animation: rotation 2s infinite linear;
    animation: rotation 2s infinite linear;
    border-left: 4px solid var(--input-shadow-color);
    border-right: 4px solid var(--input-shadow-color);
    border-bottom: 4px solid var(--input-shadow-color);
    border-top: 4px solid var(--primary-bg);
    border-radius: 100%;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(359deg);
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }

    to {
        -o-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.invisible {
    visibility: hidden;
}

.profile-dropdown .user-name .ext_number_box {
    margin-right: 0;
    margin-left: 0;
}

.header-left-items>img[alt="LOGO"] {
    max-width: 100%;
    height: 35px;
    margin-left: 10px;
}

.headsetSelectedItem {
    background-color: var(--element-active-bg);
}

@keyframes blinker {

    0%,
    25%,
    76%,
    100% {
        opacity: 1.0;
    }

    26%,
    75% {
        opacity: 0.0;
    }
}

@-webkit-keyframes blinker {

    0%,
    25%,
    76%,
    100% {
        opacity: 1.0;
    }

    26%,
    75% {
        opacity: 0.0;
    }
}

.blink {
    text-decoration: blink;
    animation: blinker 1s ease-in infinite alternate;
    -webkit-animation: blinker 1s ease-in infinite alternate;
}

.audio-icon-box {
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50rem;
    background-color: var(--input-bg);
}

.output-audio-test-btn {
    font-size: 10px;
    color: var(--black-to-white-text) !important;
    border: 1px solid var(--gray-color-lighter);
}

.test-video-output {
    display: flex;
}

.test-video-output video {
    width: 162px;
    height: 92px;
    object-fit: contain;
    border-radius: 3px;
}

[data-audio-intensity] {
    transition: outline 0.1s ease-in-out, shadow 0.1s ease-in-out !important;
    outline: 1.6px solid var(--scrollbar-bg);
}

[data-audio-intensity="1"] {
    animation: audio_wave_1 0.75s infinite;
}

[data-audio-intensity="2"] {
    animation: audio_wave_2 0.75s infinite;
}

[data-audio-intensity="3"] {
    animation: audio_wave_3 0.75s infinite;
}

[data-audio-intensity="4"] {
    animation: audio_wave_4 0.75s infinite;
}

[data-audio-intensity="5"] {
    animation: audio_wave_5 0.75s infinite;
}

@keyframes audio_wave_1 {
    0% {
        box-shadow: 0 0 0 0 var(--hover-dark-bg);
    }
    12% {
        box-shadow: 0 0 0 2.5px var(--hover-dark-bg);
    }
    25% {
        box-shadow: 0 0 0 0.5px var(--hover-dark-bg);
    }
    75% {
        box-shadow: 0 0 0 1px var(--hover-dark-bg);
    }
    100% {
        box-shadow: 0 0 0 3px var(--hover-dark-bg);
    }
}

@keyframes audio_wave_2 {
    0% {
        box-shadow: 0 0 0 0 var(--hover-dark-bg);
    }
    12% {
        box-shadow: 0 0 0 4px var(--hover-dark-bg);
    }
    25% {
        box-shadow: 0 0 0 0.75px var(--hover-dark-bg);
    }
    75% {
        box-shadow: 0 0 0 2.5px var(--hover-dark-bg);
    }
    100% {
        box-shadow: 0 0 0 3px var(--hover-dark-bg);
    }
}

@keyframes audio_wave_3 {
    0% {
        box-shadow: 0 0 0 0 var(--hover-dark-bg);
    }
    12% {
        box-shadow: 0 0 0 5px var(--hover-dark-bg);
    }
    25% {
        box-shadow: 0 0 0 2.75px var(--hover-dark-bg);
    }
    75% {
        box-shadow: 0 0 0 4.5px var(--hover-dark-bg);
    }
    100% {
        box-shadow: 0 0 0 6px var(--hover-dark-bg);
    }
}

@keyframes audio_wave_4 {
    0% {
        box-shadow: 0 0 0 0 var(--hover-dark-bg);
    }
    12% {
        box-shadow: 0 0 0 8px var(--hover-dark-bg);
    }
    25% {
        box-shadow: 0 0 0 4.75px var(--hover-dark-bg);
    }
    50% {
        box-shadow: 0 0 0 5.5px var(--hover-dark-bg);
    }
    75% {
        box-shadow: 0 0 0 4.5px var(--hover-dark-bg);
    }
    100% {
        box-shadow: 0 0 0 7px var(--hover-dark-bg);
    }
}

@keyframes audio_wave_5 {
    0% {
        box-shadow: 0 0 0 0 var(--hover-dark-bg);
    }
    12% {
        box-shadow: 0 0 0 10px var(--hover-dark-bg);
    }
    25% {
        box-shadow: 0 0 0 8.75px var(--hover-dark-bg);
    }
    50% {
        box-shadow: 0 0 0 8.5px var(--hover-dark-bg);
    }
    75% {
        box-shadow: 0 0 0 7.5px var(--hover-dark-bg);
    }
    100% {
        box-shadow: 0 0 0 9px var(--hover-dark-bg);
    }
}

[data-audio-intensity].active {
    outline: none;
    box-shadow: none;
}

/* meetings-tab */
.meeting-container {
    display: none;
}

.meeting-container.active {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 180px);
    overflow-y: overlay;
    margin-right: -20px;
    padding-right: 20px;
    word-break: break-all;
}

[dir="rtl"] .meeting-container {
    margin-right: unset;
    padding-right: unset;
    margin-left: -20px;
    padding-left: 20px;
}

.no-meetings {
    gap: 10px;
    height: 200px;
}

.no-meetings p {
    font-size: 17px;
    color: var(--text-dark-gray-to-white);
}

#meetings-tab {
    flex-wrap: nowrap;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

#meetings-tab>.nav-link {
    font-size: 12px;
    padding: 8px 2px 16px;
    color: var(--text-dark-gray-to-white);
    font-weight: 500;
    border-radius: 0;
    cursor: pointer;
}

#meetings-tab>.nav-link.active {
    color: var(--black-to-white-text) !important;
    box-shadow: 0 2px 0 0 var(--primary-bg);
}

.day-heading {
    position: sticky;
    top: 0;
    background: var(--bg-color);
    z-index: 1;
}

.day-heading>h3 {
    padding-top: 12px;
}

.meeting-item .time {
    color: var(--text-dark-gray-to-white);
    font-size: 14px;
    text-align: right;
    max-width: 82px;
    line-height: 1.2;
    /* word-break: break-word; */
    word-break: keep-all;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
}

[dir="rtl"] .meeting-item .time {
    text-align: left;
}

.meeting-details>h6 {
    font-size: 15px;
    font-weight: 500;
    color: var(--black-to-white-text);
    word-break: keep-all;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
}

.meeting-details>p {
    font-size: 12px;
    color: var(--text-gray-to-white);
}

.meeting-btn {
    margin: 0;
    margin-left: auto;
    height: 30px;
    padding: 0px 16px;
    /* TRAG-6812   */
    font-size: 13px;
    align-self: center;
    flex-shrink: 0;
}

[dir="rtl"] .meeting-btn {
    margin-left: 0;
    margin-right: auto;
}

.pawerBy {
    position: absolute;
    width: 100%;
    z-index: 1;
    bottom: 0;
    background-color: transparent;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dark-gray-to-white);
    padding-bottom: 1rem !important;
}

/* MEETING PAGE */

.meeting-actions {
    column-gap: 36px;
    padding: 25px 20px 20px 25px;
    border-bottom: 1px solid var(--divider-border);
}

.meeting-action-item {
    color: var(--text-dark-gray-to-white);
    font-size: 14px;
    /* TRAG-6841  */
}

.meeting-action-item span {
    width: 85px;
    /* TRAG-6841  */
    height: 85px;
    background-color: var(--secondary-color);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 13px;
    box-shadow: 0 5px 13px 0 rgb(0 0 0 / 5%);
}

/* TRAG-6841 */
.meeting-action-item span img {
    height: 32px;
}

.usage-history-table-container {
    max-height: calc(100% - 270px);
    max-width: calc(100% - 5px);
    overflow-y: overlay;
    position: relative;
}

[dir='rtl'] .usage-history-table-container {
    max-width: calc(100% - 3px);
}

.usage-history-table-container>table {
    margin-bottom: 0;
}

.usage-history.table>:not(caption)>*>* {
    border: none;
    padding: 0.6rem 0.5rem;
}

.usage-history.table th {
    font-weight: 600;
    color: var(--text-dark-gray-to-white);
    font-size: 1rem;
}

.usage-history.table th:nth-child(1),
.usage-history.table td:nth-child(1) {
    padding-left: 1.5rem;
}

[dir="rtl"] .usage-history.table th:nth-child(1),
[dir="rtl"] .usage-history.table td:nth-child(1) {
    padding-left: 0.5rem;
    padding-right: 1.5rem;
}

.usage-history.table td {
    color: var(--black-to-white-text);
}

.usage-history.table td>p:nth-child(2) {
    color: var(--text-gray-to-white);
    font-size: 14px;
}

[dir="rtl"] .usage-history.table th:nth-child(1),
[dir="rtl"] .usage-history.table td:nth-child(1) {
    padding-left: 1.5rem;
}

.usage-history.table thead {
    background-color: var(--dropdown-secondary-bg);
    position: sticky;
    top: 0;
    z-index: 5;
    /* TRAG-6878 */
}

#joinMeetingModal .modal-body p {
    color: var(--text-dark-gray-to-white);
    font-size: 13px;
    padding-right: 1.5em;
}

[dir="rtl"] #joinMeetingModal .modal-body p {
    padding-right: 0;
    padding-left: 1.5em;
}

#joinMeetingModal .modal-footer {
    justify-content: flex-end !important;
}

/* NEW INPUT */
/* TRAG-6867 - included div.new-input */
input.new-input,
textarea.new-input,
div.new-input,
.form-select.new-select-input,
.form-select.new-select-input:read-only {
    width: 100%;
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid var(--input-border-color) !important;
    outline: none;
    box-shadow: none;
    font-weight: 500;
}

textarea.new-input {
    background-color: var(--input-bg) !important;
    color: var(--black-to-white-text) !important;
}

.meeting-id-input-box input.new-input {
    padding-right: 40px;
}

[dir="rtl"] .meeting-id-input-box input.new-input {
    padding-right: 12px;
    padding-left: 40px !important;
}

.textarea-input {
    resize: none;
}

.ring-spinner {
    display: inline-block;
    position: absolute;
    color: var(--input-icon);
    top: 50%;
    right: 10px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
}

[dir='rtl'] .ring-spinner {
    right: unset;
    left: 10px;
}

.ring-spinner div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 18px;
    height: 18px;
    margin: 2px;
    border: 2px solid currentColor;
    border-radius: 50%;
    animation: ring-spinner 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: currentColor transparent transparent transparent;
}

.ring-spinner div:nth-child(1) {
    animation-delay: -0.15s;
}

.ring-spinner div:nth-child(2) {
    animation-delay: -0.1s;
}

.ring-spinner div:nth-child(3) {
    animation-delay: -0.05s;
}

@keyframes ring-spinner {
    0% {
        transform: rotate(0turn);
    }

    100% {
        transform: rotate(3turn);
    }
}

.form-select.new-select-input {
    background-size: 12px 12px;
    padding-right: 24px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 1.25L5 4.75L1.5 1.25' stroke='%23474747' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

html[data-theme="dark"] .form-select.new-select-input {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 1.25L5 4.75L1.5 1.25' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

@media (prefers-color-scheme: light) {
    html:not([data-theme="light"]):not([data-theme="dark"]) .form-select.new-select-input {
        background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 1.25L5 4.75L1.5 1.25' stroke='%23474747' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    }
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="dark"]) .form-select.new-select-input {
        background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 1.25L5 4.75L1.5 1.25' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    }
}

[dir="rtl"] .form-select.new-select-input {
    background-position: left 0.75rem center;
    padding-left: 24px !important;
    padding-right: 12px !important;
}

.form-select.new-select-input:disabled,
.form-select.new-select-input:read-only {
    background-color: var(--input-bg);
}

.select2-container .select2-choice>.select2-chosen {
    color: var(--black-to-white-text);
}

/* Schedule Meetings Page */

.meeting-form {
    overflow-y: overlay;
    max-height: calc(100dvh - 124px);
    max-width: calc(100% - 5px);
}

[dir="rtl"] .meeting-form {
    max-width: calc(100% - 3px);
}

.meeting-form .meeting-form-container {
    padding: 20px;
}

.meeting-form .meeting-form-container .schedule-lable {
    width: 18%;
    flex-shrink: 0;
}

.meeting-form .meeting-form-container .schedule-lable.to {
    text-align: right;
}

[dir="rtl"] .meeting-form .meeting-form-container .schedule-lable.to {
    text-align: left;
}

.meeting-form .meeting-form-container .meeting-duration {
    font-size: 13px;
    font-weight: 500;
    color: var(--black-to-white-text);
}

.meeting-form .meeting-form-container [aria-label="meeting-link"] {
    font-size: 13px;
    font-weight: 500;
    color: var(--blue-color);
    max-width: 100%;
    word-break: break-all;
}

.meeting-form label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark-gray-to-white);
}

.meeting-form .meeting-form-title {
    background-color: var(--divider-border);
    color: var(--black-to-white-text);
    font-weight: 600;
    font-size: 18px;
    padding: 5px 20px;
}

#attendees~.dropdown-menu {
    inset: 0px auto auto 0px !important;
    transform: translate(0px, 42px) !important;
}

.passcode-sec {
    padding: 20px;
}

.passcode-sec .passcode-left h6,
.option-heading {
    font-size: 14px;
    font-weight: 600;
    color: var(--black-to-white-text);
    margin: 0;
}

.passcode-sec .passcode-left p {
    font-size: 12px;
    color: var(--text-gray-to-white);
    margin: 0;
}

.passcode-sec .passcode {
    /* font-size: 13px;
    color: var(--text-dark-gray-to-white);
    background-color: transparent !important;
    width: 100px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-align: right; */
    width: 110px;
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid var(--input-border-color) !important;
    outline: none;
    box-shadow: none;
    font-weight: 500;
}

[dir="rtl"] .passcode-sec .passcode {
    text-align: left;
}

.date-container {
    width: 30%;
}

.time-container {
    width: 20%;
}

.to {
    color: var(--text-dark-gray-to-white);
    font-size: 13px;
}

.occurs-on-text {
    color: var(--text-dark);
    font-size: 13px;
}

.week-check-group .form-check-input,
#placeCallcheckDefault {
    border-color: var(--text-gray-to-white);
    cursor: pointer;
}

.week-check-group .form-check-input:focus,
#placeCallcheckDefault:focus {
    border-color: var(--primary-bg);
    box-shadow: none;
}

.week-check-group .form-check-input:checked,
.form-check-input:checked,
#placeCallcheckDefault:checked {
    background-color: var(--primary-bg);
    border-color: var(--primary-bg);
}

.week-check-group .form-check-label {
    cursor: pointer;
}

.monthly-radio-group .form-check-input[type="radio"] {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: var(--label-color);
    background-color: var(--input-bg);
    border-width: 2px;
}

.monthly-radio-group .form-check-input[type="radio"]:focus {
    background-color: var(--input-bg);
    border-color: var(--label-color);
    box-shadow: none;
}

.monthly-radio-group .form-check-input[type="radio"]:checked {
    background-image: none;
    background-color: var(--input-bg);
    border-color: var(--label-color);
}

.monthly-radio-group .form-check-input[type="radio"]::before {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.monthly-radio-group .form-check-input[type="radio"]:checked::before {
    background-color: var(--label-color);
}

.calendar-detail h6 {
    font-size: 13px;
    font-weight: 600;
    color: var(--black-to-white-text);
    line-height: 19.5px;
}

.calendar-detail p {
    font-size: 10px;
    color: var(--text-gray-to-white);
}

/* MEETING DETAILS PAGE */

.primary-icon-btn {
    color: var(--input-icon);
    background-color: transparent;
    font-size: 12px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
    border: none;
    outline: none;
    border-radius: 15px;
    height: 25px;
    min-width: 38px;
    padding: 0 10px;
    margin-left: auto;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.primary-icon-btn.copy {
    color: var(--black-to-white-text);
}

[dir="rtl"] .primary-icon-btn {
    margin-left: 0;
    margin-right: auto;
}

.primary-icon-btn:hover,
.primary-icon-btn:focus {
    background-color: var(--element-active-bg);
}

.meeting-form .button-content button {
    font-size: 16px;
}

.meeting-form .button-content .gradient-btn {
    font-weight: 600 !important;
}

.btn.btn-gray {
    background-color: var(--gray-color-lighter);
    color: var(--black-to-white-text);
    font-weight: 400 !important;
    border-color: var(--gray-color-lighter) !important;
}

.btn.btn-gray:focus {
    border-color: var(--gray-color-lighter) !important;
}

#deleteMeetingModal .modal-body p {
    font-size: 19px;
}

.meeting-switch p {
    color: var(--text-dark-gray-to-white);
}

.login-content.action-button-content button {
    font-weight: 400 !important;
}

.login-content.action-button-content .cancel-btn {
    color: var(--gray-color);
    border: 1px solid var(--gray-color) !important;
    background-color: var(--white-color);
}

/* direction rtl css*/

[dir="rtl"] .login-content,
[dir="rtl"] .check-mail-content {
    padding: 50px 50px 0 0;
}

[dir="rtl"] .login-form .heading,
[dir="rtl"] .login-form .sub-heading,
[dir="rtl"] input[type=search],
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="password"],
[dir="rtl"] .login-right-section h3:first-child,
[dir="rtl"] .login-right-section h3:nth-child(2),
[dir="rtl"] .check-mail-content .heading,
[dir="rtl"] .check-mail-content .sub-heading,
[dir="rtl"] .profile-dropdown .user-name span,
[dir="rtl"] .connection-settings tr td,
[dir="rtl"] .active-call-info .call-duration,
[dir="rtl"] .active-call-info .call-status,
[dir="rtl"] .sip-configuration-content .login-left-section .radio-box span:first-child,
[dir="rtl"] .sip-configuration-content .login-left-section .toggle-box span:first-child {
    text-align: unset;
}

[dir="rtl"] .sip-configuration-content .login-left-section .slider:before {
    left: unset;
    right: 4px;
}

[dir="rtl"] .sip-configuration-content .login-left-section input:checked+.slider:before {
    -webkit-transform: translateX(-16px);
    -ms-transform: translateX(-16px);
    transform: translateX(-16px);
}

[dir="rtl"] .sip-configuration-content .login-left-section .radio-box p {
    margin-right: 0;
    margin-left: 15px;
}

[dir="rtl"] .sip-configuration-footer p:nth-child(2) {
    display: flex;
    gap: 4px;
}

[dir="rtl"] .version-number {
    right: unset;
    left: 30px;
    display: flex;
    bottom: 15px;
    gap: 4px;
}

[dir="rtl"] .chat-container .person-img {
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .login-fields .right-line::before {
    content: unset;
}

[dir="rtl"] .login-fields .right-line::after {
    content: "";
    background-image: url(../img-new/line.svg);
    position: absolute;
    height: 85%;
    width: 8%;
    right: 4px;
    background-repeat: no-repeat;
    top: 9%;
    bottom: 5%;
    background-position: 100% 100%;
    background-size: contain;
}

[dir="rtl"] .back svg {
    transform: scaleX(-1);
    margin-left: 10px;
    margin-right: 0;
}

[dir="rtl"] .qr-content .version,
[dir="rtl"] .check-mail .version {
    display: flex;
    gap: 6px;
}

[dir="rtl"] .enter-password-modal .modal-header h5 {
    padding-right: 30px;
    padding-left: 0;
}

[dir="rtl"] .enter-password-modal .modal-header button {
    right: unset;
    left: 20px;
}

.hide-show-password {
    cursor: pointer;
}

[dir="rtl"] .right-call-detail .header .tooltip:first-child .tooltiptext {
    right: unset;
    left: 8px;
}

[dir="rtl"] .login-right-section {
    border-radius: 0 115px 0 0;
    right: unset;
    left: 0;
}

[dir="rtl"] .left-side-menu.nav-pills .nav-link.active::before {
    left: unset;
    border-radius: 10px 0 0 10px;
    right: -5px;
}

[dir="rtl"] .profile-dropdown .user-name span {
    text-align: left;
}

[dir="rtl"] .header-right-items p {
    margin-right: 0px;
    margin-left: 10px;
}

[dir="rtl"] .chat-search-bar>span {
    left: unset;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--input-border-color);
}

[dir="rtl"] .active-call-header button,
[dir="rtl"] .call-connecting-header button {
    left: unset !important;
    right: 0;
}

[dir="rtl"] .call-connecting-header svg,
[dir="rtl"] .active-call-header img,
[dir="rtl"] .active-call-header svg,
[dir="rtl"] .call-connecting-header img {
    left: unset;
    transform: scaleX(-1);
}

[dir="rtl"] .profile-dropdown .dropdown-menu li .checkbox,
[dir="rtl"] .calling-options,
[dir="rtl"] .all-contact-list .checkbox,
[dir="rtl"] .chat-header-options,
[dir="rtl"] .volume .icon {
    right: unset;
    left: 10px;
}

[dir="rtl"] .calling-options.in-recent-tab {
    right: unset;
    left: 41px;
}

[dir="rtl"] #favContactList .all-contact-list-item:has(.form-check-input.checkbox:not(.d-none)) .calling-options {
    right: unset;
    left: 36px;
}

[dir="rtl"] .call-button-options button svg {
    margin-right: 0;
    margin-left: 5px;
}

[dir="rtl"] .profile-dropdown .user-name .ext_number_box {
    text-align: unset;
}

[dir="rtl"] .toggle label:after {
    left: unset;
    right: 2px;
}

[dir="rtl"] .toggle input[type=checkbox]:checked+label:after {
    left: unset;
    right: 20px;
}

[dir="rtl"] .blf-option .toggle input[type=checkbox]:checked+label:after {
    left: unset;
    right: 9.5px;
}

[dir="rtl"] .main-dialpad .keypad,
[dir="rtl"] .dtmf-dropdown .keypad {
    flex-direction: row-reverse;
}

[dir="rtl"] .all-call-item .calling-options .audio-call-otpion .tooltiptext,
[dir="rtl"] .other-contact-details .calling-options div:last-child .tooltiptext,
[dir="rtl"] .right-side .header ._removeFavcontact .tooltiptext,
[dir="rtl"] .right-side .header ._addFavcontact .tooltiptext,
[dir="rtl"] .chat-container .chat-options .search-text-box,
[dir="rtl"] .info .img .status,
[dir="rtl"] .profile-dropdown .profile-pic .green-dot,
[dir="rtl"] .chat-setting-container .update-photo .cam-icon,
[dir="rtl"] .all-call-type-time .call-duration span {
    right: unset;
    left: 0;
}

[dir="rtl"] .searchbar input[type="search"] {
    padding: 5px 28px 5px 5px;
}

[dir="rtl"] .searchbar img,
[dir="rtl"] .searchbar svg,
[dir="rtl"] .start-chat .chat-search-bar .search-icon,
[dir="rtl"] .start-chat .chat-search-bar svg,
[dir="rtl"] .recent-chat-list .recent-search-bar svg,
[dir="rtl"] .recent-chat-list .recent-search-bar img {
    left: unset;
    right: 10px;
}

[dir="rtl"] .all-contact-list .all-contact-list-item .calling-options div:last-child .tooltiptext,
[dir="rtl"] .attachment-preview .carousel-indicators .indicator-items .delete,
[dir="rtl"] .chat-suggestion ul li div .status {
    right: unset;
    left: -5px;
}

[dir="rtl"] .new-chat-icon .tooltiptext {
    right: unset !important;
    left: -5px;
}

[dir="rtl"] .right-side .header.contact-detail-header button#backToContactList img,
[dir="rtl"] .right-side .header.contact-detail-header button#backToFavContactList img,
[dir="rtl"] .right-side .header.contact-detail-header button#backToContactList svg,
[dir="rtl"] .right-side .header.contact-detail-header button#backToFavContactList svg,
[dir="rtl"] #profileContent .fa-angle-right,
[dir="rtl"] .attachment-preview .carousel-indicators .send-btn svg,
[dir="rtl"] .start-chat .search-arrow svg,
[dir="rtl"] #addContactToForwardDiv .modal-footer button svg,
[dir="rtl"] .active-call-header button svg,
[dir="rtl"] .main-dialpad span.clear_number svg,
[dir="rtl"] .dialpad-header .input-number svg,
[dir="rtl"] .tooltip.backButton svg,
[dir="rtl"] .right-side .header.contact-detail-header button svg,
[dir="rtl"] .right-profile-detail .profile-header span:first-child svg,
[dir="rtl"] .send-btn svg {
    transform: scaleX(-1);
}

[dir="rtl"] .header-sync-btn {
    margin-left: 0;
    margin-right: 15px;
}

[dir="rtl"] .header-options div.select-option {
    margin: 0 10px 0 0;
}

[dir="rtl"] .all-call-type-time .call-duration {
    text-align: left;
}

[dir="rtl"] .start-chat input[type="search"],
[dir="rtl"] .recent-chat-list input[type="search"] {
    padding: 8px 32px 8px 10px;
}

[dir="rtl"] .message-home.start-chat input[type="search"] {
    padding-right: 50px;
}

[dir="rtl"] .start-chat .selected-list-item,
[dir="rtl"] .attendees-search-bar .selected-list-item {
    left: unset;
    gap: 5px;
    right: 10px;
}

[dir="rtl"] .start-chat .search-arrow,
[dir="rtl"] .preview-modal .modal-header .tooltip .tooltiptext,
[dir="rtl"] .logout-modal-popup .modal-header button .tooltiptext,
[dir="rtl"] .allowed-attachment-modal .modal-header button .tooltiptext {
    right: unset;
    left: 5px;
}

[dir="rtl"] .chat-footer,
[dir="rtl"] .message-footer {
    padding: 12px 20px 10px 35px;
}

[dir="rtl"] .chat-container .chat-options .searchbar {
    right: unset;
    left: 0;
}

[dir="rtl"] .message-container .person-detail,
[dir="rtl"] .sender-msg .user-picture {
    margin-left: 0;
    margin-right: 10px;
}

[dir="rtl"] .message-footer textarea {
    padding-left: 0;
    padding-right: 20px;
}

[dir="rtl"] .sender-msg {
    border-radius: 0 6px 6px 0;
    margin-left: 0;
    margin-right: 20px;
    padding: 3px 20px 4px 30px;
}

[dir="rtl"] .sender-msg .msg {
    border-radius: 3px 9px 9px 3px;
}

[dir="rtl"] .reciever-msg {
    border-radius: 6px 0 0 6px;
    padding: 3px 30px 4px 20px;
}

[dir="rtl"] .sender-msg .image-box .image img {
    border-radius: 4px 11px 11px 11px;
}

[dir="rtl"] .reciever-msg .msg {
    margin-right: 0;
    margin-left: 30px;
    border-radius: 9px 3px 9px 9px;
}

[dir="rtl"] .image-box .image img,
[dir="rtl"] .video-box .video video {
    border-radius: 11px 4px 11px 11px;
}

[dir="rtl"] .attachment-preview .caption input[type="text"] {
    padding: 12px 20px 12px 30px;
}

[dir="rtl"] .attachment-preview .caption svg,
[dir="rtl"] .attachment-preview .caption img {
    right: unset;
    left: 15px;
}

[dir="rtl"] .reciever-msg .msg p,
[dir="rtl"] .sender-msg .msg p {
    display: flex;
    gap: 2px;
}

[dir="rtl"] .message-footer .delete-attachment {
    right: unset;
    left: -8px;
}

[dir="rtl"] .right-side .header {
    padding: 25px 25px 20px 20px;
}

[dir="rtl"] .call-history-container,
[dir="rtl"] .voice-mail-container,
[dir="rtl"] .all-contact-list {
    width: calc(100% - 3px);
}

[dir="rtl"] .details {
    width: unset;
}

[dir="rtl"] .chat-setting-container .edit {
    right: unset;
    left: 12px;
}

[dir="rtl"] .modal-footer {
    justify-content: flex-start;
}

[dir="rtl"] .import-chat-modal .imported-file .icon {
    margin-right: 0;
    margin-left: 12px;
}

[dir="rtl"] .sender-msg .onclick-checkbox {
    right: unset;
    left: 8px;
}

[dir="rtl"] .chat-container .sender-msg .onclick-checkbox {
    margin-left: -20px;
    margin-right: 2px;
}

[dir="rtl"] .reciever-msg .onclick-checkbox {
    margin-left: 2px;
    margin-right: -20px;
}

[dir="rtl"] .forward-msg-modal .modal-searchbar input[type="search"] {
    padding: 5px 15px 5px 40px;
}

[dir="rtl"] .forward-msg-modal .modal-searchbar .search-icon {
    right: unset;
    left: 4px;
}

[dir="rtl"] .forward-msg-modal .suggestion-list ul li p {
    margin-left: 0;
    margin-right: 10px;
}

[dir="rtl"] #addContactToForwardDiv .modal-footer {
    justify-content: space-between;
}

[dir="rtl"] .chat-list-item .msz-status-icon {
    margin-right: 0;
    margin-left: 0.25rem;
}

[dir="rtl"] .reciever-msg .forwarded-label,
[dir="rtl"] .sender-msg .forwarded-label {
    justify-content: flex-end;
    flex-direction: row-reverse;
}

[dir="rtl"] .google-mark {
    margin-right: 8px;
    margin-left: auto;
}

[dir="rtl"] .forward-msg-modal .modal-header button {
    right: unset;
    left: 20px;
}

[dir="rtl"] .forward-msg-modal .modal-footer button svg,
[dir="rtl"] .forward-msg-modal .modal-footer button img {
    transform: scaleX(-1);
}

[dir="rtl"] .main-dialpad span.clear_number {
    right: unset;
    left: 20px;
}

[dir="rtl"] .dialpad-header .input-number svg,
[dir="rtl"] .dialpad-header .input-number img {
    right: unset;
    left: 12px;
}

[dir="rtl"] .main-dialpad button.voice-mail-btn {
    left: unset;
    right: 24px;
}

[dir="rtl"] .main-dialpad .audio-call-btn {
    border-radius: 0 80px 80px 0;
}

[dir="rtl"] .main-dialpad .audio-call-btn.rounded-btn {
    border-radius: 80px;
}

[dir="rtl"] .main-dialpad .video-call-btn {
    border-radius: 80px 0px 0px 80px;
}

.all-contact-list .all-contact-list-item .audio-call-otpion-btn:not(.hide) {
    display: flex !important;
}

.all-contact-list .all-contact-list-item .audio-call-otpion-btn>.audio-call-otpion {
    border: 1px solid var(--call-activity-green);
    border-radius: 50%;
    background-color: var(--call-activity-green);
}

.__MSG__sound {
    margin: 0;
}

.deviceList {
    border-top: 1px solid var(--divider-border);
}

.deviceList li {
    border-radius: 5px;
}

ul.deviceList li {
    gap: 8px;
    margin-bottom: 8px;
}

ul.deviceList li:nth-last-child(1) {
    margin-bottom: 0;
}

.deviceList li:hover {
    background-color: var(--hover-icon-bg);
}

.deviceList li.selected {
    background: var(--hover-dark-bg);
}

.deviceList li span {
    min-width: 16px !important;
    height: 16px;
    opacity: 0;
}

.deviceList li.selected span {
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.__MSG__sound {
    margin: 0;
}

[dir="rtl"] .login-form .input-group,
[dir="rtl"] .password-modal .input-group {
    direction: ltr;
}

.flag-icon {
    border-radius: 2px;
    display: inline-block;
    margin-right: 10px;
}

[dir="rtl"] .flag-icon {
    margin-right: 0;
    margin-left: 10px;
}

#selectLanguage-btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    column-gap: 10px;
    font-size: 12px;
    color: var(--black-to-white-text);
    text-decoration: underline;
    font-weight: 500;
    box-sizing: border-box;
    margin: 0;
    position: fixed;
    outline: none !important;
    border: none !important;
    cursor: pointer;
    box-shadow: none;
    z-index: 5;
    bottom: 15px;
    /* left: 0; */
}

[dir="rtl"] #selectLanguage-btn {
    left: unset;
    right: 0;
}

#selectLanguage-btn::after {
    display: none;
}

button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}
/* Responsive bottom positioning for login page elements */
@media (max-height: 650px) {
    .version-number {
        bottom: 30px;
        font-size: 10px;
    }
    
    #selectLanguage-btn {
        bottom: 30px;
        font-size: 11px;
    }
    
    [dir="rtl"] .version-number {
        bottom: 10px;
    }
}

/* Ensure elements are visible on very small heights */
@media (max-height: 500px) {
    .version-number {
        bottom: 5px;
        font-size: 9px;
    }
    
    #selectLanguage-btn {
        bottom: 5px;
        font-size: 10px;
    }
    
    [dir="rtl"] .version-number {
        bottom: 5px;
    }
}

/* Ensure elements are visible on very large heights */
@media (min-height: 900px) {
    .version-number {
        bottom: 20px;
        font-size: 12px;
    }
    
    #selectLanguage-btn {
        bottom: 20px;
        font-size: 13px;
    }
    
    [dir="rtl"] .version-number {
        bottom: 20px;
    }
}

/* Devices Tab Styles :: START */

.setting-container .header.setting-options-heading>h3 {
    font-weight: 400;
    font-size: 15px;
    color: var(--text-gray-to-white);
    padding-left: 18px;
    margin-bottom: -10px;
}

[dir="rtl"] .setting-container .header.setting-options-heading>h3 {
    padding-left: unset;
    padding-right: 18px;
}

.setting-container .setting-options>.device-application-option {
    padding: 18px 20px;
}

.setting-container .setting-options>.device-application-option>div {
    gap: 16px;
    margin-bottom: 30px;
}

.setting-container .setting-options>.device-application-option>div:nth-last-child(1) {
    margin-bottom: 0;
}

.setting-container .setting-options>.device-application-option .title {
    color: var(--input-icon);
    font-size: 14px;
    font-weight: 600;
    line-height: 23px;
}

.setting-container .setting-options>.device-application-option p {
    color: var(--black-to-white-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
}

.setting-container .setting-options>.device-application-option .range-input-box {
    width: 255px;
}

.setting-container .config-alerts p {
    color: transparent !important;
    background-color: transparent;
    padding: 4px 10px;
    border-radius: 5px;
    min-width: 200px;
}

.setting-container .config-alerts.info p {
    color: var(--blue-color) !important;
    background-color: #cce1f9;
}

.setting-container .config-alerts.danger p {
    color: var(--error-text) !important;
    background-color: #ffdad7;
}

.setting-container .config-alerts.success p {
    color: var(--call-activity-green) !important;
    background-color: #d4eed3;
}

.range-input-box {
    display: flex;
    align-items: center;
    column-gap: 12px;
}

.range-input-box>svg {
    flex-shrink: 0;
}

.range-input-box>.asRange {
    background-color: var(--call-btn-color);
}

.range-input-box>.asRange .asRange-selected {
    background-color: var(--primary-bg);
}

.range-input-box>.asRange .asRange-pointer:before {
    background-color: var(--primary-bg);
    color: var(--primary-bg);
    z-index: 1;
    cursor: pointer;
}

.range-input-box>.asRange .asRange-pointer:hover:before {
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
}

.range-input-box>.asRange .asRange-pointer:active:before {
    box-shadow: 0 0 0 8px color-mix(in srgb, currentColor 20%, transparent);
}

.range-input-box>.asRange .asRange-pointer .asRange-tip {
    font-family: 'Poppins', sans-serif;
    background-color: var(--primary-bg);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    pointer-events: none;
    font-size: 9px;
    margin-left: -7px;
}

.range-input-box>.asRange .asRange-pointer .asRange-tip::before {
    background-color: var(--primary-bg);
    z-index: -1;
    width: 13px;
    height: 13px;
    border-radius: 4px;
    margin-left: -6px;
    bottom: -3.5px;
}

/* Devices Tab Styles :: END */

/* Devices controller Styles :: START */

#device-controller {
    position: absolute;
    right: 55px;
}

[dir="rtl"] #device-controller {
    right: unset;
    left: 55px;
}

#device-controller>.d-flex {
    column-gap: 8px;
}

#device-controller button>.range-input-box {
    position: absolute;
    width: 200px;
    height: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    padding-left: 16px;
    padding-right: 16px;
    right: -4px;
    border-radius: 50rem;
    -webkit-border-radius: 50rem;
    -moz-border-radius: 50rem;
    -ms-border-radius: 50rem;
    -o-border-radius: 50rem;
    /* background-color: var(--white-color); */
    pointer-events: none;
    /* opacity: 0;
    visibility: hidden; */
    transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
}

[dir="rtl"] #device-controller button>.range-input-box {
    padding-left: 16px;
    padding-right: 12px;
    right: unset;
    left: -4px;
}

#device-controller button:hover>.range-input-box,
#device-controller button:focus>.range-input-box,
#device-controller button:focus-within>.range-input-box {
    pointer-events: all;
    opacity: 1;
    visibility: visible;
    /* box-shadow: -0.6208994388580322px 1.8626981973648071px 4.967195510864258px 0px #0000001F; */
}

#device-controller button>.icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--call-btn-color);
    cursor: pointer;
    border-radius: 50rem;
    -webkit-border-radius: 50rem;
    -moz-border-radius: 50rem;
    -ms-border-radius: 50rem;
    -o-border-radius: 50rem;
    transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
}

#device-controller button:hover>.icon,
#device-controller button:focus>.icon,
#device-controller button:focus-within>.icon {
    border: 1px solid var(--primary-bg);
    background-color: var(--primary-bg);
}

#device-controller button>.icon>svg path {
    transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
}

#device-controller button.speaker-btn {
    z-index: 2;
}

#device-controller button.speaker-btn:hover>.icon>svg path:nth-child(1),
#device-controller button.mic-btn:hover>.icon>svg path:nth-child(1),
#device-controller button.speaker-btn:focus>.icon>svg path:nth-child(1),
#device-controller button.mic-btn:focus>.icon>svg path:nth-child(1),
#device-controller button.speaker-btn:focus-within>.icon>svg path:nth-child(1),
#device-controller button.mic-btn:focus-within>.icon>svg path:nth-child(1) {
    fill: var(--white-color);
}

#device-controller button.speaker-btn:hover>.icon>svg path:nth-child(2),
#device-controller button.speaker-btn:focus>.icon>svg path:nth-child(2),
#device-controller button.speaker-btn:focus-within>.icon>svg path:nth-child(2) {
    stroke: var(--white-color);
}

/* Devices controller Styles :: START */

/* No internet */
#internet-alert,
.alert-main {
    display: none;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    padding: 4px 16px;
    color: var(--white-color);
    border-radius: 5px;
    box-shadow: none;
    transition: background-color 0.3s ease-in-out;
    z-index: 9999999;
}

#internet-alert .text-box,
.alert-main .text-box {
    all: unset;
    font-weight: 500;
    font-size: 14px;
    padding-left: 8px;
    color: var(--white-color);
}

#internet-alert .refetch-btn {
    color: var(--white-color);
    font-weight: 500;
    font-size: 12px;
    margin-left: 16px;
    text-decoration: underline;
}

[dir="rtl"] #internet-alert .text-box,
.alert-main .text-box {
    padding-left: unset;
    padding-right: 8px;
}

[dir="rtl"] #internet-alert .refetch-btn {
    margin-left: unset;
    margin-right: 16px;
}

#internet-alert .offlineContent,
#internet-alert .onlineContent,
.alert-main {
    display: none;
}

#internet-alert.offline,
.alert-main.error {
    background-color: var(--chat-counter);
}

#internet-alert.online,
.alert-main.success {
    background-color: var(--call-activity-green);
}

.alert-main.info {
    background-color: var(--blue-color);
}

.alert-main.warning {
    background-color: var(--busy-yellow);
}

.alert-main.warning .text-box {
    color: var(--black-color);
}

#internet-alert.offline .offlineContent,
#internet-alert.online .onlineContent {
    display: flex;
}

/* Internet Connection Banner - Top Center */
#internet-connection-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999999;
    width: auto;
    height: auto;
    background-color: #ff0000;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: none;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

#internet-connection-banner.show {
    display: flex;
}

#internet-connection-banner .banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#internet-connection-banner .banner-icon {
    width: 20px;
    height: 20px;
    color: var(--white-color);
    flex-shrink: 0;
}

#internet-connection-banner .banner-text {
    color: var(--white-color);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

/* WebSocket Connection Banner - Top Center */
#websocket-connection-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999998;
    width: auto;
    background-color: #ff0000;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: none;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

#websocket-connection-banner.show {
    display: flex;
}

#websocket-connection-banner .banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#websocket-connection-banner .banner-icon {
    width: 20px;
    height: 20px;
    color: var(--white-color);
    flex-shrink: 0;
}

#websocket-connection-banner .banner-text {
    color: var(--white-color);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

/* API Server Connection Banner - Top Center */
#api-server-connection-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999997;
    width: auto;
    background-color: #ff0000;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: none;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

#api-server-connection-banner.show {
    display: flex;
}

#api-server-connection-banner .banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#api-server-connection-banner .banner-icon {
    width: 20px;
    height: 20px;
    color: var(--white-color);
    flex-shrink: 0;
}

#api-server-connection-banner .banner-text {
    color: var(--white-color);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

#crm_iframe {
    width: 26.5rem;
    height: 11.3rem;
    position: absolute;
    top: 100%;
    border-radius: 10px;
}

#childwindow_crm_iframe {
    width: 26.5rem;
    height: 11.3rem;
    position: absolute;
    top: 13%;
    border-radius: 10px;
    z-index: 9;
}

#crm_iframe:not(.d-none)~.call-connecting-status {
    visibility: hidden;
    pointer-events: none;
}

.person-num {
    background-color: var(--call-btn-bg);
    padding: 2px 4px;
    color: var(--text-dark-gray-to-white);
    display: inline-block;
}

.collerId-Msz-label {
    background-color: var(--call-btn-bg);
    gap: 6px;
    padding: 2px 4px;
    font-size: 8px;
    color: var(--text-dark-gray-to-white);
    width: fit-content;
}

.profileImageModal .btn-close {
    background-color: var(--white-color);
    background-image: unset;
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
    top: 10px;
    right: 10px;
    cursor: pointer;
    opacity: 1;
    cursor: pointer;
    mask-size: 70%;
    mask-repeat: no-repeat;
    mask-position: center;
}

[dir="rtl"] .profileImageModal .btn-close {
    left: 10px;
    right: unset;
}

.profileImageModal .img-contact {
    background-clip: padding-box;
    pointer-events: auto;
}

.profileImageModal .img-contact img {
    max-height: calc(100dvh - 3rem);
}

@media (min-width: 1200px) {
    .chat-container.info-open {
        margin-right: 320px;
    }

    [dir="rtl"] .chat-container.info-open {
        margin-left: 320px;
    }

    .right-profile-detail {
        width: 320px;
        right: -320px;
    }

    [dir="rtl"] .right-profile-detail {
        left: -320px;
    }
}

@media (min-width: 1400px) {
    .chat-container.info-open {
        margin-right: 360px;
    }

    [dir="rtl"] .chat-container.info-open {
        margin-left: 360px;
    }

    .right-profile-detail {
        width: 360px;
        right: -360px;
    }

    [dir="rtl"] .right-profile-detail {
        left: -360px;
    }
}

.searchInputClearIcon {
    right: 44px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

[dir="rtl"] .searchInputClearIcon {
    right: unset;
    left: 44px;
}

.hasClearIcon {
    cursor: default;
}

.hasClearIcon:not(:placeholder-shown) {
    padding-right: 58px;
}

[dir="rtl"] .hasClearIcon:not(:placeholder-shown) {
    padding-right: 15px;
    padding-left: 58px;
}

.hasClearIcon:not(:placeholder-shown)~.searchInputClearIcon {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

/* RECENT CHAT SECTION CSS :: STARTS */
.list-of-chats__box {
    background-color: transparent;
}

.menu-content-menu-header {
    margin: 0 20px;
    padding: 18.5px 0;
    border-bottom: 1px solid var(--divider-border);
}

.menu-content-menu-header h3 {
    color: var(--text-dark-gray-to-white);
    font-size: 15px;
    font-weight: 500;
}


.chat-menu-header-options {
    height: 23px;
}

.chat-menu-header-options>button:not(.hide) {
    display: inline-flex;
    width: 23px;
    height: 23px;
    padding: 2px;
    background-color: transparent;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}

.chat-menu-header-options>button:active,
.chat-menu-header-options>button:hover,
.chat-menu-header-options>button:focus {
    background-color: var(--hover-icon-bg);
}

.chat-menu-header-options>button .tooltiptext {
    right: -8px;
}

[dir="rtl"] .chat-menu-header-options>button .tooltiptext {
    left: -8px;
    right: 0;
}

.list-of-chats__box .recent-search-bar {
    width: calc(100% - 40px);
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin: 15px 20px;
}

.list-of-chats__box .recent-search-bar input[type="search"] {
    width: 100%;
    height: 100%;
    border: 1px solid var(--input-border-color);
    border-radius: 26px;
    padding: 8px 10px 8px 32px;
    color: var(--text-dark-gray-to-white);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
}

[dir="rtl"] .list-of-chats__box .recent-search-bar input[type="search"] {
    padding: 8px 32px 8px 10px;
}

.list-of-chats__box .recent-search-bar svg {
    position: absolute;
    left: 10px;
}

[dir="rtl"] .list-of-chats__box .recent-search-bar svg {
    right: 10px;
    left: unset;
}

.recent-chat-list {
    overflow: clip overlay;
}

.chat-item {
    position: relative;
    border-radius: 7px;
    margin: 6.5px 11px;
    padding: 7.5px 8.82px;
    background-color: transparent;
    height: 60px;
    cursor: pointer;
    transition: background-color 200ms ease-out;
}

.chat-item:not(:last-child)::after {
    content: "";
    width: 100%;
    position: absolute;
    border-bottom: 1px solid var(--hover-dark-bg);
    left: 0;
    right: 0;
    bottom: -7px;
}

.chat-item:hover,
.chat-item:focus {
    background-color: var(--hover-light-bg);
}

.chat-item.selected-chat {
    background-color: var(--hover-dark-bg);
}

.chat-item .user-img {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    position: relative;
    background-color: var(--primary-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
}

.chat-item .user-img span {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: 0em;
    text-transform: uppercase;
    text-align: center;
}

.chat-item .user-img img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 100%;
}

.chat-item .user-img .status {
    width: 13px;
    height: 13px;
    position: absolute;
    top: 0px;
    right: -3px;
}

.recent-chat-list-n .chat-item {
    height: 75px;
}

.chat-item .info-box {
    width: calc(100% - 62px);
    overflow: hidden;
}

.chat-item .info-box .last_conversation_msg {
    min-height: 11px;
}

.chat-item .info-box .last_conversation_msg .data-last-msg-icon:not(:has(svg)),
.chat-item:not(.selected-chat) .info-box .last_conversation_msg:has([data-draft]:not(.d-none)) .data-last-msg-icon:not(:has(svg)),
.chat-item:not(.selected-chat) .info-box .last_conversation_msg:has([data-draft]:not(.d-none)) .data-last-msg-icon,
.chat-item:not(.selected-chat) .info-box .last_conversation_msg:has([data-draft]:not(.d-none)) [data-last-msg],
.chat-item.selected-chat .info-box .last_conversation_msg [data-draft],
.chat-item.selected-chat .info-box .last_conversation_msg [data-draft-msg] {
    display: none;
}

.chat-item .info-box .last_conversation_msg:has(.new-msg > span[data-dot="true"]) .last-msg:not([data-msg-typing]) {
    font-weight: 700;
}

.chat-item .info-box .user-name,
.chat-item .info-box .user-number {
    font-size: 14px;
    color: var(--black-to-white-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: max-content;
}

.chat-item .info-box .user-number {
    font-size: 10px;
    color: var(--text-dark-gray-to-white);
}

.chat-item .info-box .time {
    font-size: 11px;
    color: var(--text-dark-gray-to-white);
}

.chat-item .info-box .icon {
    line-height: 0;
    color: var(--text-dark-gray-to-white);
}

.chat-item .info-box .last-msg {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--black-to-white-text);
    line-height: 1.2;
}

.chat-item .info-box .draft {
    font-size: 11px;
    color: var(--call-activity-green);
    font-weight: 600;
    line-height: 1.2;
}

.chat-item .new-msg {
    margin-left: auto;
}

.chat-item .new-msg:not(:has(span[data-dot="true"])) {
    display: none;
}

.chat-item .new-msg.msg-counter {
    display: inline-flex;
}

[dir="rtl"] .chat-item .new-msg {
    margin-left: unset;
    margin-right: auto;
}

.chat-item .new-msg>span[data-dot="true"] {
    display: block;
    background-color: var(--chat-counter);
    width: 7px;
    height: 7px;
    border-radius: 50rem;
}

.chat-item .new-msg>span.chat-counter {
    min-width: 20px;
    width: 100%;
    height: 20px;
    border-radius: 10px;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--chat-counter);
    color: var(--white-color);
    font-size: 11px;
    font-weight: 500;
}

/* RECENT CHAT SECTION CSS :: ENDS */

/* CHAT SEARCHBAR CSS :: STARTS */
.chat-searchbar {
    z-index: 1081;
    padding: 0px 40px 0px 20px;
    background: var(--input-bg);
    column-gap: 8.7px;
    transform: perspective(1000px) rotateX(-180deg);
    opacity: 0;
    user-select: none;
    pointer-events: none;
    visibility: hidden;
    transition: all 0.3s ease-in-out, opacity 0.2s ease-in-out;
}

.chat-searchbar.active,
.chat-searchbar:has(.search-bar-box [type="search"]:not(:placeholder-shown)),
.chat-searchbar:has(.search-bar-box [type="search"]:focus) {
    transform: perspective(1000px) rotateX(0deg);
    opacity: 1;
    user-select: none;
    pointer-events: all;
    visibility: visible;
}

[dir="rtl"] .chat-searchbar {
    padding: 0px 20px 0px 40px;
}

.chat-searchbar .search-bar-box [type="search"] {
    font-size: 12px;
    height: 60px;
}

.chat-searchbar .searchBar___counter {
    font-size: 12px;
    color: var(--text-dark-gray-to-white);
}

.chat-searchbar .search-option-box .arrow {
    width: 17px;
    height: 17px;
    background-color: var(--call-btn-bg);
}

.chat-searchbar .v-divider {
    background-color: var(--divider-border);
    width: 1px;
}

/* CHAT SEARCHBAR CSS :: ENDS */

/* CHAT BODY CSS :: STARTS */
.chat-body>div:not(.typing-indicator, .chat-loader) {
    min-height: 100%;
}

.chat-body>div.type-first-msg {
    min-height: calc(100% - 26px);
}

.person-detail .typing:not(.d-none)~span {
    display: none !important;
}

.main__msg-container {
    position: relative;
    display: flex;
    align-items: start;
    padding: 4px 20px;
}

.msg-bg-label {
    position: absolute;
    width: 0;
    top: 0;
    left: 0;
    height: 0;
    pointer-events: none;
    display: none;
    background-color: transparent;
    transition: background-color 200ms ease-out;
    z-index: 0;
}

.active-msg-selection .msg-bg-label {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: all;
}

.active-msg-selection .msg-bg-label:has(+ .checkbox > input[type="checkbox"]:checked) {
    background-color: var(--hover-light-bg);
}

.active-msg-selection .onclick-checkbox {
    display: block;
}

.active-msg-selection .msg_bubble_box {
    pointer-events: none;
}

.chat-forwarded-container,
.onclick-checkbox {
    display: none;
}

.msg-container.received {
    align-items: flex-start;
}

.msg-container.sended {
    align-items: flex-end;
}

.msg-container .msg-sender-name {
    font-size: 11px;
    color: var(--input-icon);
    font-weight: 500;
}

.msg-container.sended>.d-flex.w-100 {
    flex-direction: row-reverse;
}

.msg-container .msg_bubble_box {
    display: inline-flex;
    flex-direction: column;
    position: relative;
    width: max-content;
    max-width: 72%;
    overflow: hidden;
    z-index: 0;
    gap: 3.5px;
}

.msg-container .select-chat-option {
    border-radius: 11px !important;
    background-color: var(--input-bg);
    border: unset;
    box-shadow: var(--common-box-shadow);
}

.msg-container .select-chat-option ul {
    padding: 5px 10px !important;
}

.msg-container .select-chat-option ul li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-radius: 6px;
    margin: 2px 0px;
}

.msg-container .select-chat-option ul li span {
    width: 25px;
    display: flex;
    justify-content: center;
}

.msg-container .select-chat-option ul li:hover,
.msg-container .select-chat-option ul li:focus {
    background: var(--hover-dark-bg);
}

.msg-container .select-chat-option ul li p {
    margin-bottom: 0px;
    color: var(--black-to-white-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
}

.msg-container.received .msg_bubble_box {
    background-color: var(--received-chat-bubble-color);
    padding: 5px 15px 5px 8px;
    border-radius: 0 25px 25px 15px;
}

[dir="rtl"] .msg-container.received .msg_bubble_box {
    padding: 5px 8px 5px 15px;
    border-radius: 25px 0 15px 25px;
}

.msg-container.sended .msg_bubble_box {
    background-color: var(--sended-chat-bubble-color);
    padding: 5px 8px 5px 15px;
    border-radius: 25px 0 15px 25px;
}

[dir="rtl"] .msg-container.sended .msg_bubble_box {
    padding: 5px 15px 5px 8px;
    border-radius: 0 25px 25px 15px;
}

.msg-container .msg_bubble_box .forwarded-label {
    font-size: 8px;
    color: var(--text-dark-gray-to-white);
    user-select: none;
}

.msg-container .msg_bubble_box .text-msg {
    font-size: 12px;
    white-space: break-spaces;
    word-break: break-word;
    color: var(--black-to-white-text);
}

.msg-container .msg_bubble_box .text-msg a {
    font-weight: 600;
    color: #409EFF !important;
}

.msg-container .msg_bubble_box .msg-timing {
    font-size: 9px;
    color: var(--text-dark-gray-to-white);
    align-self: flex-end;
    user-select: none;
}

.msg-container .dropend,
.msg-container .dropstart {
    line-height: 0;
}

[dir="rtl"] .msg-container .dropend>.dropdown-menu {
    inset: 0 0 auto auto !important;
}

[dir="rtl"] .msg-container .dropstart>.dropdown-menu {
    inset: 0 auto auto 0 !important;
}

.msg-container .dropend>.dropdown-toggle::before,
.msg-container .dropstart>.dropdown-toggle::before {
    content: unset;
}

.msg-container .msg_bubble_box .msg-option-bropdown-btn {
    position: absolute;
    top: -5px;
    right: -4px;
    padding: 11px 15px 2px 5px;
    border-radius: 0 0 0 18px;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.1s ease;
}

[dir="rtl"] .msg-container .msg_bubble_box .msg-option-bropdown-btn {
    padding: 11px 10px 2px 5px;
    border-radius: 0px 0 0px 18px;
    right: -4px;
}

.msg-container.received .msg_bubble_box .msg-option-bropdown-btn {
    background-color: var(--received-chat-bubble-color);
    box-shadow: -3px 3px 5px 2px var(--received-chat-bubble-color);
}

.msg-container.sended .msg_bubble_box .msg-option-bropdown-btn {
    background-color: var(--sended-chat-bubble-color);
    box-shadow: -3px 3px 5px 2px var(--sended-chat-bubble-color);
}

.msg-container .msg_bubble_box:hover .msg-option-bropdown-btn,
.msg-container .msg_bubble_box .msg-option-bropdown-btn.active {
    opacity: 1;
    pointer-events: all;
    z-index: 9999;
}

.msg-container .msg_bubble_box .msg-option-bropdown-btn * {
    pointer-events: none;
}

/* for image & video */
.msg-container .msg_bubble_box.msg_bubble_image,
.msg-container .msg_bubble_box.msg_bubble_video {
    max-width: 235px;
    padding: 0;
    padding-bottom: 5px;
}

[dir="rtl"] .msg-container .msg_bubble_box.msg_bubble_image,
[dir="rtl"] .msg-container .msg_bubble_box.msg_bubble_video {
    padding: 0;
    padding-bottom: 5px;
    border-radius: 20px 0 20px 20px;
}

.msg-container.received .msg_bubble_box.msg_bubble_image,
.msg-container.received .msg_bubble_box.msg_bubble_video {
    border-radius: 0 20px 20px 20px;
}

[dir="rtl"] .msg-container.received .msg_bubble_box.msg_bubble_image,
[dir="rtl"] .msg-container.received .msg_bubble_box.msg_bubble_video {
    border-radius: 20px 0 20px 20px;
}

.msg-container .msg_bubble_box.msg_bubble_image .image-media-container,
.msg-container .msg_bubble_box.msg_bubble_video .video-media-container {
    position: relative;
    background-color: var(--gray-color);
    display: inline-flex;
}

.msg-container .msg_bubble_box.msg_bubble_image .image-media-container>img {
    width: 100%;
    min-height: 149px;
    max-height: 238px;
    min-width: 235px;
    object-fit: cover;
    object-position: center;
    cursor: pointer;
}

.msg-container.received .msg_bubble_box.msg_bubble_image>.forwarded-label,
.msg-container.received .msg_bubble_box.msg_bubble_video>.forwarded-label {
    padding: 5px 15px 0 8px;
}

[dir="rtl"] .msg-container.received .msg_bubble_box.msg_bubble_image>.forwarded-label,
[dir="rtl"] .msg-container.received .msg_bubble_box.msg_bubble_video>.forwarded-label {
    padding: 5px 8px 0 15px;
}

.msg-container .msg_bubble_box.msg_bubble_image .msg-sender-name,
.msg-container.received .msg_bubble_box.msg_bubble_image>.msg-file-details,
.msg-container.received .msg_bubble_box.msg_bubble_image>.text-msg,
.msg-container.received .msg_bubble_box.msg_bubble_image>.msg-timing,
.msg-container .msg_bubble_box.msg_bubble_video .msg-sender-name,
.msg-container.received .msg_bubble_box.msg_bubble_video>.msg-file-details,
.msg-container.received .msg_bubble_box.msg_bubble_video>.text-msg,
.msg-container.received .msg_bubble_box.msg_bubble_video>.msg-timing {
    padding: 0 10px 0 9px;
}

[dir="rtl"] .msg-container .msg_bubble_box.msg_bubble_image .msg-sender-name,
[dir="rtl"] .msg-container.received .msg_bubble_box.msg_bubble_image>.msg-file-details,
[dir="rtl"] .msg-container.received .msg_bubble_box.msg_bubble_image>.text-msg,
[dir="rtl"] .msg-container.received .msg_bubble_box.msg_bubble_image>.msg-timing,
[dir="rtl"] .msg-container .msg_bubble_box.msg_bubble_video .msg-sender-name,
[dir="rtl"] .msg-container.received .msg_bubble_box.msg_bubble_video>.msg-file-details,
[dir="rtl"] .msg-container.received .msg_bubble_box.msg_bubble_video>.text-msg,
[dir="rtl"] .msg-container.received .msg_bubble_box.msg_bubble_video>.msg-timing {
    padding: 0 9px 0 10px;
}

.msg-container .msg_bubble_box.msg_bubble_image>.msg-sender-name:first-child,
.msg-container .msg_bubble_box.msg_bubble_video>.msg-sender-name:first-child {
    padding-top: 5px;
}

.msg-container .msg_bubble_box.msg_bubble_image>.image-media-container>.download-icon,
.msg-container .msg_bubble_box.msg_bubble_video>.video-media-container>.download-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backdrop-filter: blur(2px);
}

.msg-container .msg_bubble_box .download-icon>.state-icon svg {
    width: 25px;
    height: 25px;
}

.download-icon>.state-icon svg {
    width: 30px;
    height: 30px;
}
#greetingContainer .download-icon>.state-icon svg,
#greetingContainer .download-icon>.play-icon svg,
#greetingContainer .download-icon>.pause-icon svg,
#greetingContainer .download-icon.small svg {
    width: 25px;
    height: 25px;
}

.msg-container .msg_bubble_box .download-icon.larg>.state-icon svg {
    width: 45px;
    height: 45px;
}

.state-icon svg {
    width: 30px;
    height: 30px;
}

.msg-container .msg_bubble_box .download-icon[data-downloading-state="downloaded"],
.msg-container .msg_bubble_box .download-icon[data-uploading-state="uploaded"] {
    display: none !important;
}

.msg-container .msg_bubble_box .download-icon>.state-icon {
    display: none;
}

.msg-container .msg_bubble_box .download-icon[data-downloading-state="not_downloaded"]>.state-icon[data-state="not_downloaded"],
.msg-container .msg_bubble_box .download-icon[data-downloading-state="downloading"]>.state-icon[data-state="downloading"],
.msg-container .msg_bubble_box .download-icon[data-uploading-state="not_uploaded"]>.state-icon[data-state="not_uploaded"],
.msg-container .msg_bubble_box .download-icon[data-uploading-state="uploading"]>.state-icon[data-state="uploading"] {
    display: inline-block;
    position: relative;
}

.msg-container.sended .msg_bubble_box.msg_bubble_image,
.msg-container.sended .msg_bubble_box.msg_bubble_video {
    border-radius: 20px 0 20px 20px;
}

[dir="rtl"] .msg-container.sended .msg_bubble_box.msg_bubble_image,
[dir="rtl"] .msg-container.sended .msg_bubble_box.msg_bubble_video {
    border-radius: 0 20px 20px 20px;
}

.msg-container.sended .msg_bubble_box.msg_bubble_image>.forwarded-label,
.msg-container.sended .msg_bubble_box.msg_bubble_video>.forwarded-label {
    padding: 5px 8px 0 15px;
}

[dir="rtl"] .msg-container.sended .msg_bubble_box.msg_bubble_image>.forwarded-label,
[dir="rtl"] .msg-container.sended .msg_bubble_box.msg_bubble_video>.forwarded-label {
    padding: 5px 15px 0 8px;
}

.msg-container.sended .msg_bubble_box.msg_bubble_image>.msg-file-details,
.msg-container.sended .msg_bubble_box.msg_bubble_image>.text-msg,
.msg-container.sended .msg_bubble_box.msg_bubble_image>.msg-timing,
.msg-container.sended .msg_bubble_box.msg_bubble_video>.msg-file-details,
.msg-container.sended .msg_bubble_box.msg_bubble_video>.text-msg,
.msg-container.sended .msg_bubble_box.msg_bubble_video>.msg-timing {
    padding: 0 9px 0 10px;
}

[dir="rtl"] .msg-container.sended .msg_bubble_box.msg_bubble_image>.msg-file-details,
[dir="rtl"] .msg-container.sended .msg_bubble_box.msg_bubble_image>.text-msg,
[dir="rtl"] .msg-container.sended .msg_bubble_box.msg_bubble_image>.msg-timing,
[dir="rtl"] .msg-container.sended .msg_bubble_box.msg_bubble_video>.msg-file-details,
[dir="rtl"] .msg-container.sended .msg_bubble_box.msg_bubble_video>.text-msg,
[dir="rtl"] .msg-container.sended .msg_bubble_box.msg_bubble_video>.msg-timing {
    padding: 0 10px 0 9px;
}

.msg-container .msg_bubble_box.msg_bubble_video>.video-media-container>.video-control-btn {
    background-color: var(--white-color);
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.msg-container .msg_bubble_box.msg_bubble_video>.video-media-container>video {
    min-width: 235px;
    height: 149px;
    object-fit: cover;
}

.msg-container .msg_bubble_box.msg_bubble_video>.video-media-container>.video-duration {
    position: absolute;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    gap: 5px;
    color: var(--white-color);
    font-size: 8.5px;
    top: 15px;
    left: 15px;
}

[dir="rtl"] .msg-container .msg_bubble_box.msg_bubble_video>.video-media-container>.video-duration {
    flex-direction: row-reverse;
}

.msg-container .msg_bubble_box.msg_bubble_video>.video-media-container>.download-icon[data-uploading-state="not_uploaded"]~.video-control-btn,
.msg-container .msg_bubble_box.msg_bubble_video>.video-media-container>.download-icon[data-uploading-state="not_uploaded"]~.video-duration,
.msg-container .msg_bubble_box.msg_bubble_video>.video-media-container>.download-icon[data-downloading-state="downloading"]~.video-control-btn,
.msg-container .msg_bubble_box.msg_bubble_video>.video-media-container>.download-icon[data-downloading-state="downloading"]~.video-duration,
.msg-container .msg_bubble_box.msg_bubble_video>.video-media-container>.download-icon[data-downloading-state="not_downloaded"]~.video-control-btn,
.msg-container .msg_bubble_box.msg_bubble_video>.video-media-container>.download-icon[data-downloading-state="not_downloaded"]~.video-duration,
.msg-container .msg_bubble_box.msg_bubble_video>.video-media-container>.download-icon[data-uploading-state="uploading"]~.video-control-btn,
.msg-container .msg_bubble_box.msg_bubble_video>.video-media-container>.download-icon[data-uploading-state="uploading"]~.video-duration {
    display: none;
}

.msg-container .msg_bubble_box.msg_bubble_video>.video-media-container::after {
    position: absolute;
    content: "";
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0) 59.73%,
            #000000 100%);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* for file */
.msg-container .msg_bubble_box.msg_bubble_file {
    max-width: 221px;
    width: 100%;
}

.msg-container.received .msg_bubble_box.msg_bubble_file,
[dir="rtl"] .msg-container.sended .msg_bubble_box.msg_bubble_file,
.msg-container.received .msg_bubble_box.msg_bubble_audio,
[dir="rtl"] .msg-container.sended .msg_bubble_box.msg_bubble_audio {
    border-radius: 0 20px 20px 15px;
    padding: 10px 13px 8px 8px;
}

[dir="rtl"] .msg-container.received .msg_bubble_box.msg_bubble_file,
.msg-container.sended .msg_bubble_box.msg_bubble_file,
[dir="rtl"] .msg-container.received .msg_bubble_box.msg_bubble_audio,
.msg-container.sended .msg_bubble_box.msg_bubble_audio {
    border-radius: 20px 0 15px 20px;
    padding: 10px 8px 8px 13px;
}

.msg-container .msg_bubble_box.msg_bubble_file>.file-media-container .file-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 7.11px;
}

.msg-container.received .msg_bubble_box.msg_bubble_file>.file-media-container .file-icon {
    background-color: var(--received-chat-file-icon-bg);
}

.msg-container.sended .msg_bubble_box.msg_bubble_file>.file-media-container .file-icon {
    background-color: var(--sended-chat-file-icon-bg);
}

.msg-container .msg_bubble_box.msg_bubble_file>.file-media-container .media-details-box {
    width: calc(100% - 44px);
}

.msg-container .msg_bubble_box.msg_bubble_file>.file-media-container:has(.download-icon[data-downloading-state="not_downloaded"]) .media-details-box,
.msg-container .msg_bubble_box.msg_bubble_file>.file-media-container:has(.download-icon[data-downloading-state="downloading"]) .media-details-box,
.msg-container .msg_bubble_box.msg_bubble_file>.file-media-container:has(.download-icon[data-uploading-state="uploading"]) .media-details-box,
.msg-container .msg_bubble_box.msg_bubble_file>.file-media-container:has(.download-icon[data-uploading-state="not_uploaded"]) .media-details-box {
    width: calc(100% - 74px);
}

.msg-container .msg_bubble_box.msg_bubble_file>.file-media-container .file-name {
    color: var(--black-to-white-text);
    font-size: 12.8px;
    word-break: break-all;
}

.msg-container .msg_bubble_box.msg_bubble_file>.file-media-container .download-icon {
    padding-top: 4px;
}

/* for audio */
.msg-container .msg_bubble_box.msg_bubble_audio {
    max-width: 312px;
    width: 100%;
}

.msg-container .msg_bubble_box.msg_bubble_audio>.audio-media-container {
    position: relative;
}

.msg-container .msg_bubble_box.msg_bubble_audio>.audio-media-container .audioplayer {
    padding: 0;
    height: 36px;
}

.msg-container .msg_bubble_box.msg_bubble_audio>.audio-media-container .audioplayer .current-time,
.msg-container .msg_bubble_box.msg_bubble_audio>.audio-media-container .audioplayer .total-time,
.msg-container .msg_bubble_box.msg_bubble_audio>.audio-media-container .audioplayer .slash {
    font-size: 10px;
    color: var(--text-dark-gray-to-white) !important;
}

.msg-container .msg_bubble_box.msg_bubble_audio>.audio-media-container .audioplayer .audioplayer-bar::before {
    background-color: var(--white-color) !important;
}

.msg-container .msg_bubble_box.msg_bubble_audio>.audio-media-container .download-icon {
    position: absolute;
    top: 5.3px;
    left: -2.5px;
}

.msg-container .msg_bubble_box.msg_bubble_audio>.audio-media-container .download-icon[data-downloading-state="not_downloaded"]~.audioplayer,
.msg-container .msg_bubble_box.msg_bubble_audio>.audio-media-container .download-icon[data-downloading-state="downloading"]~.audioplayer,
.msg-container .msg_bubble_box.msg_bubble_audio>.audio-media-container .download-icon[data-uploading-state="not_uploaded"]~.audioplayer,
.msg-container .msg_bubble_box.msg_bubble_audio>.audio-media-container .download-icon[data-uploading-state="uploading"]~.audioplayer {
    pointer-events: none;
}

.msg-container .msg_bubble_box.msg_bubble_audio>.audio-media-container .download-icon[data-downloading-state="not_downloaded"]~.audioplayer .audioplayer-playpause,
.msg-container .msg_bubble_box.msg_bubble_audio>.audio-media-container .download-icon[data-downloading-state="downloading"]~.audioplayer .audioplayer-playpause,
.msg-container .msg_bubble_box.msg_bubble_audio>.audio-media-container .download-icon[data-uploading-state="not_uploaded"]~.audioplayer .audioplayer-playpause,
.msg-container .msg_bubble_box.msg_bubble_audio>.audio-media-container .download-icon[data-uploading-state="uploading"]~.audioplayer .audioplayer-playpause {
    visibility: hidden;
}

/* UI updater in Chat */
[dir="rtl"] .audioplayer {
    flex-direction: row-reverse;
}

.play-icon-new {
    flex-shrink: 0;
    max-width: 16px;
}

.download-icon>.state-icon-new svg,
.download-icon>.play-icon-new svg{
    max-width: 16px !important;
    max-height: 16px !important;
}
.state-icon svg{
    width:30px;
    height:30px;
}

.circular-loader {
    animation: rotate 2s linear infinite;
    transform-origin: center center;
}

@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.circular-loader .loader-path {
    stroke-dasharray: 0, 200;
    stroke-dashoffset: -10;
    animation: dash 3s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}

.msg-file-details {
    display: inline-flex;
    gap: 3px;
    font-size: 9px;
    color: var(--text-dark-gray-to-white);
    text-transform: uppercase;
}

[dir="rtl"] .msg-file-details {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.active-msg-selection~.chat-footer,
.active-msg-selection~.message-footer {
    display: none;
}

.message-footer .caller-id span {
    font-size: 12px;
}

.emoji-btn {
    background-color: transparent;
    border-radius: 50rem;
    transition: background-color 0.5s ease-out;
}

.emoji-btn:hover,
.emoji-btn:focus {
    background-color: var(--hover-icon-bg);
}

.emoji-btn svg {
    padding: 4px;
    width: 20px;
    height: 20px;
}

.msg-action-label {
    color: var(--text-gray-to-white);
    font-size: 8px;
    display: flex;
    z-index: 1;
    font-style: italic;
}

.msg-action-label.failed {
    color: var(--chat-counter);
    font-style: normal;
}

.msg-action-label>button {
    font-size: inherit;
    color: inherit !important;
    text-decoration: underline;
    font-style: italic;
}

.typing-indicator {
    background-color: var(--divider-border);
    border-radius: 50rem;
    width: 22px;
    height: 9px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 2px;
    margin: 0 20px;
}

.typing-indicator.isTyping {
    display: inline-flex;
}

.dot-flashing-1,
.dot-flashing-2,
.dot-flashing-3 {
    width: 4px;
    height: 4px;
    border-radius: 5px;
    background-color: var(--text-dark-gray-to-white);
    color: var(--text-dark-gray-to-white);
    animation: dot-flashing 1s infinite linear alternate;
    animation-delay: 0.5s;
    opacity: 1;
}

.dot-flashing-2 {
    animation-delay: 0s;
}

.dot-flashing-3 {
    animation-delay: 1s;
}

@keyframes dot-flashing {
    0% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0.2;
    }
}

.collerId_msg_label {
    gap: 6px;
    font-size: 8px;
    color: var(--text-dark-gray-to-white);
    width: fit-content;
    z-index: 0;
}

/* .msg-container .msg_bubble_box:has(.download-icon[data-downloading-state="not_downloaded"]) .msg-option-bropdown-btn,
.msg-container .msg_bubble_box:has(.download-icon[data-downloading-state="downloading"]) .msg-option-bropdown-btn, */
.msg-container .msg_bubble_box:has(.download-icon[data-uploading-state="not_uploaded"]) .msg-option-bropdown-btn,
.msg-container .msg_bubble_box:has(.download-icon[data-uploading-state="uploading"]) .msg-option-bropdown-btn {
    display: none;
}

/* .main__msg-container:has(.msg-container .msg_bubble_box .download-icon[data-downloading-state="not_downloaded"]) .onclick-checkbox > *,
.main__msg-container:has(.msg-container .msg_bubble_box .download-icon[data-downloading-state="downloading"]) .onclick-checkbox > *, */
.main__msg-container:has(.msg-container .msg_bubble_box .download-icon[data-uploading-state="not_uploaded"]) .onclick-checkbox>*,
.main__msg-container:has(.msg-container .msg_bubble_box .download-icon[data-uploading-state="uploading"]) .onclick-checkbox>* {
    pointer-events: none;
    visibility: hidden;
}

/* CHAT BODY CSS :: ENDS */

/* CHAT SELECTED ACTION FOOTER CSS :: STARTS */
.action-footer {
    position: relative;
    display: none;
    width: 100%;
    padding: 20px 20px 26px;
    border-top: 1px solid var(--divider-border);
}

.active-msg-selection~.action-footer {
    display: flex;
}

.action-footer .selected-mszs {
    font-size: 17px;
    color: var(--black-to-white-text);
}

.group-left-massage:not(.d-none)+.chat-footer {
    display: none;
}

/* CHAT SELECTED ACTION FOOTER CSS :: ENDS */

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

.allow-drag {
    user-select: all;
    -webkit-user-drag: auto;
}

/* Media not found */
.main__msg-container .image-media-container .media-not-found-box:not(.d-none)~*,
.main__msg-container .video-media-container .media-not-found-box:not(.d-none)~*,
.main__msg-container .msg_bubble_file .media-not-found-box.medium:not(.d-none)~.file-media-container,
.main__msg-container .audio-media-container .media-not-found-box.small:not(.d-none)~.download-icon.small {
    display: none !important;
}

.main__msg-container .audio-media-container .media-not-found-box.small:not(.d-none)~.audioplayer .audioplayer-playpause {
    visibility: hidden;
    pointer-events: none;
}

.main__msg-container .audio-media-container .media-not-found-box.small:not(.d-none)~.audioplayer {
    pointer-events: none;
}

.main__msg-container .audio-media-container .media-not-found-box.small {
    position: absolute;
    top: 9px;
    left: 2px;
}

.main__msg-container .msg_bubble_file .media-not-found-box.medium .msg-file-details {
    text-transform: none;
}

.main__msg-container .media-not-found-box {
    display: flex;
}

.main__msg-container .media-not-found-box.larg {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 235px;
    height: 149px;
    gap: 7px;
}

.main__msg-container .media-not-found-box.larg .media-not-found-text {
    font-size: 10px;
    color: var(--white-color);
}

/* zoom buttons */

.image-zoom-btn-container {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

[dir='rtl'] .image-zoom-btn-container {
    margin-left: unset;
    margin-right: auto;
}

.image-zoom-btn-container .btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.media-preview-modal .attachment-preview .carousel-item.active .preview-item img.img-drag:first-child {
    cursor: move;
}

.media-preview-modal .attachment-preview .carousel-item.active,
.media-preview-modal .attachment-preview * {
    -webkit-user-drag: none !important;
    user-select: none;
}

.media-preview-modal .attachment-preview .carousel-item.active .preview-item img.img-drag:first-child:active {
    cursor: grabbing;
}

/* For MS Team Desk App */

.ms_team_app .header .auto-answer,
.ms_team_app .header .dnd,
.ms_team_app .middle-content .menu-header h3.accordion-header,
.ms_team_app .right-side .type-of-call,
.ms_team_app .right-side .active-video-call-screen .back-arrow,
.ms_team_app .left-side,
.ms_team_app .hidden-section {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.header-setting-btn {
    display: none;
    position: relative;
    min-height: 50px;
    margin: 10px;
}

.header-setting-btn.active::after {
    content: "";
    background-color: var(--white-color);
    position: absolute;
    width: 100%;
    height: 4px;
    bottom: 0;
    left: 0;
    border-radius: 10px 10px 0 0;
}

.ms_team_app .header-setting-btn {
    display: inline-flex;
}

.gap-2_5 {
    gap: 0.75rem !important
}

.earlyStatus {
    width: 16px;
    height: 16px;
}

.recent-chat-list .user-img .status:not([alt='Early']) {
    animation: unset
}

.recent-chat-list .user-img .status[alt='Early'] {
    text-decoration: blink;
    animation: blinker 1s ease-in infinite alternate;
    -webkit-animation: blinker 1s ease-in infinite alternate;
}

/*vibhuti code*/

.caller-id span,
#contactTypeDropdown span {
    word-break: break-all;
}

#defaultCallerId {
    max-width: 106px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.call-pop-model .form-check-input {
    padding-left: 0;
    border-radius: .25em;
}


.contact-status-icon {
    width: 16px;
    height: 16px;
}

.open-contact-detail .calling-options {
    margin-left: auto;
}

[dir="rtl"] .open-contact-detail .calling-options {
    margin-right: auto;
    margin-left: unset;
}

.details-status {
    right: 0 !important;
}

[dir="rtl"] .details-status {
    right: unset !important;
    left: 0 !important;
}

.contact-form-container {
    padding: 10px 20px;
    overflow: clip overlay;
    max-height: calc(100dvh - 114px);
}

.contact-form-container .form-icon {
    width: 30px;
    height: 30px;
    background-color: var(--primary-bg);
    border-radius: 50rem;
    flex-shrink: 0;
    margin-top: 10px;
}

.contact-form-container .form-icon.no-icon {
    background-color: transparent;
}

.form-container .form-control {
    padding: 16px 19px;
    border: 0.71px solid var(--input-border-color) !important;
    border-radius: 4px;
    background-image: none !important;
    font-size: 12px;
}

.contact-form-container .form-container .form-control {
    padding: 16px 19px;
    border: 0.71px solid var(--input-border-color) !important;
    border-radius: 4px;
    background-image: none !important;
    font-size: 12px;
}

.contact-form-container .form-container .form-control.is-invalid {
    border: 1.5px solid var(--call-decline-red) !important;
}

.contact-form-container .form-container .form-control:not(.is-invalid)+.invalid-feedback {
    display: none;
}

.contact-form-container .form-container .invalid-feedback {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--call-decline-red);
}

.contact-form-container .save-btn {
    background: var(--btn-gradient);
    font-size: 16px;
    font-weight: 500;
    color: var(--white-color);
    border-radius: 7px;
    min-width: 162px;
    margin-top: 27px;
}


.answering-rues .dropdown-icon {
    display: inline-flex;
    align-items: center;
}

.answering-rues .heat-icon {
    display: inline-block;
    margin-right: 5px;
    font-size: 16px;
    line-height: 1;
}

.form-container .form-control {
    padding: 16px 19px;
    border: 0.71px solid var(--input-border-color) !important;
    border-radius: 4px;
    background-image: none !important;
    font-size: 12px;
}



#loaderModal {
    background: rgba(192, 192, 192, 0.5);
}

.recent-chat-list .user-img .status:not([alt='Early']) {
    animation: unset
}

.recent-chat-list .user-img .status[alt='Early'] {
    text-decoration: blink;
    animation: blinker 1s ease-in infinite alternate;
    -webkit-animation: blinker 1s ease-in infinite alternate;
}

.media-preview-modal .attachment-preview .containerEl {
    overflow: hidden;
}

.media-preview-modal .attachment-preview .preview-area {
    height: 450px;
    width: 100%;
    justify-content: center;
    padding: 20px;
}

.media-preview-modal .attachment-preview .preview-area img {
    width: fit-content;
    height: 410px;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
}

.media-preview-modal .attachment-preview .preview-area+.caption {
    font-size: 10.8px;
    color: var(--black-to-white-text);
    padding: 20px;
    overflow: clip overlay;
    margin: 0;
    width: 100%;
    height: calc(100dvh - 562px);
    max-height: calc(100dvh - 562px);
    word-break: break-all;
}

.media-preview-modal .attachment-preview .preview-area img.img-drag {
    cursor: move;
}

.media-preview-modal .attachment-preview .preview-area img.img-drag:active,
.img-drag:active {
    cursor: grabbing;
    transition: none !important;
}

.inChatVideo.media-preview-modal .attachment-preview .preview-area .xdContainer {
    width: fit-content;
    height: 410px;
}

.form-container .form-control {
    padding: 16px 19px;
    border: 0.71px solid var(--input-border-color) !important;
    border-radius: 4px;
    background-image: none !important;
    font-size: 12px;
}



.answering-rues .dropdown-icon {
    display: inline-flex;
}

#loaderModal .modal-content {
    max-width: max-content;
    background: var(--hover-light-bg);
    align-items: center;
    margin: 0 auto;
    display: flex;
    border-radius: 10px !important;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

#loaderModal .spinner-border {
    color: var(--primary-bg);
}

.form-container .form-control {
    padding: 16px 19px;
    border: 0.71px solid var(--input-border-color) !important;
    border-radius: 4px;
    background-image: none !important;
    font-size: 12px;
}


#loaderModal {
    background: rgba(192, 192, 192, 0.5);
}

#loaderModal .modal-content {
    max-width: max-content;
    background: var(--white-color);
    align-items: center;
    margin: 0 auto;
    display: flex;
    border-radius: 10px !important;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

#loaderModal .spinner-border {
    color: var(--primary-bg);
}

#loaderModal p {
    color: var(--primary-bg);
}

.add-greeting {
    color: var(--input-icon);
}

.add-greeting span {
    font-weight: 500;
}

#pills-greetings .setting-options {
    padding: 20px 18px;
}

.last-msg-user,
.last-msg {
    font-weight: 500;
}

.voice-date-time {
    color: var(--placeholder-color);
}

.voice-not {
    height: calc(100dvh - 140px);
}

.voice-not p {
    color: var(--input-icon);
}

.play-minit,
.down-icon {
    margin-right: 15px;
}

[dir="rtl"] .play-minit,
[dir="rtl"] .down-icon {
    margin-right: 0;
    margin-left: 15px;
}

.voice-not p {
    color: var(--input-icon);
}

.play-minit,
.down-icon,
.greeting-checked {
    margin-right: 15px;
}

#backToVoicemailList svg {
    margin-left: 15px;
}

#backToVoicemailList svg {
    cursor: pointer;
}

.greet-audio {
    margin-left: 15px;
}

[dir="rtl"] .play-minit,
[dir="rtl"] .down-icon,
[dir="rtl"] .greeting-checked {
    margin-right: 0;
    margin-left: 15px;
}

[dir="rtl"] #backToVoicemailList svg {
    margin-left: 0;
    margin-right: 15px;
}

[dir="rtl"] .greet-audio {
    margin-left: 0;
    margin-right: 15px;
}

[dir="rtl"] .add-greeting span svg {
    margin-right: 0;
    margin-left: 10px;
}

.add-greeting span svg {
    margin-right: 10px;
}

#voiceAccordio {
    cursor: pointer;

}

#voiceAccordion .accordion-collapse {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.1s ease-in;
}

#voiceAccordion .accordion-collapse.show {
    max-height: 500px;
    /* Adjust as needed based on your content */
}

#voiceAccordion .accordion-item {
    position: relative;
}

.unseen-msg {
    font-weight: 600;
}

.nomsg-found {
    color: var(--input-icon);
}

.group-member-count {
    color: var(--text-dark-gray-to-white);
}

.logout-modal-popup .new-popup {
    justify-content: center !important;
    padding-top: 0;
}

.logout-modal-popup .new-close {
    border-radius: 18px;
    text-align: end;
}

[dir="rtl"] .logout-modal-popup .new-close {
    text-align: left;
}

.logout-modal-popup .new-close:hover {
    box-shadow: none !important;
}

.logout-modal-popup .new-close svg {
    margin-right: 10px;
    margin-top: 10px;
}

[dir="rtl"] .logout-modal-popup .new-close svg {
    margin-right: unset;
    margin-left: 10px;
}

.new-close .tooltiptext {
    right: 0;
    text-align: end;
}

[dir="rtl"] .new-close .tooltiptext {
    text-align: left;
    right: unset;
    left: 0;
}

.details .caller-detail .calling-options .tooltip .tooltiptext {
    right: 0;
}

[dir="rtl"] .details .caller-detail .calling-options .tooltip .tooltiptext {
    right: unset;
    left: 0;
}

.voice-list .download-icon {
    height: 30px;
    width: 30px;
}

.voice-mail-container .accordion-item {
    background-color: unset !important;
}

/* Smooth transition */
.toggle-icon {
    transition: transform 0.3s ease;
}

/* When the collapsible section is OPEN, .greetings has NO .collapsed class */
.greetings:not(.collapsed) .toggle-icon {
    transform: rotate(180deg) !important;
}

.greeting-msg-txt {
    color: var(--text-dark-gray-to-white);
    font-size: 12px;
}

.greeting-select,
.greeting-select:hover {
    color: var(--input-icon)
}

.greeting-delete,
.greeting-delete:hover {
    color: var(--chat-counter);
}

.greeting-modal .modal-body {
    text-align: left;
}

/*
?*/

.mic-button {
    width: var(--mic-icon-size);
    height: var(--mic-icon-size);
    border-radius: 50%;
    background-color: var(--input-icon);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0 0.5rem;
    cursor: pointer;
    border: none;
}

.mic-label {
    color: var(--gray-color);
    font-size: 14px;
}

.voice-input-container {
    padding: 25px 20px 20px 25px;
}

.voice-input-container .play-minit {
    color: var(--input-icon);
    font-size: 18px;
    margin: 10px 0;
    display: block;
}

.center-square {
    width: 15px;
    height: 15px;
    background-color: var(--primary-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#recordingButton .progress {
    width: var(--mic-icon-size);
    height: var(--mic-icon-size);
    line-height: 150px;
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: relative;
    margin-bottom: 1em;
    overflow: visible;
}

#recordingButton .progress:after {
    content: "";
    width: 98%;
    height: 98%;
    border-radius: 50%;
    border: 2px solid var(--gray-color);
    position: absolute;
    top: 2px;
    left: 2px;
}

#recordingButton .progress>span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}

#recordingButton .progress .progress-left {
    left: 0;
}

#recordingButton .progress .progress-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 7px;
    border-style: solid;
    position: absolute;
    top: 0;
    border-color: var(--primary-color);
}

#recordingButton .progress .progress-left .progress-bar {
    left: 100%;
    border-top-right-radius: 75px;
    border-bottom-right-radius: 75px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}

#recordingButton .progress .progress-right {
    right: 0;
}

#recordingButton .progress .progress-right .progress-bar {
    left: -100%;
    border-top-left-radius: 75px;
    border-bottom-left-radius: 75px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
}

#recordingButton .progress .progress-value {
    display: flex;
    border-radius: 50%;
    font-size: 36px;
    text-align: center;
    line-height: 20px;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-weight: 300;
}

#recordingButton .progress-bar {
    transition: transform 1s linear;
}

  
  #callHistory  .open-contact-detail  .userName,
  #callHistory  .all-call-caller  .caller-name p, 
  #callHistory  .right-call-detail .caller-detail .caller-name{
    white-space: nowrap;       
    overflow: hidden;          
    text-overflow: ellipsis;    
    width: 180px;         
    display: block;      
  }


.loading-container {
    display: flex;
    align-items: center;
    font-family: sans-serif;
    color: var(--primary-color);
    font-size: 16px;
    margin-left: 10px;
}

[dir="rtl"] .loading-container {
    margin-left: 0px;
    margin-right: 10px;

}

.loading-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    animation: spinTwo 1s linear infinite;
}

[dir="rtl"] .loading-icon {
    margin-right: inherit;
    margin-left: 8px;
}

@keyframes spinTwo {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-txt {
    font-size: 11px;
}

/*LODER*/


/* .message-container p .name-info {
    max-width: calc(100% - 105px);
} */

.video-controls .progress:after {
    display: none
}

/* Hide native checkbox */
.greeting-checkbox {
    display: none;
}

/* Hide label by default */
.greeting-checkbox+label {
    display: none;
}

.greeting-checked {
    margin-bottom: 8px;
}

/* Show label and SVG when checkbox is checked */
.greeting-checkbox:checked+label {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
}

/* Add your SVG as background when checked */
.greeting-checkbox:checked+label::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 2.5px;
    width: 9px;
    height: 4px;
    background-repeat: no-repeat;
    background-size: contain;
}

.logout-modal-popup#reseller .modal-footer button, .btn-gradient, .btn-reset {
    min-width: 181px;
    font-size: 12px;
}

#sandboxModal.logout-modal-popup .modal-dialog {
    width: 490px !important;
}

/* unsupported-file-icon svg code */

.unsupported-file-icon{
    width: 40px;
    height: 60px;
    display: flex;
}

.unsupported-file-icon svg{
    height: 100%;
    width: 100%;
}
.unsupported-file-container .download-icon{   
    height: 20px;
}
.media-details-box p{
    color: var(--black-to-white-text);
}


.unsupported-file-container .tooltiptext{
    top: 10px;
    left: 0;
    max-width: 100%;
    word-break: break-all;
    white-space: break-spaces;
    height: auto;
}


/* notification  */

.notification-container {
    position: fixed;
    top: 55px;
    right: 20px;
    z-index: 99999;
  }
  [dir="rtl"] .notification-container {
    right: unset;
    left: 20px;
  }
  .notification {
    background: var(--blur-bg);
    color: var(--black-to-white-text);
    border-left: 5px solid var(--primary-color);
    padding: 10px 15px;
    margin-top: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--divider-border);
    min-width: 280px;
    max-width: 450px;
    font-size: 12px;
    animation: slideUp 0.4s ease forwards;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(11px);
    position: relative;
  }
  [dir="rtl"] .notification{
    border-left: unset;
    border-right: 5px solid var(--primary-color);
  }
  .notification.hide {
    opacity: 0;
    transform: translateX(100%);
  }

  .notification.fade-out {
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .notification .message {
    flex: 1;
    display: -webkit-box;         
    padding-right: 15px;
    word-break: break-word;      
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;       
    -webkit-box-orient: vertical; 
    max-height: 58px;
}

  .notification  svg{
    margin-right: 10px;
    flex-shrink: 0;
    max-width: 18px;
  }
  [dir="rtl"] .notification svg{
    margin-right: unset;
    margin-left: 10px;
  }
  [dir="rtl"] .notification .message {
    padding-right: 0px;
    padding-left: 15px;
  } 

  .notification .close-btn {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 6px;
  }
  [dir="rtl"] .notification .close-btn {
    right: unset;
    left: 10px;
  }
  .notification .close-btn svg{
    max-width: 12px;
  }

.notification-title {
    font-weight: 500;
    color: var(--black-to-white-text);
    text-transform: capitalize;
    margin-bottom: 8px;
    max-width: 450px;
    word-break: break-all;
}

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideDown {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  /* Dialpad Animation Classes - Moved from inline styles */
  .main-dialpad.dialpad-slide-up {
    animation: slideUp 0.4s ease forwards;
    transform: translateY(0);
  }

  .main-dialpad.dialpad-slide-down {
    animation: slideDown 0.4s ease forwards;
    transform: translateY(100%);
  }

  /* notification end  */

  .mobile_option .dropdown-menu{
    padding: 10px 5px !important;
  }
  .mobile_option .dropdown-menu .call_sip_row{
    margin: 2px 0px !important;
  }
  .mobile_option .dropdown-menu .call_sip {
    min-height: -webkit-fill-available;
    max-height: 240px;
    overflow-y: overlay;
}

.call_sip .call_sip_row span {
    display: block;                
    white-space: nowrap;          
    overflow: hidden;              
    text-overflow: ellipsis;      
}

#callPop .form-container{
    max-height: 350px;
    overflow: overlay;
}
#netsapiensDevicesList .call_sip_row.active{
    background-color: var(--element-active-bg) !important;
}
 /* netspeanse css */

p#netsapiensDeviceId {
    word-break: break-all;
}
#_voicemailGreetings svg{
    fill: none !important
}
.call-flip-svg svg{
    position: absolute;
    right: 55px;
    max-width: 30px;
    cursor: pointer;
}

/* FLIP ACTIVE COMPONENT STYLES */


.flip-active-card {
    background: var(--bg-color);
    border: 0.8px solid var(--divider-border);
    border-radius: 8px;
    width: 100%;
    padding: 14px;
}

.flip-active-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.user-info {
    flex: 1;
}

.flip-active-header .user-name {
    font-size: 16px;
    font-weight: 400;
    color: var(--black-to-white-text);
}


.status-indicators {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.status-badge {
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-dark-gray-to-white);
    letter-spacing: 0.5px;
    background: var(--divider-border);
}

.status-badge.active {
    background: #26AB23;
    color:var(--white-color);
}

.call-type {
    color: var(--text-gray-to-white);
    font-size: 12px;
    font-weight: 400;
}

.device-info {
    color: var(--black-to-white-text);
    font-size: 12px;
    font-weight: 400;
    margin-top: 4px;
}

#callFlip.logout-modal-popup .modal-dialog {
   width: unset !important;
}

.flip-button{
    padding: 5px 15px;
    background: transparent;
    border-radius: 6px;
    color: var(--input-icon);
    border: 0.8px solid var(--input-icon);
}
.ondevice-btn{
    color: var(--text-gray-to-white);
    border: 0.8px solid var(--text-gray-to-white);
}

.ondevice-btn svg{
    margin-right: 10px;
}

[dir="rtl"] .ondevice-btn svg{
    margin-right: 0;
    margin-left: 10px;
}

.ondevice-btn svg path{
    fill:var(--text-gray-to-white);
}

  /* Quick Reply Dropdown Styles */
.quick-reply-dropdown {
    position: absolute;
    bottom: 100%;
    right: -110px;
    border-radius: 20px; 
    box-shadow: var(--common-box-shadow);
    z-index: 1050;
    display: none;
    margin-bottom: 15px;
    border: 1px solid var( --divider-border);
    min-width:auto;
    background: var(--bg-color);
}
[dir="rtl"] .quick-reply-dropdown {
    right: unset;
    left: -110px;
}
.quick-reply-dropdown.show {
    display: block;
}

.snippet-item {
    padding: 10px;
    margin-bottom: 0;
    background: var(--bg-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: var(--black-to-white-text);
    white-space: pre-wrap;
    word-break: break-all;
    border-bottom: 1px solid var(--divider-border);
}


.snippet-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.category-list {
    padding: 10px;
    overflow-y: auto;
    position: relative;
}

.category-item {
    display: flex;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    font-weight: 500;
    color: var(--black-to-white-text);
    position: relative;
}
.category-item span{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}
.category-item:last-child {
    margin-bottom: 0;
}

.message-snippets {
    position: absolute;
    z-index: 1052;
    padding: 10px;
    right: 104%;
    width: 100%;
    max-height: 305px;
    overflow: overlay;
    z-index: 999;
    border-radius: 20px;
    box-shadow: var(--common-box-shadow);
    z-index: 1050;
    display: block;
    background: var(--bg-color);
    border: 1px solid var( --divider-border);
    min-width: 300px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0.9s ease;
    pointer-events: none;
    top: 0;
}


.message-snippets.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
[dir="rtl"] .message-snippets {    
    right: unset;
    left: 104%;
}
#patientEngagementModal.logout-modal-popup .modal-dialog,
#patientEngagementEditorModal.logout-modal-popup .modal-dialog{
    width: auto !important;
    max-width: 70% !important;
}

#patientEngagementModal.logout-modal-popup .modal-dialog .modal-body,
#patientEngagementEditorModal.logout-modal-popup .modal-dialog .modal-body{
    display: block !important;
    min-height: 280px;
    max-height: 500px;
    overflow-y: overlay !important;
}

#patientEngagementModal.logout-modal-popup .modal-dialog .modal-body h3,
#patientEngagementEditorModal.logout-modal-popup .modal-dialog .modal-body h3{
    font-size: 16px;
}

#patientEngagementModal.logout-modal-popup .modal-dialog .modal-body .select2-container .form-control{
    border: none !important;
    background-color: var(--dropdown-secondary-bg);
    color: var(--black-to-white-text);
}

.media-preview {
    border: 1px solid var(--divider-border);
    border-radius: 16px;
    padding: 15px;
    object-fit: contain;
    overflow: hidden;
    display: flex;
    gap: 20px;
}
.media-preview-name{
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
    color: var(--black-to-white-text);
}
/* Custom dropdown arrow for patient engagement modal */
.dropdown-with-arrow {
    position: relative;
}

.dropdown-with-arrow::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--text-dark-gray-to-white);
    pointer-events: none;
    z-index: 10;
}

[dir="rtl"] .dropdown-with-arrow::after {
    right: unset;
    left: 12px;
}

/* Rich Text Editor Styles for Patient Engagement Modal */
.rich-text-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--divider-border);
    border-bottom: none;
    border-radius: 16px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    flex-wrap: wrap;
    justify-content: space-between;
}

.toolbar-group {
    display: flex;
    gap: 2px;
}
.toolbar-group span {
    margin: 0 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-dark-gray-to-white);
}
.toolbar-separator {
    width: 1px;
    height: 24px;
    margin: 0 4px;
}

.rich-text-editor {
    min-height: 200px;
}

.editor-content {
    padding: 15px;
    min-height: 200px;
    outline: none;
    font-size: 14px; 
    line-height: 1.5;
    color: var(--black-to-white-text);
    border: 1px solid var(--divider-border);
    border-radius: 16px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.editor-content p {
    margin-bottom: 10px;
}

.editor-content p:last-child {
    margin-bottom: 0;
}

/* TRAG-12146 : added by mouna : START */

.editor-content ol {
    list-style-type: decimal; /* keep base numbering */
    list-style-position: outside;
    margin-left: 25px;
    padding-left: 5px;
}

.editor-content ol li::marker {
    content: counter(list-item) ") ";  /* custom 1), 2), 3) */
}

.editor-content ul {
    list-style-type: disc;      /* default • bullets */
    margin-left: 20px;
    padding-left: 20px;
}

.editor-content li {
    margin-bottom: 6px;         /* spacing between items */
}


/* TRAG-12146 : added by mouna : END */

.color-indicator {
    font-size: 10px;
    margin-left: 2px;
}

#patientEngagementEditorModal.logout-modal-popup .modal-footer{
    justify-content: end !important;
}
#patientEngagementEditorModal.logout-modal-popup p{
    text-align: unset !important;
}
.category-item:hover,
.snippet-item:hover,
.category-item.active{
    background-color: var(--element-active-bg);
}


/* Keyboard navigation highlight (separate from mouse hover/active) added by mouna */
.category-item.kb-active,
.snippet-item.kb-active {
    background-color: var(--element-active-bg);    
    outline-offset: -2px; /* keep inside box */
}

.media-item {
    max-width: 200px;
    overflow: hidden;
    object-fit: cover;
}

.media-item img,
.media-item video{
    width: 100%;
    object-fit: contain;
}

/* TRAG-12292 Orthovoip Message bubble color START  */
.msg-container.sended.orthovoip-enabled .msg_bubble_box .text-msg,
.msg-container.sended.orthovoip-enabled .msg_bubble_box .msg-timing {
  color: var(--white-color);
}

.msg-container.sended.orthovoip-enabled .msg_bubble_box:hover .msg-option-bropdown-btn svg path {
  stroke: var(--white-color);
}

.msg-container.sended.orthovoip-enabled .msg_bubble_box .text-msg a{
    color: var(--white-color) !important;
}
/* TRAG-12292 Orthovoip Message bubble color END  */

  .key-pad-box-new,
  .new-voice-mail {
    position: absolute !important;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--primary-bg);
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
.new-voice-mail{
    left: 20px;
    right: unset;
    background: var(--call-btn-bg);
    border: none;
}
  .dialpad-close-btn {
    position: absolute;
    top: 0px;
    right: 35%;
    transform: translateX(-50%);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 1000;
  }


  #sound_option_dropdown li span{
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--black-to-white-text);
    padding: 5px 10px;
    display: block;
    margin: 5px 10px;
}

#sound_option_dropdown .dropdown-menu {
    min-width: 12.5rem;
    z-index: 1001;
    border: none;
    outline: none;
    box-shadow: -10.52px 10.52px 18.41px 0px #00000012;
    border-radius: 8px;
    background: var(--bg-color);
}

#sound_option_dropdown .dropdown-menu li #device-controller{
    position: inherit;
}

#sound_option_dropdown .dropdown-menu li #device-controller button>.range-input-box {
    width: 180px !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: transparent !important;
}

#device-controller .asRange-selected{
    margin: 0% !important;
}

/* Device Controller Dropdown Styles */
.device-controller-dropdown {
    min-width: 250px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-color: var(--bg-color);
    z-index: 1010;
}

.device-controller-dropdown .speaker-btn,
.device-controller-dropdown .mic-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--card-bg);
    transition: all 0.2s ease;
    width: 100%;
    justify-content: flex-start;
}

/* .device-controller-dropdown .speaker-btn:hover,
.device-controller-dropdown .mic-btn:hover {
    background-color: var(--hover-bg);
    border-color: var(--primary-bg);
} */

.device-controller-dropdown .speaker-btn .icon,
.device-controller-dropdown .mic-btn .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
}

.device-controller-dropdown .range-input-box {
    position: relative;
    flex: 1;
    margin-left: 8px;
}

.device-controller-dropdown .custom-range-input,
.device-controller-dropdown .custom-range-input2 {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--input-bg);
    outline: none;
    border: none;
    -webkit-appearance: none;
    appearance: none;
}

.device-controller-dropdown .custom-range-input::-webkit-slider-thumb,
.device-controller-dropdown .custom-range-input2::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-bg);
    cursor: pointer;
    border: 2px solid var(--white-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.device-controller-dropdown .custom-range-input::-moz-range-thumb,
.device-controller-dropdown .custom-range-input2::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-bg);
    cursor: pointer;
    border: 2px solid var(--white-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.small-header-btn {
    background: var(--call-btn-bg);
    border-radius: 50%;
    width: 25px;
    height: 25px;
    cursor: pointer;
    text-align: center;
    line-height: 22px;
    border: none;
    display: block !important;
    margin-left: 10px;
    align-items: center !important;
    padding: 5px 3px;
}

[dir="rtl"] .small-header-btn{
    margin-left: unset;
    margin-right: 10px;
}

p#full-width-btn {
    display: flex !important;
}
.conference-call-accordion .accordion-item{
    outline: 1px solid var(--divider-border);
    border-radius: 8px;
}
.conference-call-accordion .accordion-button:not(.collapsed),
.conference-call-accordion .accordion-button {
    color: var(--black-to-white-text);
    background-color: var(--bg-color);
    box-shadow: none;
 
}
.conference-call-accordion .accordion-button{
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
    border-radius: 8px !important;
    padding: 5px 10px;
}
[dir="rtl"] .conference-call-accordion .accordion-button{
    text-align: right;
}
.conference-call-accordion .arrow-down{
    margin-left: 10px;
}
[dir="rtl"] .conference-call-accordion .arrow-down{
    margin-left: unset;
    margin-right: 10px;
}
.conference-call-accordion #callActivityUl{
    padding: 0px;
}

.main-dialpad .digit {
    width: 75px !important;
    height: 38px !important;
    font-size: 14px !important;
    line-height: 18px;
    margin: auto !important;
}

/* Smooth window resize transitions (Teams-like behavior) */
.main_container {
    transition: all 0.3s ease-in-out;
}

.main-body-content {
    transition: all 0.3s ease-in-out;
}

.left-side, .middle-content, .right-side {
    transition: all 0.3s ease-in-out;
}
div#conferenceCallAccordion .active-call-info{
    max-height: 90px;
}

/* Hide elements when CRM is enabled */
body.crm-enabled #full-width-btn,
body.crm-enabled #webCamOptionsDropdown {
    display: none !important;
}

/* Show full-width-btn when audio call is active */
body.audio-call-active #full-width-btn {
    display: flex !important;
}

/* Hide full-width-btn when video call is active */
body.video-call-active #full-width-btn {
    display: none !important;
}

/* Show webCamOptionsDropdown when video call is active */
body.video-call-active #webCamOptionsDropdown {
    display: block !important;
}

/* Hide webCamOptionsDropdown when audio call is active */
body.audio-call-active #webCamOptionsDropdown {
    display: none !important;
}

/* Show full-width-btn by default (when no calls are active) */
#full-width-btn {
    display: flex !important;
}

/* Hide full-width-btn when window is maximized (larger than 1024px) */
@media (min-width: 1025px) {
    p#full-width-btn {
        display: none !important;
    }
}

/* Hide webCamOptionsDropdown by default (when no video call is active) */
#webCamOptionsDropdown {
    display: none !important;
}

/* Show call label and sound dropdown only when calls are active */
body.audio-call-active #call-label-container,
body.video-call-active #call-label-container,
.call-label span {
    visibility: visible !important;
    font-size: 13px;
}

body.audio-call-active #sound_option_dropdown,
body.video-call-active #sound_option_dropdown {
    display: flex !important;
}

/* Hide network indicator and sound dropdown by default (when no calls are active) */
._networkIndicator {
    display: none !important;
}

#sound_option_dropdown {
    display: none !important;
}

/* Show network indicator only when calls are active */
body.audio-call-active ._networkIndicator,
body.video-call-active ._networkIndicator {
    display: block !important;
}
.header-small-dialer .network_indicator {
    position: unset;
    display: inline-flex;
    align-items: flex-start;
    color: var(--white-color);
    z-index: 1;
    line-height: 34px;
    margin: 4px 0;
}
.call-button-options button.active {
    background: var(--primary-bg);
    color: var(--white-color);
}
.accordion-button:focus {
    z-index: 3;
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}

/* TRAG-12538 - START */
.callerIcon{
    margin-right: 5px;
}
[dir="rtl"] .callerIcon{
    margin-right: 0;
    margin-left: 5px;
}
/* TRAG-12538 - END */

/* TRAG-12300 Meeting Container START */
#meetingListTab .form-select.new-select-input,
#meetingListTab .form-select.new-select-input:read-only {
    padding: 6px 12px 6px 35px;
    max-width: 150px;
    border-radius: 30px;
    cursor: pointer;
}
#previousDate, #nextDate {
    background-color: transparent;
    border-radius: 50%;
    display: flex;
    height: 26px;
    width: 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--input-border-color);
}
.meet-calender{
    position: absolute;
    top: 7px;
    left: 12px;
}
[dir="rtl"] .meet-calender{
    left: unset;
    right: 12px;
}
.attachment-option.tooltip .tooltiptext {
    top: -22px;
}
/* TRAG-12300 Meeting Container END */


/* MEDIA QUERY FOR SMALL RESOULTION (WHEN HEIGHT IS : 650px) */
@media only screen and (max-height: 650px) {
    .menu-content-menu-header h3 {
        font-size: 13px;
    }
    
    /* LOGIN PAGE CSS :: STARTS */
    .login-content .logo {
        margin-bottom: 50px;
    }

    .login-form .heading,
    .check-mail-content .heading {
        font-size: 20px;
    }

    .login-form .sub-heading,
    .check-mail-content .sub-heading {
        font-size: 11px;
    }

    .call_sip .call_sip_row span {
        font-size: 12px;
    }

    .input-group,
    .login-content .email-input {
        height: 40px;
    }

    .login-content .forget-password {
        font-size: 10px;
    }

    .login-content button,
    .check-mail-content button,
    .custom-file-input {
        height: 35px;
        font-size: 12px;
    }

    .login-right-section h3:first-child {
        font-size: 22px;
    }

    .login-right-section h3:nth-child(2) {
        font-size: 25px;
    }

    .check-mail .version,
    .qr-content .version {
        font-size: 15px;
    }

    .check-mail .vectors img,
    .right-vector img {
        width: 85%;
        display: block;
        margin: auto;
    }

    .login-fields .dropdown__option span {
        font-size: 12px;
    }

    .otp-verification .otp-box input {
        height: 40px;
        font-size: 24px;
    }

    .otp-verification .time {
        font-size: 12px;
    }

    .otp-verification .resend-otp {
        font-size: 11px;
    }

    .login-left-section .qr-box {
        height: 300px;
        width: 312px;
        margin: unset;
        margin-bottom: 20px;
        border: 3px solid var(--blue-color);
    }

    .invalidBtn {
        height: 24px;
        font-size: 10px;
        margin-bottom: 10px;
    }

    .SuccessfulBtn {
        height: 24px;
        margin-bottom: 10px;
    }

    .SuccessfulBtn-text {
        font-size: 10px;
    }

    .sip-configuration-container {
        padding: 25px 50px;
    }

    .sip-configuration-container .input-group {
        height: 38px;
    }

    .sip-configuration-content .login-left-section .toggle-box {
        margin: 10px auto;
    }

    .sip-configuration-content .gradient-btn {
        font-size: 12px;
        height: 35px;
    }

    .sip-configuration-content .login-left-section .toggle-box span:first-child,
    .sip-configuration-content .login-left-section .radio-box span:first-child {
        font-size: 12px;
    }

    .sip-configuration-content .login-left-section .switch {
        height: 20px;
    }

    .sip-configuration-content .login-left-section .slider:before {
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 2px;
    }

    .sip-configuration-content .login-left-section input:checked+.slider:before {
        -webkit-transform: translateX(19px);
        -ms-transform: translateX(19px);
        transform: translateX(19px);
    }

    .login-content .login-left-section .radio-box [type="radio"]:checked+label:before,
    .login-content .login-left-section .radio-box [type="radio"]:not(:checked)+label:before,
    .sip-configuration-content .login-left-section .radio-box [type="radio"]:checked+label:before,
    .sip-configuration-content .login-left-section .radio-box [type="radio"]:not(:checked)+label:before {
        width: 20px;
        height: 20px;
        border: 2px solid var(--label-color);
    }

    .login-content .login-left-section .radio-box [type="radio"]:checked+label:after,
    .login-content .login-left-section .radio-box [type="radio"]:not(:checked)+label:after,
    .sip-configuration-content .login-left-section .radio-box [type="radio"]:checked+label:after,
    .sip-configuration-content .login-left-section .radio-box [type="radio"]:not(:checked)+label:after {
        width: 12px;
        height: 12px;
        top: 2px;
        left: 4px;
    }

    body:has(.sip-configuration-container) {
        overflow: unset !important;
        overflow-x: hidden !important;
        overflow-y: overlay !important;
    }

    /* LOGIN PAGE CSS :: ENDS */

    /* reseller login page css :: starts */

     .logout-modal-popup#reseller .modal-footer button {
        height: 35px;
        min-width: 100px;
        font-size: 11px;
        width: 166px;
    }
    
    .snippet-item {
        font-size: 12px;
    }

    /* reseller login page css :: ends */

    /* HEADER CSS :: STARTS */
    .profile-dropdown .profile-pic,
    .profile-dropdown .profile-pic img[alt="Profile"] {
        width: 40px;
        height: 40px;
    }

    .toggle label:before {
        content: "";
        width: 35px;
        height: 18px;
    }

    .header-right-items p {
        font-size: 10px;
    }

    .toggle label:after {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        left: 3px;
    }

    .toggle input[type=checkbox]:checked+label:after {
        left: 18px;
    }


    .profile-dropdown .user-name p {
        font-size: 13px;
    }

    .profile-dropdown .user-name span._extName {
        font-size: 12px;
        font-weight: 500;
    }

    .profile-dropdown .dropdown-menu li img {
        height: 12px;
        width: 12px;
    }

    .profile-dropdown .dropdown-menu li p,
    #netsapinesMobileNumber {
        font-size: 11px;
    }

    .searchbar {
        height: 28px;
    }

    /* HEADER CSS :: ENDS */

    /* MODAL CSS :: STARTS */
    /* ENTER PASSWORD MODAL :: STARTS */
    .enter-password-modal .modal-header h5 {
        font-size: 20px;
    }

    .enter-password-modal .modal-body button {
        height: 35px;
        font-size: 12px;
    }

    /* ENTER PASSWORD MODAL :: ENDS */

    /* LOGOUT MODAL :: STARTS */
    .logout-modal-popup .modal-header {
        height: 45px;
    }

    .logout-modal-popup .modal-header h5 {
        font-size: 16px;
    }

    .logout-modal-popup .modal-body p {
        font-size: 14px;
    }

    .logout-modal-popup .modal-footer button {
        height: 35px;
        min-width: 100px;
        font-size: 12px;
    }

    /* LOGOUT MODAL :: ENDS */

    /* MODAL CSS :: ENDS */

    /* LEFT SIDE MENU CSS :: STARTS */
    .left-side-menu.nav-pills .nav-link {
        min-height: 53px;
        /* TRAG-5944
        max-height: 53px; */
        margin-bottom: 3px;
    }

    .left-side-menu.nav-pills .nav-link svg,
    .left-side-menu.nav-pills .nav-link img {
        height: 19px;
    }

    .left-side-menu.nav-pills .nav-link span {
        font-size: 10px;
        line-height: 12px;
    }

    .left-side-menu .counter {
        font-size: 9px;
        right: 15px;
        top: 0px;
        min-width: 19px;
        height: 19px;
        line-height: 19px;
        width: 19px;
    }

    /* LEFT SIDE MENU CSS :: ENDS */

    /* MIDDLE CONTENT CSS :: STARTS */
    .missed-call-counter,
    .voice-mail-btn .counter {
        line-height: 19px;
        font-size: 9px;
        height: 19px;
        width: 19px;
        min-width: 19px;
        top: -8px;
        right: -8px;
    }

    .voice-mail-btn .counter {
        top: -6px;
        right: -6px;
    }

    .time-date .chat-counter {
        font-size: 9px;
        height: 19px;
        width: 19px;
    }

    .call-suggestion-dropdown .dropdown-menu ul center,
    .call-suggestion-dropdown .dropdown-menu ul center p {
        font-size: 15px !important;
        margin-bottom: 0px;
        margin-top: 0px !important;
    }

    .caller-id .dropdown-menu p {
        font-size: 10px;
    }

    .caller-id span ,
    #contactTypeDropdown span{
        font-size: 12px;
    }

    .caller-id .dropdown-menu .checkbox {
        height: 14px;
        width: 14px;
    }

    .caller-id .dropdown-menu .checkbox label:after {
        width: 7px;
        height: 4px;
        top: 3px;
        right: 3px;
    }

    .menu-content .menu-header h3 a,
    .menu-header h3 {
        font-size: 13px;
    }

    .contact-list-item li a {
        font-size: 12px;
    }

    /* DAILPAD CSS */
    .call-suggestion-dropdown {
        margin-top: 5px;
    }

    .main-dialpad .keypad {
        margin-top: 16px;
    }

    .main-dialpad span.clear_number,
    .main-dialpad span.mobile_option {
        height: 12px;
        width: 20px;
    }

    .main-dialpad .entered-number input[type="text"] {
        font-size: 15px;
        width: 75%;
    }

    .main-dialpad .entered-number input[type="text"]::placeholder {
        font-size: 13px;
    }

    .main-dialpad .digit {
        width: 75px;
        height: 38px;
        font-size: 14px;
        line-height: 18px;
        margin: auto;
    }

    .main-dialpad .call-buttons {
        min-height: 38px;
    }

    .main-dialpad .call-buttons button {
        width: 50px;
        height: 38px;
    }

    /* DAILPAD CSS */

    .all-contact-list .all-contact-list-item {
        height: 45px;
    }

    .all-contact-list .contact-detail .icon {
        width: 38px;
        height: 38px;
    }

    .all-contact-list .contact-detail .name p {
        font-size: 12px;
    }

    .all-contact-list .contact-detail .name span {
        font-size: 10px;
    }

    .contact-list-item.nav-pills .nav-link {
        margin-bottom: 12px;
    }

    .main-dialpad {
        padding-bottom: 10px;
    }

    .active-call-info .person-name {
        font-size: 12px;
    }

    .active-call-info .call-duration,
    .active-call-info .call-status {
        font-size: 10px;
    }

    .call-action-buttons button {
        width: 28px;
        height: 28px;
    }

    /* MIDDLE CONTENT CSS :: ENDS */

    /* RIGHT SIDE CONTENT COMMON CSS :: STARTS */
    .right-side .header h3 {
        font-size: 15px;
    }

    .type-of-call .nav-tabs .nav-link {
        font-size: 11px;
    }

    .type-of-call .nav-tabs {
        gap: 10px;
    }

    .sub-header h4 {
        font-size: 12px;
    }

    /* RIGHT SIDE CONTENT COMMON CSS :: ENDS */

    /* DASHBOARD FAVOURITE CONTACT CSS :: STARTS */
    .fav-contact-item {
        margin-top: 5px;
    }

    .favorite-contacts .fav-contact-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .favorite-contacts .fav-contact-icon .fav-mark {
        right: -4px;
    }

    /* DASHBAORD FAVOURITE CONTACT CSS :: ENDS */

    /* DASHBOARD CALL HISTORY CSS :: STARTS */
    .recent-calls {
        height: 350px;
    }

    .all-call-item {
        height: 50px;
    }

    .all-call-item .icon,
    .conference-call .icon .second-person {
        width: 38px;
        height: 38px;
    }

    .all-call-item .caller-name p {
        font-size: 12px;
    }

    .all-call-item .caller-name .number,
    .all-call-type-time .call-type p,
    .all-call-type-time .call-duration p,
    .all-call-type-time .call-duration span {
        font-size: 10px;
    }

    /* DASHBOARD CALL HISTORY CSS :: ENDS */

    /* CHAT CSS :: STARTS */
    .chat-suggestion ul {
        max-height: 170px;
    }

    .attachment-preview .carousel-item .xdContainer {
        height: 300px;
    }

    /* CHAT CSS :: ENDS */

    /* CONTACT DETAIL CSS :: STARTS */
    .open-contact-detail .contact-name .icon {
        width: 60px;
        height: 60px;
        font-size: 25px;
    }

    .open-contact-detail .contact-name p {
        font-size: 18px;
    }

    .contact-detail-item p {
        font-size: 13px;
    }

    .other-contact-details .calling-options div {
        width: 28px;
        height: 28px;
    }

    /* CONTACT DETAIL CSS :: ENDS */

    /* CLEAR HISTORY DROPDOWN CSS :: STARTS */
    .clear-history-dropdown .dropdown-menu li svg {
        width: 13px;
    }

    .clear-history-dropdown .dropdown-menu li span {
        font-size: 12px;
    }

    .details .icon {
        width: 38px;
        height: 38px;
    }

    /* CLEAR HISTORY DROPDOWN CSS :: ENDS */

    /* SETTING CSS :: STARTS */
    .setting-list-item.nav-pills .nav-link {
        margin-bottom: 10px;
        margin-bottom: 10px;
        height: 30px;
        font-size: 12px;
    }

    .setting-list-item.nav-pills .nav-link img {
        width: 15px;
        height: auto;
    }

    .setting-options .application-option li p,
    .language-option li p {
        font-size: 12px;
    }

    .setting-options .language-option .checkbox {
        height: 14px;
        width: 14px;
    }

    .setting-container .language-option .checkbox label:after {
        width: 6px;
        height: 3px;
        top: 4px;
        right: 3px;
        opacity: 1;
    }

    .debugging-content p {
        font-size: 11px;
    }

    .debugging-content button {
        height: 32px;
        font-size: 12px;
    }

    .websocket-test h3 {
        font-size: 14px;
    }

    .connection-detail p {
        font-size: 13px;
    }

    /* SETTING CSS :: ENDS */

    /* CALLING SCREEN CSS :: STARTS */
    #activeCallInfo .accordion-body {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .call-connecting-header p,
    .active-call-header p {
        font-size: 18px;
    }

    .call-connecting-detail .call-connecting-caller-img,
    .active-call-detail .active-caller-img {
        width: 110px;
        height: 110px;
    }

    .call-connecting-detail .call-connecting-caller-number {
        font-size: 16px;
    }

    .active-call-detail .active-call-duration {
        font-size: 12px;
    }

    .call-connecting-detail .call-connecting-status {
        font-size: 13px;
    }

    .call-connecting-actions,
    .active-call-actions {
        bottom: 60px;
    }

    .call-connecting-actions button,
    .active-call-actions button {
        width: 55px;
        height: 55px;
    }

    .call-suggestion-dropdown .dropdown-menu {
        max-height: 170px;
    }

    .call-suggestion-dropdown .dropdown-menu ul {
        max-height: 145px;
    }

    .call-suggestion-dropdown .caller-info .caller-icon {
        height: 30px;
        width: 30px;
    }

    .call-suggestion-dropdown .caller-name {
        font-size: 12px;
    }

    .call-suggestion-dropdown .caller-name span {
        font-size: 10px;
    }

    .dtmf-dropdown .keypad .digit {
        width: 65px;
        height: 42px;
        font-size: 17px;
    }

    .dialpad-header .input-number input[type="text"] {
        font-size: 18px;
    }

    /* CALLING SCREEN CSS :: ENDS */

    /* VIDEO CALL SCREEN CSS :: STARTS */
    .active-video-call-screen .active-call-header {
        padding: 16px 25px 16px 25px;
    }

    .active-video-call-actions button {
        height: 55px;
        width: 55px;
    }

    .active-video-call-actions .call-duration {
        font-size: 12px;
    }

    /* VIDEO CALL SCREEN CSS :: ENDS */

    /* MESSAGE SCREEN CSS :: STARTS */

    .forward-msg-modal .selected-list-item {
        max-height: 51px;
    }

    .start-chat .chat-search-bar,
    .forward-msg-modal .modal-searchbar {
        height: 35px;
    }

    .forward-msg-modal .modal-footer button {
        height: 32px;
    }

    .start-chat .search-arrow {
        height: 28px;
        width: 28px;
    }

    .info .img,
    .forward-msg-modal .list-detail .img {
        width: 38px;
        height: 38px;
    }

    .info p,
    .forward-msg-modal .list-detail .name p,
    .forward-msg-modal .list-detail .name span {
        font-size: 13px;
        /* TRAG-6469 */
    }

    .info span,
    .time-date .time {
        font-size: 10px;
    }

    .forward-msg-modal .modal-header {
        height: 45px;
    }

    .forward-msg-modal .list ul {
        height: 240px;
    }

    .message-footer .delete-attachment {
        width: 15px;
        height: 15px;
        right: -5px;
        top: -5px;
    }

    .message-footer .delete-attachment img {
        width: 9px;
        height: 9px;
    }

    .audioplayer-playpause {
        width: 18px;
        height: 18px;
    }

    .forward-msg-modal .modal-searchbar .search-icon {
        width: 29px;
        height: 29px;
    }

    /* MESSAGE SCREEN CSS :: ENDS */

    .sync-details .divider.my-3 {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    /* HEADER CSS :: STARTS */
    .profile-dropdown .profile-pic,
    .profile-dropdown .profile-pic img[alt="Profile"] {
        width: 40px;
        height: 40px;
    }

    .toggle label:before {
        content: "";
        width: 35px;
        height: 18px;
    }

    .header-right-items p {
        font-size: 10px;
    }

    .toggle label:after {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        left: 3px;
    }

    .toggle input[type=checkbox]:checked+label:after {
        left: 18px;
    }


    .profile-dropdown .user-name p {
        font-size: 13px;
    }

    .profile-dropdown .user-name span._extName {
        font-size: 12px;
        font-weight: 500;
    }

    .profile-dropdown .user-name span {
        font-size: 9px;
    }

    .profile-dropdown .dropdown-menu li img {
        height: 12px;
        width: 12px;
    }

    .profile-dropdown .dropdown-menu li p {
        font-size: 11px;
    }

    .searchbar {
        height: 28px;
    }

    /* HEADER CSS :: ENDS */

    /* MODAL CSS :: STARTS */
    /* ENTER PASSWORD MODAL :: STARTS */
    .enter-password-modal .modal-header h5 {
        font-size: 20px;
    }

    .enter-password-modal .modal-body button {
        height: 35px;
        font-size: 12px;
    }

    /* ENTER PASSWORD MODAL :: ENDS */

    /* LOGOUT MODAL :: STARTS */
    .logout-modal-popup .modal-header {
        height: 45px;
    }

    .logout-modal-popup .modal-header h5 {
        font-size: 16px;
    }

    .logout-modal-popup .modal-body p {
        font-size: 14px;
    }

    .logout-modal-popup .modal-footer button {
        height: 35px;
        min-width: 100px;
        font-size: 12px;
    }

    /* LOGOUT MODAL :: ENDS */

    /* MODAL CSS :: ENDS */

    /* LEFT SIDE MENU CSS :: STARTS */
    .left-side-menu.nav-pills .nav-link {
        min-height: 53px;
        /* TRAG-5944
        max-height: 53px; */
        margin-bottom: 3px;
    }

    .left-side-menu.nav-pills .nav-link svg,
    .left-side-menu.nav-pills .nav-link img {
        height: 19px;
    }

    .left-side-menu.nav-pills .nav-link span {
        font-size: 10px;
        line-height: 12px;
    }

    .left-side-menu .counter {
        font-size: 9px;
        right: 15px;
        top: 0px;
        min-width: 19px;
        height: 19px;
        line-height: 19px;
        width: 19px;
    }

    /* LEFT SIDE MENU CSS :: ENDS */

    /* MIDDLE CONTENT CSS :: STARTS */
    .missed-call-counter,
    .voice-mail-btn .counter {
        line-height: 19px;
        font-size: 9px;
        height: 19px;
        width: 19px;
        min-width: 19px;
        top: -8px;
        right: -8px;
    }

    .voice-mail-btn .counter {
        top: -6px;
        right: -6px;
    }

    .time-date .chat-counter {
        font-size: 9px;
        height: 19px;
        width: 19px;
    }

    .call-suggestion-dropdown .dropdown-menu ul center,
    .call-suggestion-dropdown .dropdown-menu ul center p {
        font-size: 15px !important;
        margin-bottom: 0px;
        margin-top: 0px !important;
    }

    .caller-id .dropdown-menu p {
        font-size: 10px;
    }

    .caller-id span {
        font-size: 12px;
    }

    .caller-id .dropdown-menu .checkbox {
        height: 14px;
        width: 14px;
    }

    .caller-id .dropdown-menu .checkbox label:after {
        width: 7px;
        height: 4px;
        top: 3px;
        right: 3px;
    }

    .menu-content .menu-header h3 a,
    .menu-header h3 {
        font-size: 13px;
    }

    .contact-list-item li a {
        font-size: 12px;
    }

    /* DAILPAD CSS */
    .call-suggestion-dropdown {
        margin-top: 5px;
    }

    .main-dialpad .keypad {
        margin-top: 16px;
    }

    .main-dialpad span.clear_number,
    .main-dialpad span.mobile_option {
        height: 12px;
        width: 20px;
    }

    .main-dialpad .entered-number input[type="text"] {
        font-size: 15px;
        width: 75%;
    }

    .main-dialpad .entered-number input[type="text"]::placeholder {
        font-size: 13px;
    }

 

    .main-dialpad .call-buttons {
        min-height: 38px;
    }

    .main-dialpad .call-buttons button {
        width: 50px;
        height: 38px;
    }

    /* DAILPAD CSS */

    .all-contact-list .all-contact-list-item {
        height: 45px;
    }

    .all-contact-list .contact-detail .icon {
        width: 38px;
        height: 38px;
    }

    .all-contact-list .contact-detail .name p {
        font-size: 12px;
    }

    .all-contact-list .contact-detail .name span {
        font-size: 10px;
    }

    .contact-list-item.nav-pills .nav-link {
        margin-bottom: 12px;
    }

    .main-dialpad {
        padding-bottom: 10px;
    }

    .active-call-info .person-name {
        font-size: 12px;
    }

    .active-call-info .call-duration,
    .active-call-info .call-status {
        font-size: 10px;
    }

    .call-action-buttons button {
        width: 28px;
        height: 28px;
    }

    /* MIDDLE CONTENT CSS :: ENDS */

    /* RIGHT SIDE CONTENT COMMON CSS :: STARTS */
    .right-side .header h3 {
        font-size: 15px;
    }

    .type-of-call .nav-tabs .nav-link {
        font-size: 11px;
    }

    .type-of-call .nav-tabs {
        gap: 10px;
    }

    .sub-header h4 {
        font-size: 12px;
    }

    /* RIGHT SIDE CONTENT COMMON CSS :: ENDS */

    /* DASHBOARD FAVOURITE CONTACT CSS :: STARTS */
    .fav-contact-item {
        margin-top: 5px;
    }

    .favorite-contacts .fav-contact-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .favorite-contacts .fav-contact-icon .fav-mark {
        right: -4px;
    }

    /* DASHBAORD FAVOURITE CONTACT CSS :: ENDS */

    /* DASHBOARD CALL HISTORY CSS :: STARTS */
    .recent-calls {
        height: 350px;
    }

    .all-call-item {
        height: 50px;
    }

    .all-call-item .icon,
    .conference-call .icon .second-person {
        width: 38px;
        height: 38px;
    }

    .all-call-item .caller-name p {
        font-size: 12px;
    }

    .all-call-item .caller-name .number,
    .all-call-type-time .call-type p,
    .all-call-type-time .call-duration p,
    .all-call-type-time .call-duration span {
        font-size: 10px;
    }

    /* DASHBOARD CALL HISTORY CSS :: ENDS */

    /* CHAT CSS :: STARTS */
    .chat-suggestion ul {
        max-height: 170px;
    }

    .attachment-preview .carousel-item .xdContainer {
        height: 300px;
    }

    /* CHAT CSS :: ENDS */

    /* CONTACT DETAIL CSS :: STARTS */
    .open-contact-detail .contact-name .icon {
        width: 60px;
        height: 60px;
        font-size: 25px;
    }

    .open-contact-detail .contact-name p {
        font-size: 18px;
    }

    .contact-detail-item p {
        font-size: 13px;
    }

    .other-contact-details .calling-options div {
        width: 28px;
        height: 28px;
    }

    /* CONTACT DETAIL CSS :: ENDS */

    /* CLEAR HISTORY DROPDOWN CSS :: STARTS */
    .clear-history-dropdown .dropdown-menu li svg {
        width: 13px;
    }

    .clear-history-dropdown .dropdown-menu li span {
        font-size: 12px;
    }

    .details .icon {
        width: 38px;
        height: 38px;
    }

    /* CLEAR HISTORY DROPDOWN CSS :: ENDS */

    /* SETTING CSS :: STARTS */
    .setting-list-item.nav-pills .nav-link {
        margin-bottom: 10px;
        margin-bottom: 10px;
        height: 30px;
        font-size: 12px;
    }

    .setting-list-item.nav-pills .nav-link img {
        width: 15px;
        height: auto;
    }

    .setting-options .application-option li p,
    .language-option li p {
        font-size: 12px;
    }

    .setting-options .language-option .checkbox {
        height: 14px;
        width: 14px;
    }

    .setting-container .language-option .checkbox label:after {
        width: 6px;
        height: 3px;
        top: 4px;
        right: 3px;
        opacity: 1;
    }

    .debugging-content p {
        font-size: 11px;
    }

    .debugging-content button {
        height: 32px;
        font-size: 12px;
    }

    .websocket-test h3 {
        font-size: 14px;
    }

    .connection-detail p {
        font-size: 13px;
    }

    /* SETTING CSS :: ENDS */

    /* CALLING SCREEN CSS :: STARTS */
    #activeCallInfo .accordion-body {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .call-connecting-header p,
    .active-call-header p {
        font-size: 18px;
    }

    .call-connecting-detail .call-connecting-caller-img,
    .active-call-detail .active-caller-img {
        width: 110px;
        height: 110px;
    }

    .call-connecting-detail .call-connecting-caller-number {
        font-size: 16px;
    }

    .active-call-detail .active-call-duration {
        font-size: 12px;
    }

    .call-connecting-detail .call-connecting-status {
        font-size: 13px;
    }

    .call-connecting-actions,
    .active-call-actions {
        bottom: 60px;
    }

    .call-connecting-actions button,
    .active-call-actions button {
        width: 55px;
        height: 55px;
    }

    .call-suggestion-dropdown .dropdown-menu {
        max-height: 170px;
    }

    .call-suggestion-dropdown .dropdown-menu ul {
        max-height: 145px;
    }

    .call-suggestion-dropdown .caller-info .caller-icon {
        height: 30px;
        width: 30px;
    }

    .call-suggestion-dropdown .caller-name {
        font-size: 12px;
    }

    .call-suggestion-dropdown .caller-name span {
        font-size: 10px;
    }

    .dtmf-dropdown .keypad .digit {
        width: 65px;
        height: 42px;
        font-size: 17px;
    }

    .dialpad-header .input-number input[type="text"] {
        font-size: 18px;
    }

    /* CALLING SCREEN CSS :: ENDS */

    /* VIDEO CALL SCREEN CSS :: STARTS */
    .active-video-call-screen .active-call-header {
        padding: 16px 25px 16px 25px;
    }

    .active-video-call-actions button {
        height: 55px;
        width: 55px;
    }

    .active-video-call-actions .call-duration {
        font-size: 12px;
    }

    /* VIDEO CALL SCREEN CSS :: ENDS */

    /* MESSAGE SCREEN CSS :: STARTS */

    .forward-msg-modal .selected-list-item {
        max-height: 51px;
    }

    .start-chat .chat-search-bar,
    .forward-msg-modal .modal-searchbar {
        height: 35px;
    }

    .forward-msg-modal .modal-footer button {
        height: 32px;
    }

    .start-chat .search-arrow {
        height: 28px;
        width: 28px;
    }

    .info .img,
    .forward-msg-modal .list-detail .img {
        width: 38px;
        height: 38px;
    }

    .info p,
    .forward-msg-modal .list-detail .name p,
    .forward-msg-modal .list-detail .name span {
        font-size: 13px;
        /* TRAG-6469 */
    }

    .info span,
    .time-date .time {
        font-size: 10px;
    }

    .forward-msg-modal .modal-header {
        height: 45px;
    }

    .forward-msg-modal .list ul {
        height: 240px;
    }

    .message-footer .delete-attachment {
        width: 15px;
        height: 15px;
        right: -5px;
        top: -5px;
    }

    .message-footer .delete-attachment img {
        width: 9px;
        height: 9px;
    }

    .audioplayer-playpause {
        width: 18px;
        height: 18px;
    }

    .forward-msg-modal .modal-searchbar .search-icon {
        width: 29px;
        height: 29px;
    }

    /* MESSAGE SCREEN CSS :: ENDS */

    .sync-details .divider.my-3 {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
}
  /* /temp css/new/ */

  .incoming-call-popup .incoming-call-icon, .incoming-call-with-call-popup .incoming-call-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-bottom: 10px;
}
.incoming-call-popup .incoming-call-options, .incoming-call-with-call-popup .incoming-call-options {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.incoming-call-popup, .incoming-call-with-call-popup {
    margin: 0;
    padding: 10px 0;
}

/* Regular calls - keep original positioning */
.incoming-call-options:not(.has-crm ~ .incoming-call-options) {
    margin-top: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

/* CRM calls only - absolute positioning */
.incoming-call-notification .incoming-caller-name.has-crm ~ .incoming-call-options,
.incoming-call-notification:has(.incoming-caller-name.has-crm) .incoming-call-options {
    position: absolute !important;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 426px;
    z-index: 9;
}

/* CRM notification - text above buttons */
.incoming-call-notification:has(.incoming-caller-name.has-crm) .incoming-caller-name span {
    position: absolute !important;
    bottom: 70px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    width: 100% !important;
    z-index: 10 !important;
}

/* new typing-indicator */


.header-icon-btn.device-unavailable {
    cursor: not-allowed;
}

.header-icon-btn.device-available {
    cursor: pointer;
}
.device-status-indicator-new {
    order: 1;
    margin-left: 20px;
}
[dir="rtl"] .device-status-indicator-new {
    margin-left: 0px;
    margin-right: 20px;
}
.device-status-indicator {
    position: absolute;
    top: -8px;
    right: 4px;
    display: inline-block;
}

.header-icon-btn {
    position: relative;
    padding: 0 6px !important;
}

.sidebarmenu .nav-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 85px;
    padding: 0px 8px;
    text-align: center;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/*TRAG-13031*/
.mic-icon,.speaker-icon,.camera-icon{
    display: none;
}
/* new typing-indicator end */

/* recording display start */
.recording-display {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 10px 0;
    position: relative;
    z-index: 1;
}

.recording-capsule, 
.recording-capsule-pushed {
    gap: 8px;
    padding: 8px 20px;
    background: var(--recording-red-color);
    border-radius: 50px;
    min-width: 180px;    
}
.recording-capsule-pushed{
    background: var(--recording-orange-color);
}
.recording-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--chat-counter);
    flex-shrink: 0;
}

.recording-time {
    color: var(--chat-counter);
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
}
.recording-capsule-pushed .recording-time{
    color: var(--recording-orange-color-text);
}
.recording-capsule-pushed .pushed-txt{
    color: var(--recording-orange-color-text);
    font-size: 12px;
    font-weight: 500;
}
.recording-pause-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}


.recording-pause-btn svg {
    display: block;
}

/* call history recording start */
#call-history-recording .full-audio {
    height: 4px;
    border-radius: 10px;
}
#call-history-recording .playv-recording{
    height: 12px;
    width: 12px;
    top: -4px;
}
.recording-title{
    font-size: 14px;
    font-weight: 500;
    color: var(--black-to-white-text);
}
.recordin-time, #call-history-recording span{
    font-size: 10px;
}

.download-icon-new{
    min-height: 20px !important;
    max-height: 20px !important;
    max-width: 20px !important;
    min-width: 20px !important;
    line-height: 20px !important;
    text-align: center !important;
}

#full-width-btn .tooltiptext{
    right: 0;
}
[dir="rtl"] .tooltiptext{
    right: unset;
    left: 0%;
}

.profile-dropdown .dropdown-menu .compact-mode-user-info {
    display: none !important;
}

.new-dtmf-btn{
    position: absolute;
    bottom: 14px;
    right: 22px;
    margin: 0 auto;
    z-index: 9;
}
.new-dtmf-btn button {
    width: 75px !important;
    height: 38px !important;
    border-radius: 25px;
    background-color: var(--gray-color-lighter) !important;
    border-color: var(--gray-color-lighter) !important;
    color: var(--white-color) !important;
    opacity: 1 !important;
    transition: 0.2s ease;
}

/* ACTIVE (after click) */
.new-dtmf-btn button.dtmf-on {
    background-color: var(--call-activity-green) !important;
    border-color: var(--call-activity-green) !important;
}

/* DEFAULT (off) */
.new-dtmf-btn button.dtmf-off {
    background-color: var(--gray-color-lighter) !important;
    border-color: var(--gray-color-lighter) !important;
}

/*call history recording end */

@media (max-width: 408px) {
    .profile-dropdown .user-name > p.ext_number_box > span._extName,
    .profile-dropdown .dropdown-menu .compact-mode-user-info  {
        display: none !important;
    }
    .profile-dropdown .dropdown-menu .compact-mode-user-info {
        display: flex !important;
    }
    .profile-dropdown .profile-pic .green-dot {
        height: 10px;
        width: 10px;
    }
    .profile-dropdown .profile-pic .green-dot img{
        max-width: 12px;
    }
    .profile-dropdown {
        border-radius: 5px;
        padding-left: 0;
    }
    .profile-dropdown .profile-pic,
    .profile-dropdown .profile-pic img[alt="Profile"]{
        width: 25px;
        height: 25px;
        margin: 0px 5px 8px 4px;
    }
    .profile-dropdown .user-name span {
        position: absolute;
        bottom: 0;
        font-size: 7.8px;
        right: 2px;
        max-width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
        line-height: 1.2;
    }
    .update-photo-modal .modal-header h5{
        font-size: 16px;
    }
    .left-side-menu.nav {
        width: 50px !important;
    }
    .left-side-menu.nav-pills .nav-link span {
        display: none !important;
    }
    .headset-dropdown ul li p {
        font-size: 12px;
        line-height: 12px;
    }
    #netsapiensLogin,   
    #netsapiensDeviceId{
    word-break: break-all;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;
}
}
/* ============================================================
   END - COMPACT MODE _extName/_extNum styles
   ============================================================ */

/* compact mode call recording start */
.recording-dot {
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
    margin-left: 8px;
    animation: blink 1s infinite;
}

.login-content button {
    width: 100%;
    height: 40px;
    border-radius: var(--radius-4);
    margin-bottom: 15px;
    border: none;
    outline: none;
    /* background-color: var(--primary-bg); */
    background-color: var(--new-login-btn-bg-color);
    color: var(--white-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: 0em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 312px;
}
/* compact mode call recording end */