/*!
 * fakedetail Whatsapp Prank generator (https://fakedetail.com/fake-whatsapp-chat-generator)
 */


:root {
    --bg-light: url(../../images/Whatsapp_bg_light.jpg?1.2);
    --bg-dark: url(../../images/Whatsapp_bg_dark.jpg?1.2);
    --bg-ios-light: url(../../images/whatsapp/Whatsapp_ios_bg_light.jpg?1.1);
    --bg-ios-dark: url(../../images/whatsapp/Whatsapp_ios_bg_dark.jpg?1.1);
    --ios-footr-light: url(../../images/whatsapp-chat-iphone-footer-img.jpg);
    --ios-footr-dark: url(../../images/whatsapp-chat-iphone-footer-img-dark.png);
    --light-color: #e9edef;
    --dark-color: #000000;
    --dark-bg-color: #202c33;
    --light-bg-color: #ffffff;
    --light-green-color: #e6ffda;
    --dark-green-color: #005c4b;
    --green-color: #128C7E;
    --gary-color: #667781;
    --gary-dark-color: #2a3942;
    --icon-dark-color: #54656f;
    --icon-light-color: #aebac1;
    --ios-color-dark: #171717;
    --ios-color-light: #f7f7f7;
    --ios-msg-color-dark: #383838;
    --link-color: #1b8feb;
    --ios-link-color: #10ad50;



}

.wa-theme {
    --bg-img: var(--bg-light);
    --msg-text-color: var(--dark-color);
    --msg-s-bg-color: var(--light-green-color);
    --msg-r-bg-color: var(--light-bg-color);
    --arrow-r-color: var(--light-green-color);
    --arrow-s-color: var(--light-bg-color);
    --msg-time-color: rgba(0, 0, 0, .45);
    --android-header-color: var(--green-color);
    --gray-black: var(--gary-color);
    --input-bar: var(--light-bg-color);
    --icon-color: var(--icon-dark-color);
    --msg-box-color: #f0f2f5;
    --display-l: block;
    --display-d: none;
    --op-l: 1;
    --op-d: 0;
    --ios-bg: var(--ios-color-light);
    --ios-bg-footr: var(--ios-footr-light);
    --ios-msg-broder: #e3e3e3;
    --ios-footer-bg: #fff;
    --ios-msgbg-footr: var(--light-bg-color);
    --ios-battery: rgba(0, 0, 0, 0.3);
    --chat-timer-img: url(../../images/whatsapp/wh-chat-timer.png);
    --chat-timer-img-ios: url(../../images/whatsapp/ios-chat-timer.png);
    --ios-msg-bg: #fff;
    --link-color: #1b8feb;
    --ios-link-color: #21bf62;
    --white: #fff;
    --green: #06aa6c;
    --gray: #efefef;
    --light-green: #d2fed5;
    --ai-bg: #f6f5f3;
    --dark-green: #00aa66;
    --android-gray: #5e6569;
    --ios-gray: #6a6c6c;
    --light-gray: #cacaca;
    --grey: #f6f5f4;
    --ios-bg: #f6f6f6;
    --border-gray: #e0e0e0;
    --pause-icon: #6d747c;
    --audio-wave-bg: #d0d2d3;
    --fill-waves-bg: #6d747c;
    --watermark-color: rgba(0, 0, 0, 0.02);
}

.wa-theme.dark-theme {
    --bg-img: var(--bg-dark);
    --msg-text-color: var(--light-color);
    --msg-s-bg-color: var(--dark-green-color);
    --msg-r-bg-color: var(--dark-bg-color);
    --msg-box-color: var(--dark-bg-color);
    --arrow-r-color: var(--dark-green-color);
    --arrow-s-color: var(--dark-bg-color);
    --msg-time-color: var(--light-color);
    --android-header-color: var(--dark-bg-color);
    --gray-black: var(--icon-light-color);
    --input-bar: var(--gary-dark-color);
    --icon-color: var(--icon-light-color);
    --display-l: none;
    --display-d: block;
    --op-l: 0;
    --op-d: 1;
    --ios-bg: var(--ios-color-dark);
    --ios-bg-footr: var(--ios-footr-dark);
    --dark-color: #fff;
    --ios-msg-broder: var(--ios-msg-color-dark);
    --ios-msgbg-footr: var(--ios-msg-color-dark);
    --ios-battery: rgba(255, 255, 255, 0.5);
    --chat-timer-img: url(../../images/whatsapp/wh-chat-timer-dark.png);
    --chat-timer-img-ios: url(../../images/whatsapp/ios-chat-timer-dark.png);
    --ios-msg-bg: rgba(35, 35, 35, 0.8);
    --white: #000;
    --green: #fff;
    --gray: #000;
    --light-green: #033628;
    --ai-bg: #21282e;
    --dark-green: #00c169;
    --android-gray: #8e959b;
    --ios-gray: #959393;
    --light-gray: #4f5051;
    --grey: #222222;
    --ios-bg: #1b1b1b;
    --border-gray: #222222;
    --ios-footer-bg: #282828;
    --pause-icon: #909499;
    --audio-wave-bg: #909499;
    --fill-waves-bg: #fff;
    --watermark-color: rgba(254, 254, 254, 0.08);
}

.dark-theme input {
    color: #fff !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}



body.body-fixed {
    overflow: hidden;
}

.row.row-flex {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
}

.fa-pencil {
    cursor: pointer;
    color: #90a4ae;
}

.h-auto {
    height: auto;
}

.mt-1 {
    margin-top: 5px;
}

.mt-2 {
    margin-top: 10px;
}

.mt-3 {
    margin-top: 15px;
}

.mt-4 {
    margin-top: 20px;
}

.mt-5 {
    margin-top: 30px;
}

.pl-1 {
    padding-left: 5px;
}

.pl-0 {
    padding-left: 0;
}

.pr-0 {
    padding-right: 0;
}

.tip-text {
    color: #5D6D7E;
    max-width: 320px;
}

.text-gray {
    color: #34495E
}

.d-block {
    display: block !important;
}

.social-page .btn.btn-block {
    width: 100%;
    display: block;
}

.social-page .radio label,
.social-page .checkbox label {
    display: inline-flex;
}

.right-part .modal-content {
    border: 0 !important;
}

.modal-content {
    display: flex;
    flex-direction: column;
}

.whatsapp {
    position: relative;
    font-family: "Open Sans", sans-serif !important;
    overflow: hidden;
}

.msg-time {
    text-transform: lowercase;
}

.change_reset .btn {
    margin-top: 10px;
}

.right-part .modal-body .is-not .message-container {
    min-height: 15px;
}

.whatsapp.whatsapp-chat .android-header .status-bar {
    background: var(--white);
    display: flex;
    justify-content: space-between;
    padding: 8px 15px 5px 15px;
}

.wp-chat .android-header .status-bar .status-time {
    color: var(--dark-color);
}

.wp-chat .android-header .status-bar-right {
    color: var(--dark-color);
}

.wp-chat .android-header.white-content .status-bar .battery-status {
    color: var(--dark-color);
}

.wp-chat .android-header.white-content .status-bar .battery {
    border-color: var(--dark-color);
}

.wp-chat .android-header.white-content .battery:before,
.wp-chat .android-header.white-content .battery-level {
    background-color: var(--dark-color);
}

.status-bar-left {
    display: flex;
    align-items: center;
}

.status-bar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.android-header .status-network {
    position: relative;
}

.android-header .status-network .data-signal {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 6px;
}

.android-header .battery-container.battery-vertical-one .battery {
    rotate: 90deg;
    width: 14px;
    height: 10px;
    border: 0;
    background-color: rgba(200, 200, 200, 0.5);
    margin: 0 0 2px 0;
    scale: 82%;
}

.android-header .battery-container.battery-vertical-one .battery::before {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 4px;
    height: 12px;
    border-radius: 0;
    background: linear-gradient(#fff 30%, transparent 30%, transparent 70%, #fff 70%);
    z-index: 5;
}

.android-header .battery-container.battery-vertical-two {
    display: inline-flex;
    margin: 0;
    height: 15px;
    align-items: center;
}

.android-header .battery-container.battery-vertical-two .battery-status {
    order: 2;
    margin-left: 2px;
    width: 25px;
    text-align: left;
    font-weight: bold;
}

.android-header .battery-container.battery-vertical-two .battery {
    rotate: 90deg;
    width: 12px;
    height: 8px;
    order: 1;
    margin: 0;
    padding: 0;
    display: block;
    border-width: 1.5px;
}

.android-header .battery-container.battery-vertical-two .battery::before {
    height: 4px;
    width: 1.5px;
    left: -2.5px;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 0;
    margin: 0;
}

.android-header .battery-container.battery-horizontal .battery {
    width: 20px;
    height: 11px;
    border-radius: 3px;
}

.android-header .battery-container.battery-horizontal .battery::before {
    left: calc(100% + 2px);
    top: 50%;
    transform: translate(0, -50%);
    margin: 0;
    border-radius: 0 1px 1px 0;
    height: 5px;
    width: 1.5px;
}

.android-header .battery-container.battery-horizontal .battery-level {
    left: 0;
    right: unset;
}

.android-header .battery-container.hide-percentage .battery-status {
    display: none;
}

.android-header .battery-container.hide-percentage.battery-horizontal .battery {
    margin: 0;
}

.whatsapp-chat .wp-android {
    display: flex;
    flex-direction: column;
}

.whatsapp-chat .wp-ios {
    display: none;
}

.desktop_view .whatsapp-chat .wp-ios {
    display: none;
}

.whatsapp-chat .ios-header {
    display: block;
}

.whatsapp-iphone-status-bar .iphone-moblie-network {
    display: none !important;
}

.whatsapp-iphone-status-bar .iphone-time {
    position: unset;
}

.Battery-percent-wrap {
    position: relative;
}

.Battery-percent-wrap label {
    position: absolute;
    right: 10px;
    background-color: #fff;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 2;
}

.whatsapp .wp-android-header .modal-header {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--white);
    padding: 9px 10px 9px 5px;
    min-height: 56px;
    width: 100%;
    border: none;
    border-radius: 0;
}

.wp-chat .wp-android-header .modal-title .header-content .name-text {
    color: var(--dark-color);
}

.wp-chat .wp-android-header .modal-title .header-content .status-text {
    color: var(--dark-color);

}

.wp-android-header .whatsapp-arrow-img {
    margin-top: 3px;
    width: 6.3%;
}

.wp-android-header .modal-title {
    float: left;
    margin-left: 5px;
}

.modal-title .modal-title-img {
    position: relative;
}

.modal-title .modal-title-img .profile-wrap {
    border-radius: 50%;
    overflow: hidden;
    height: 38px;
    width: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

.modal-title-img .profile-wrap img {
    width: 100%;
    height: auto;
}

.modal-title .modal-title-img .fa-cloud-upload {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #778899;
    border: 1px solid #fff !important;
    color: #fff;
}

.modal-title-img input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    font-size: 23px;
    height: 100%;
    width: 100%;
    direction: ltr;
    cursor: pointer;
    z-index: 9;
}

.wp-android-header .modal-title .header-content {
    display: flex;
    flex-direction: column;
    vertical-align: middle;
    margin-left: 10px;
    max-width: calc(100% - 55px);
}

.wp-android-header .modal-title .header-content .name-text {
    font-size: 15px;
    font-weight: 700;
}

.preview-popup .wp-android-header .header-content span {
    color: var(--dark-color) !important;
}

.wp-android-header .modal-title .header-content span {
    font-weight: normal;
    color: #ffffff;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.wp-android-header .whatsapp-header-icon img {
    width: 104px;
    height: 20px;
}

.right-part .whatsapp-chat .modal-header .pull-right .wp-desktop-header-icon {
    display: none;
}


.whatsapp-chat .wp-ios-header {
    display: block;
}


.wp-ios-header .modal-header {
    background: var(--ios-bg);
    padding: 5px 20px 5px 0;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
}

.ios-header.header-wh .iphone-time .status-time {
    color: var(--dark-color);
}

.ios-header.header-wh .iphone-battery {
    position: relative;
}

.ios-header.header-wh .iphone-battery .battery-status {
    position: absolute;
    left: calc(50% - 1px);
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    font-size: 12px;
    line-height: 1;
    font-weight: bold;
    color: var(--msg-box-color);
    text-shadow: 0 0 var(--msg-box-color);
}

.ios-header .battery-container .battery .battery-level.red {
    background-color: #ff6363;
}

.battery-percentage.iphone-battery-percentage {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--ios-battery);
}

.ios-header.header-wh .battery-container .battery .battery-level {
    position: relative;
    z-index: 2;
}

.ios-header .battery-container .battery:before {
    width: 2px;
    height: 3px;
    border-radius: 0 5px 5px 0;
    background-color: var(--ios-battery);
}

.ios-header .battery-container.hide-percentage .battery-status {
    display: none;
}

.ios-header .battery-container.hide-percentage .battery-percentage {
    background-color: transparent;
    padding: 1px;
    border: 1px solid var(--dark-color);
}

.ios-header .battery-container.hide-percentage .battery-percentage .battery-level {
    border-radius: 3px;
}

.ios-header .battery-container.hide-percentage .battery:before {
    background-color: var(--dark-color);
}

.ios-header .status-bar,
.wp-ios-header .modal-header {
    background-color: var(--ios-bg);
}

.ios-header .status-bar.whatsapp-iphone-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 23px 6px 28px;
}

.whatsapp-iphone-status-bar .right-status-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.whatsapp-iphone-status-bar .new-iphone-moblie-network {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.whatsapp-iphone-status-bar .show-network {
    max-width: 22px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    height: 16px;
}

.whatsapp-iphone-status-bar .new-iphone-moblie-network .data-network {
    margin: 0 3px;
    font-weight: 600;
    line-height: 14px;
    color: var(--dark-color);
    display: block;
}

.whatsapp-iphone-status-bar .new-iphone-moblie-network .network-point {
    display: block;
    width: 4px;
    height: 100%;
    background-color: var(--dark-color);
    margin-right: 2px;
    border-radius: 2px;
    position: relative;
}

.whatsapp-iphone-status-bar .new-iphone-moblie-network .network-point::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 4px;
    background-color: var(--dark-color);
    bottom: -6px;
    left: 0;
    border-radius: 2px;
    display: none;
}

.whatsapp-iphone-status-bar .new-iphone-moblie-network .phone-network.sim2 .network-point::before {
    display: block;
}

.whatsapp-iphone-status-bar .phone-network.sim2 {
    padding-bottom: 6px;
}

.whatsapp-iphone-status-bar .new-iphone-moblie-network .network-point:nth-child(1) {
    height: 60%;
}

.whatsapp-iphone-status-bar .new-iphone-moblie-network .network-point:nth-child(2) {
    height: 72%;
}

.whatsapp-iphone-status-bar .new-iphone-moblie-network .network-point:nth-child(3) {
    height: 86%;
}

.whatsapp-iphone-status-bar .new-iphone-moblie-network .network-point:not(.active) {
    opacity: 0.3;
}

.whatsapp-iphone-status-bar .new-iphone-moblie-network .phone-network {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 16px;
    position: relative;
}


/* .whatsapp-iphone-status-bar .wifi-network {
    position: relative;
    padding-bottom: 1px;
    height: 0;
    width: 0;
    display: block;
    border-radius: 50%;
    border: 4px solid var(--dark-color);
    border-color: var(--dark-color) transparent transparent transparent;
    border-width: 15px 12px 0px 12px;
    scale: 0.9;
}

.whatsapp-iphone-status-bar .wifi-network:before,
.whatsapp-iphone-status-bar .wifi-network:after {
    content: '';
    display: block;
    border-radius: 50%;
    border: 2px solid #c78b8b;
    border-color: var(--light-color) transparent transparent transparent;
    height: 25px;
    width: 25px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.whatsapp-iphone-status-bar .wifi-network:after {
    height: 15px;
    width: 15px;
} */

.show-network.n5g .data-network:not(.net5g),
.show-network.n4g .data-network:not(.net4g),
.show-network.n3g .data-network:not(.net3g),
.show-network.n2g .data-network:not(.net2g),
.show-network.nairplane .data-network:not(.airplane),
.show-network.nwifi .data-network:not(.wifi-network),
.wa-theme:not(.dark-theme) .show-network.nwifi .data-network .dark,
.wa-theme.dark-theme .show-network.nwifi .data-network:not(.wifi-network) .light {
    display: none;
}

.show-network.nsignal {
    display: none;
}


.whatsapp-iphone-status-bar .right-part .header-content span,
.whatsapp-iphone-status-bar .battery-status {
    color: var(--dark-color);
}

.ios-header .battery-container .battery {
    border: 0;
    /* background: rgba(0,0,0,0.3); */
    border-radius: 4px;
    height: 14px;
}

.ios-header .battery-container .battery .battery-level {
    background-color: var(--dark-color);
}

/* .wp-ios-header .modal-header .whatsapp-ios-arrow-img {
    padding: 0 5px 0 10px;
} */

.wp-ios-header .modal-header .whatsapp-ios-arrow-img .sec-image.ios-arrow {
    background-position: -4px -114px;
}

.dark-theme .wp-ios-header .modal-header .whatsapp-ios-arrow-img .sec-image.ios-arrow {
    background-position: -38px -114px;

}

.wp-ios-header .modal-header .whatsapp-ios-arrow-img img {
    width: 13px;
    height: 23px;
}

.wp-ios-header .wp-head-name {
    color: #000;
}

.wp-ios-header .modal-header .unread-whatsapp-msg .number-text {
    color: var(--dark-color);
    font-weight: 600;
    font-size: 18px;
}

.header-icon.pull-right .sec-image.video_call {
    background-position: -84px -124px;
    background-size: 240px;
}

.dark-theme .header-icon.pull-right .sec-image.video_call {
    background-position: -124px -124px;
}

.header-icon.pull-right .sec-image.voice_call {
    background-position: -130px -96px;
    background-size: 190px;
}

.dark-theme .header-icon.pull-right .sec-image.voice_call {
    background-position: -162px -97px;
}

.wp-ios-header .modal-header .unread-whatsapp-msg .main-input-text {
    max-width: 50px;
}

.whatsapp-title .text-name {
    width: 100%;
}

.wp-chat .whatsapp-title {
    margin-right: 15px;
}

.wp-ios-header .modal-header .modal-title {
    margin: 0 5px;
    float: left;
    display: flex;
    align-items: center;
}

.right-part .header-content .name-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark-color);
}

.right-part .header-content .status-text {
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    color: #9e9e9e;
}

.iphone-date,
.iphone-date-text {
    display: none;
}

.date-label .text-name:has(.iphone-date-text[style="display: block;"]),
.date-label .text-name:has(.iphone-date-text[style="dispaly:block;"]) {
    line-height: 1.3;
}

.dark-theme .date-label .text-name:has(.iphone-date-text[style="display: inline;"]),
.dark-theme .date-label .text-name:has(.iphone-date-text[style="dispaly:inline;"]),
.dark-theme .date-label:has(.iphone-date-text[style="display: inline;"]) input,
.dark-theme .date-label:has(.iphone-date-text[style="dispaly:inline;"]) input,
.dark-theme .date-label .text-name:has(.iphone-date-text[style="display: block;"]),
.dark-theme .date-label .text-name:has(.iphone-date-text[style="dispaly:block;"]),
.dark-theme .date-label:has(.iphone-date-text[style="display: block;"]) input,
.dark-theme .date-label:has(.iphone-date-text[style="dispaly:block;"]) input {
    background-color: var(--ios-msg-bg);
    color: rgba(255, 255, 255, 0.6)
}

.dark-theme .whatsapp-chat .wp-ios-header .fa-pencil {
    color: #fff;
}

.wp-ios-header .modal-header .profile-wrap {
    width: 40px;
    height: 40px;
}

.wp-ios-header .modal-header .modal-title .header-content {
    padding-left: 7px;
    max-width: 100%;
}

.wp-ios-header .modal-header .modal-title .header-content a {
    font-size: 13px;
    font-weight: 600;
    margin-top: -3px;
}

.right-part .wp-ios-header .modal-header .header-icon.pull-right {
    gap: 10px;
    justify-content: center;
}

.mobile_view .whatsapp-text {
    max-width: 280px;
}



.main-ft .scroll-chat {
    position: absolute;
    bottom: 80px;
    right: 10px;
    z-index: 5;
}

.main-ft.iphone .scroll-chat {
    right: 0px;
    z-index: 5;
    bottom: 100px;
}

.main-ft.scroll-down .scroll-chat {
    bottom: 40px;
}


.main-ft .scroll-chat .scroll-icon {
    background-color: var(--msg-r-bg-color);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-ft.iphone .scroll-chat .scroll-icon {
    background-color: var(--ios-msgbg-footr);
    border-radius: 10px 0 0 10px;
    width: 55px;
    height: 40px;
    border-top: 1px solid var(--ios-bg);
    border-left: 1px solid var(--ios-bg);
    border-bottom: 1px solid var(--ios-bg);
}

.main-ft .scroll-chat .scroll-icon .sec-image.arrow-icon {
    background-position: -49px -54px;
    background-size: 155px;
    height: 20px;
}

.main-ft.iphone .scroll-chat .scroll-icon .sec-image.arrow-icon {
    background-position: -62px -127px;
    background-size: 190px;
    height: 30px;
}

.dark-theme .main-ft .scroll-chat .scroll-icon .sec-image.arrow-icon {
    background-position: -74px -54px;
}

.dark-theme .main-ft.iphone .scroll-chat .scroll-icon .sec-image.arrow-icon {
    background-position: -96px -127px;

}


.whatsapp-chat .modal-content {
    background-image: var(--bg-img);
    background-size: auto 150%;
    background-position: center;
}

.whatsapp-chat .modal-content:has([style]) {
    background-size: cover;
}

.whatsapp.whatsapp-chat .whatsapp-body {
    padding: 5px 2px;
    min-height: 570px;
    max-height: 570px;
    overflow-y: auto;
    margin: 0;
    width: 100%;
}

.whatsapp.whatsapp-chat .whatsapp-body.whatsapp-body-ios {
    --bg-img: var(--bg-ios-light);
    background-position: center;
}

.whatsapp-body-ios .message-text .text-msg .link-span {
    color: var(--ios-link-color);
}

.dark-theme .whatsapp.whatsapp-chat .whatsapp-body.whatsapp-body-ios {
    --bg-img: var(--bg-ios-dark)
}

.whatsapp-text {
    margin: 6px 0 5px 0 !important;
    padding: 4px 5px 6px 7px;
    border-radius: 0 10px 10px 10px;
    background: var(--msg-r-bg-color) !important;
    box-shadow: 0 1px 1px rgb(0 0 0 / 13%);
    position: relative;
    color: var(--msg-text-color);
}

.Caret-right .sent-carat+.whatsapp-text {
    border-radius: 10px 0 10px 10px;
}

.Caret-right .sent-carat[style="display: none;"]+.whatsapp-text,
.Caret-left .received-carat[style="display: none;"]+.whatsapp-text,
.Caret-left .receive-carat[style="display: none;"]+.whatsapp-text,
.Caret-right .sent-carat[style="display:none;"]+.whatsapp-text,
.Caret-left .received-carat[style="display:none;"]+.whatsapp-text,
.Caret-left .receive-carat[style="display:none;"]+.whatsapp-text,
.Caret-right .sent-carat[style="display: none"]+.whatsapp-text,
.Caret-left .received-carat[style="display: none"]+.whatsapp-text,
.Caret-left .receive-carat[style="display: none"]+.whatsapp-text,
.Caret-right .sent-carat[style="display:none"]+.whatsapp-text,
.Caret-left .received-carat[style="display:none"]+.whatsapp-text,
.Caret-left .receive-carat[style="display:none"]+.whatsapp-text {
    border-radius: 10px !important;
}

.message-sent+.message-sent .whatsapp-sent .whatsapp-text,
.message-received+.message-received .whatsapp-received .whatsapp-text,
.message-receive+.message-receive .whatsapp-received .whatsapp-text,
.message-received+.message-receive .whatsapp-received .whatsapp-text,
.message-receive+.message-received .whatsapp-received .whatsapp-text {
    margin-top: 0 !important;
    border-radius: 10px;
}

.wa-theme.dark-theme .Caret-left .received-carat[style="display: none;"]+.whatsapp-text,
.wa-theme.dark-theme .Caret-left .receive-carat[style="display: none;"]+.whatsapp-text,
.wa-theme.dark-theme .Caret-left .received-carat[style="display:none;"]+.whatsapp-text,
.wa-theme.dark-theme .Caret-left .receive-carat[style="display:none;"]+.whatsapp-text,
.wa-theme.dark-theme .Caret-left .received-carat[style="display: none"]+.whatsapp-text,
.wa-theme.dark-theme .Caret-left .receive-carat[style="display: none"]+.whatsapp-text,
.wa-theme.dark-theme .Caret-left .received-carat[style="display:none"]+.whatsapp-text,
.wa-theme.dark-theme .Caret-left .receive-carat[style="display:none"]+.whatsapp-text {
    --msg-r-bg-color: var(--ios-msg-color-dark);
}

/* ============================================================================================================ */
.sec-image {
    width: 30px;
    height: 30px;
    background-image: url(../../images/whatsapp/whatsapp-chat.png);
    background-size: 220px;
}

.sec-image.back-arrow {
    background-position: 0px 0px;
    background-size: 160px;
}

.dark-theme .sec-image.back-arrow {
    background-position: -29px 0px;
}

.error-msg {
    background-color: #ff6363;
    color: #fff;
    font-weight: 500;
    margin: 10px 0;
    padding: 5px 10px;
    border-radius: 9px;
}

.error {
    border-color: #ff6363 !important;
    color: #ff6363;
}

.btn.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

.btn.btn-danger:hover {
    border-color: #ff6363;
    background-color: #ff6363;
}

.date-label {
    display: flex;
    justify-content: center;
    margin: 5px 0;
}

.chat-timer-wrap,
.date-label p,
.date-label input {
    background: var(--msg-r-bg-color);
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: 500;
    color: var(--gray-black);
}

.date-label p i {
    margin-left: 5px;
}

.date-label .edit-text {
    position: relative;
}

.date-label .edit-text .btn-remove {
    position: absolute;
    top: 6px;
    right: -18px;
    z-index: 2;
    font-size: 16px;
    color: #E74C3C;
    cursor: pointer;
}

/* .whatsapp-text .btn-remove {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -18px;
    z-index: 2;
    font-size: 16px;
    color: #E74C3C;
    cursor: pointer;
} */

.date-label .main-input-text.input-textarea {
    background-color: var(--msg-r-bg-color);
    color: var(--dark-color);
    padding: 8px;
    border-radius: 5px;
    width: 280px;
    height: 80px;
    resize: vertical;
}

.admin-label p {
    padding: 5px 15px;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    max-width: calc(100% - 72px);
    display: block;
}

.admin-label .icon {
    width: 8px;
    height: 8px;
    min-width: 8px;
    fill: currentColor;
    margin-right: 5px;
}

/* chat timer start*/

.chat-timer-wrap {
    max-width: calc(100% - 60px);
    margin: 0 auto 5px;
    text-align: center;
    font-size: 13px;
    position: relative;
    display: flex;
    align-items: center;
}

.chat-timer-wrap.chat-timer-ios {
    background-color: var(--ios-msg-bg);
}

.chat-timer-wrap .fa-pencil,
.chat-timer-wrap .timer-msg {
    position: relative;
    color: var(--gray-black);
    line-height: 1.3;
    font-size: 13px;
    margin: 0;
    display: inline;
}

.chat-timer-wrap .timer-msg::before {
    content: '';
    height: 14px;
    width: 14px;
    background-image: var(--chat-timer-img);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    margin: 0 4px -2px 0;
}

.chat-timer-wrap .btn-remove .fa-times-circle {
    font-size: 16px;
    color: #E74C3C;
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(22px, -50%);
}

.chat-timer-wrap.chat-timer-ios {
    max-width: calc(100% - 100px);
    color: var(--dark-color);
}

.chat-timer-wrap.chat-timer-ios .timer-msg,
.chat-timer-wrap.chat-timer-ios .fa-pencil {
    color: var(--dark-color);
}

.chat-timer-wrap.chat-timer-ios .timer-msg::before {
    background-image: var(--chat-timer-img-ios);
}



.wa-theme.desktop_view .chat-timer-wrap {
    width: fit-content;
}

.disappear-input {
    border: 0;
    background: var(--msg-r-bg-color);
    padding: 5px 10px;
    border-radius: 6px;
    height: 68px;
    width: 100%;
    font-weight: 500;
    color: var(--gray-black);
    font-size: 13px;
    line-height: 1.3;
    padding: 0 8px;
    resize: none;
}

/* chat timer end*/

.edit-delete-popup {
    position: absolute;
    top: 50%;
    left: -40px;
    opacity: 1;
    transform: translateY(-50%);
    visibility: visible;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
}

.message-received .edit-delete-popup {
    right: -40px;
    left: unset;
}

.message-received .edit-delete-popup .delete-msg {
    order: 2;
}

.message-received .edit-delete-popup .reply-msg {
    order: 1;
}

/* .edit-delete-popup::before {
    content: "\f0d7";
    position: absolute;
    left: 50%;
    top: 24px;
    transform: translate(-50%, 0);
    z-index: 5;
    color: white;
    font-size: 20px;
    font-family: FontAwesome;
} */



.edit-delete-popup i {
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 3;
}

.edit-delete-popup .delete-msg {
    color: #E74C3C;
    background: #FADBD8;
}

.edit-delete-popup .edit-msg {
    color: #2471A3;
    background: #D6EAF8;
}

.edit-delete-popup .reply-msg {
    color: #138D75;
    background: #D0ECE7;
}

/* .whatsapp-text:hover .edit-delete-popup,
.whatsapp-text:focus .edit-delete-popup {
    opacity: 1;
    visibility: visible;
} */

.wp-head-name {
    background: transparent;
    color: #fff;
    border: 0;
    outline: none;
    /* width: 100px; */
    display: none;
}

.wp-android-header .modal-title .header-content .fa-pencil {
    color: #90a4ae;
}

.wp-android-header .modal-title .header-content .fa-pencil,
.message-text .fa-pencil {
    margin-left: 10px;
}

.setimage .fa-pencil {
    margin: 0;
}

.desktop_view .wp-android-header .modal-title .header-content .fa-pencil {
    color: var(--msg-text-color);
}

.wp-android-header .modal-title .header-content .text-name {
    font-size: 15px;
    font-weight: 700;
    width: 100%;
    color: var(--dark-color);
}

/* .wp-android-header .modal-title .header-content .text-name span {
      font-size: 15px;
      font-weight: normal;
} */

.chat-image-type {
    display: flex;
    align-items: center;
}



.btn.wp-send-btn,
.btn.wp-send-btn:hover {
    /* background: #128C7E; */
    color: #fff;
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wp-send-btn svg {
    fill: #ffffff;
    height: 22px;
    margin-left: 10px;
}

.keyboard-popup .msg-status {
    display: grid;
    grid-template-columns: auto auto;
}

.desktop_view .keyboard-popup .msg-status {
    grid-template-columns: auto auto auto auto;
}

.keyboard-popup .fileinput {
    justify-content: space-between !important;
}

.whatsapp_pro_img .fileinput-text .btn-file i {
    display: inline-block !important;
}

.whatsapp_pro_img .input-img i {
    width: 38px;
    height: 38px;
}

.keyboard-popup .fileinput .fileinput-text {
    width: auto !important;
}

.message-input-wrap {
    position: relative;
}

.message-text.whatsapp-text.temp-reply-box {
    padding: 0 !important;
    margin: 0 !important;
}

.input-image-wr {
    position: relative;
    cursor: pointer;
    width: 100%;
    /* border: 1px dashed var(--primery-color); */
    border: 1px dashed #a3a3a3;
    border-radius: 10px;
    margin-bottom: 10px;
    transition: 0.3s;
}

.add-image-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;
    color: #7c7c7c;
    border-radius: 10px;
    background-color: #fff;
}

.input-image-wr:hover {
    border-color: #000;
}


.add-image-sec span {
    font-size: 14px;
    font-weight: 600;

}

.input-image-wr .btn-sm {
    padding: 2px 8px;
    height: auto;
    cursor: pointer;
}

.input-image-wr #image_btn {
    display: none;
}

.fileinput-image {
    text-align: center;
}

.fileinput-image img {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
    object-position: center;
    margin-bottom: 10px;
}

/* Color Picker Css Start */
.color-picker {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    position: absolute;
    z-index: 10;
    right: 15px;
    /* left: 50%;
    transform: translateX(-50%); */
    bottom: calc(100% + 2px);
    border-radius: 10px;
    padding: 10px;
    display: none;
    box-shadow: 0 8px 24px #e6e9ef;
    background: #fff;
}

.color-picker .color-box {
    height: 35px;
    width: 35px;
    overflow: hidden;
    position: relative;
    padding: 2px;
}

.color-picker .color-box.active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: #ffffff;
    transition: 0.3s;
    pointer-events: none;
}

.color-picker .color-box span {
    height: 100%;
    width: 100%;
    cursor: pointer;
    display: block;
    border-radius: 50%;
}

.color-picker .btn {
    position: absolute;
    height: 25px;
    padding: 0 6px;
    top: -10px;
    right: -10px;
    display: flex;
    align-items: center;
    background-color: #ff6363;
    border: 0 !important;
}

.color-picker .btn:hover {
    background-color: red;
}

/* Color Picker Css End */

/* Toggle Switch Css Start */

.toggle-switch {
    display: flex;
    align-items: center;
}

.toggle-switch input {
    margin: 0 5px;
}

.toggle {
    height: 19px;
    width: 38px;
    border-radius: 16px;
    display: inline-block;
    position: relative;
    margin: 0;
    border: 2px solid var(--primery-color);
    background: var(--primery-color);
    transition: all .2s ease;
}

.toggle::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 1px;
    right: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 2px rgba(44, 44, 44, .2);
    transition: all .2s cubic-bezier(.5, .1, .75, 1.35);
}

.toggle:checked:after {
    transform: translatex(17px);
}

.toggle-switch input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.toggle-switch input[type="checkbox"]:focus {
    outline: 0;
}

/* Toggle Switch Css End */

/* image popup start*/


.modal-form-input .modal-body .input-img {
    max-width: 300px;



    max-height: 300px;
    border: 2px dashed #b5b5b5;
    border-radius: 8px;
    display: block;
    z-index: 1;
}

.modal-form-input .modal-body .input-img img {
    width: 100%;
    height: auto;
}

.modal-form-input .modal-body .input-img.error {
    border-color: #ff0000;
}

.modal-form-input .modal-dialog,
.modal-form-input {
    pointer-events: none;
    z-index: 99999;
}

.modal-form-input .modal-content {
    pointer-events: all;
}

.modal-dialog.modal-sm {
    max-width: 300px;
    margin: 60px auto;
}


.modal-form-input .modal-body .item-img {
    opacity: 0;
    visibility: hidden;
}

.croppie-container {
    margin-bottom: 30px;
}


/* image popup end */

.whatsapp-text .replayed-msg {
    width: 100%;
    /* border-left: 3px solid #06cf9c; */
    border-radius: 7px;
    background: #d1f4cc;
    overflow: hidden;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    /* padding: 0 5px; */
    /* height: 65px; */
    position: relative;
}

/* 
    .mobile_view .reply-phone-text,
    .desktop_view .reply-pc-text {
      display: inline;
    } */

/* .desktop_view .reply-phone-text, */
.reply-pc-text {
    display: none;
}

.whatsapp-text.temp-reply-box .replayed-msg {
    margin: 5px 0 20px !important;
}

.whatsapp-text .replayed-msg img {
    width: 60px;
    text-align: right;
    margin-right: 0 !important;
}

.whatsapp-text .replayed-msg .pre-reply-image {
    margin-left: 5px;
    display: block;
    overflow: hidden;
    flex: 0 0 auto;
    position: relative;
}

.whatsapp-text .replayed-msg .pre-reply-image span {
    width: 58px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* background-image: url("blob:https://dev.fakedetail.com/f578ac50-028c-4d0a-aeb3-5d5108c6227f"); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.whatsapp-text .replayed-msg .reply-box {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    flex-direction: column;
    margin-left: 0;
    padding: 10px 0 10px 10px;
    border-left: 3px solid #009688;
    width: calc(100% - 50px);
}

.Caret-left .whatsapp-text .replayed-msg {
    background: #f5f6f6;
}

.whatsapp-text .replayed-msg span .mname {
    line-height: 15px;
    font-size: 12px;
    font-weight: normal;
}

.whatsapp-text .replayed-msg span .mname:nth-child(1) {
    color: #009688;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
    margin-right: 10px;
}

.whatsapp-text .replayed-msg span .mname:nth-child(2) {
    display: block;
    overflow: hidden;
    max-height: 62px;
    text-overflow: ellipsis;
}

.whatsapp-text .replayed-msg span .mname:nth-child(2) .line-clamp {
    display: inline;
    line-height: 17px;
    font-size: 12px;
    padding-right: 5px;
    color: #607d8b;
    min-width: 50px;
    /* white-space: pre-wrap; */
    word-break: break-word;
}

.whatsapp-text .replayed-msg span .mname:nth-child(2) img+.line-clamp .pre-reply-text {
    letter-spacing: -0.4px;
}

.whatsapp-text .replayed-msg span .pre-reply-text {
    white-space: pre-wrap;
    visibility: visible;
    text-overflow: ellipsis;
    color: #000;
}

.whatsapp-text .replayed-msg span .mname:nth-child(2) img {
    width: 15px;
    height: auto;
    min-width: auto;
    display: inline;
    margin-right: 5px !important;
}

.left-panel {
    margin-bottom: 20px;
}

.setting-icon {
    color: #000;
    font-size: 26px;
    cursor: pointer;
}

.setting-icon i {
    margin-bottom: 15px;
}


/* ====================================== */

.whatsapp-received {
    margin-right: auto;
    padding-left: 20px !important;
    padding-right: 0 !important;
    max-width: 80% !important;
}

/* 
.group-chat .whatsapp-received {
  padding-left: 48px !important;
} */

.whatsapp-chat:not(.group-chat) .whatsapp-received .message-profile {
    display: none;
}

.group-chat .whatsapp-received .message-profile {
    position: absolute;
    left: 10px;
    top: 6px;
}

.group-chat .whatsapp-received .message-profile input {
    height: 0;
    width: 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.group-chat .whatsapp-received .message-profile .msg-profile img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.group-chat .whatsapp-received .message-profile .msg-profile i.fa {
    font-size: 12px;
    background-color: var(--light-color);
    color: var(--gary-color);
    height: 15px;
    width: 15px;
    border-radius: 50%;
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.whatsapp-sent {
    margin-left: auto !important;
    padding-left: 0 !important;
    padding-right: 20px !important;
    max-width: 80% !important;
}

.whatsapp-caret {
    position: relative;
    background-color: transparent !important;
    border-color: transparent !important;
}

.whatsapp-sent .whatsapp-text {
    color: var(--msg-text-color) !important;
    background-color: var(--msg-s-bg-color) !important;
}

.whatsapp-sent .whatsapp-text .fa-pencil {
    margin-left: 5px;
}

.desktop_view .message-text.whatsapp-text:has(.only-img),
.message-text.whatsapp-text:has(.only-img) {
    padding: 3px !important;
}

.whatsapp-sent .whatsapp-text img,
.whatsapp-received .whatsapp-text img {
    display: block;
    max-width: 330px;
    height: auto;
    width: 100%;
    /* vertical-align: middle; */
}

/* .mobile_view .whatsapp-sent .whatsapp-text img,
  .mobile_view .whatsapp-received .whatsapp-text img {
    min-width: 180px; 
  } */

.desktop_view .whatsapp-sent .whatsapp-text img,
.desktop_view .whatsapp-received .whatsapp-text img {
    min-width: 240px;
}

.sent-received-img {
    max-height: 440px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 2px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sent-received-img.only-img {
    margin: 0;
}

.sent-received-img i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 30PX;
    width: 30PX;
    border-radius: 50%;
    background-color: rgba(100, 100, 100, .6);
    color: #fff;
    z-index: 8;
    display: flex;
    justify-content: center;
    align-items: center;
}

.only-img+.msg-activity {
    bottom: 6px;
}

.only-img+.msg-activity .msg-time {
    color: #fff;
}

.only-img+.msg-activity img {
    filter: brightness(10);
}

.only-img.setvideo+.main-video-detail {
    display: block;
}

.main-video-detail {
    display: none;
}

.main-video-detail .pause-video {
    background-color: rgb(0 0 0 / 41%);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main-video-detail .pause-video i {
    font-size: 20px;
}

.main-video-detail .time-video input {
    color: #000 !important;
}

.main-video-detail .time-video {
    position: absolute;
    bottom: 8px;
    left: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-video-detail .time-video span {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.main-video-detail .time-video img {
    width: 18px;
    height: 18px;
}

.only-img.setvideo~.msg-activity {
    bottom: 8px;
}

.only-img.setvideo~.msg-activity .msg-time {
    color: #fff;
}

.only-img.setvideo .msg-image {
    width: 250px;
}



/* 
    .only-img + .msg-activity .message-status[data-status="sent"] svg, 
    .only-img + .msg-activity .message-status[data-status="delivere"] svg,
    .only-img + .msg-activity .message-status[data-status="sending"] svg {
      fill: #fff !important;
    } */

.whatsapp-caret .whatsapp-text .mname {
    display: block;
    font-size: 85%;
    font-weight: 700;
}

.received-carat .anroid-left-carat,
.sent-carat .anroid-right-carat {
    width: 12px;
    height: 21px;
    position: absolute;
    top: -2px;
    right: -8px;
}

.received-carat .anroid-left-carat {
    left: -8px;
    right: auto;
}


.message-receive+.message-received .received-carat .anroid-left-carat,
.message-receive+.message-receive .received-carat .anroid-left-carat,
.message-received+.message-receive .received-carat .anroid-left-carat,
.message-received+.message-received .received-carat .anroid-left-carat,
.message-sent+.message-sent .sent-carat .anroid-right-carat {
    opacity: 0;
    visibility: hidden;
}

.message-received+.message-receive.other-sender .received-carat .anroid-left-carat,
.message-received+.message-received.other-sender .received-carat .anroid-left-carat,
.message-receive+.message-received.other-sender .received-carat .anroid-left-carat,
.message-receive+.message-receive.other-sender .received-carat .anroid-left-carat {
    opacity: 1;
    visibility: visible;
}


.all_footer_wp {
    margin: 0;
    width: 100%;
}

.wa-theme.dark-theme .whatapp-android-footer .comment .icon-light,
.wa-theme:not(.dark-theme) .whatapp-android-footer .comment .icon-dark {
    display: none;
}

.whatsapp-android .whatapp-android-footer .post_write_comment {
    padding: 0 5px !important;
    background: transparent !important;
}

.whatsapp-android .whatapp-android-footer .text_block {
    padding: 0px 48px 0 0 !important;
}

.whatsapp-android .whatapp-android-footer .comment {
    background: #fff !important;
    border: none !important;
    min-height: 40px !important;
    border-radius: 26px !important;
    padding-top: 9px !important;
}

.whatsapp-android .whatapp-android-footer .text-wrcommenttext {
    padding-left: 5px;
    font-size: 14px;
}

.whatsapp-android .whatapp-android-footer .comment .img {
    margin-top: 1px !important;
}

.whatapp-android-footer .admin-msg {
    text-align: center;
    background-color: var(--msg-r-bg-color);
    padding: 15px;
}

.whatapp-android-footer .admin-msg p {
    margin: 0;
    font-size: 15px;
    -webkit-text-stroke: 0.2px;
    color: var(--gray-black);
}

.whatapp-android-footer .admin-msg p span {
    color: var(--green-color);
}

.whatsapp-android .whatsapp-recoder {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translate(0px, -50%);
    border-radius: 50%;
    overflow: hidden;
}

.whatsapp-android .whatsapp-recoder img {
    width: 42px;
    height: 42px;
}

.whatsapp-android .whatsapp-text span {
    color: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    height: 15px;
    line-height: 25px;
    white-space: nowrap;
}

.whatsapp-android .whatsapp-text span img {
    width: 16px;
}

/* .message-read-status {
      text-align: right;
      padding-left: 15px;
    } */

/* .message-read-status {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    } */

.message-read-status {
    display: inline-block;
}

.sent-received-img+.message-read-status {
    max-width: 330px;
    margin-top: 5px;
}

.msg-activity {
    /* display: flex;
      justify-content: end;
      width: 100%;
      align-items: center; */
    display: inline-block;
    position: absolute;
    /* justify-content: flex-end; */
    right: 10px;
    bottom: 2px;
}

.space-ex {
    width: 84px;
    display: inline-block;
}

.Caret-left .space-ex {
    width: 64px;
}

.message-status {
    display: inline-block;
    margin-left: 3px;
}

/* .message-status[data-status="read"] svg {
      fill: #53bdeb !important;
    }
    
    .message-status[data-status="sent"] svg, 
    .message-status[data-status="delivere"] svg,
    .message-status[data-status="sending"] svg {
      fill: #8696a0 !important;
    } */

.message-status img {
    width: 16px;
}

.message-text .text-msg {
    font-size: 15px;
    padding-left: 3px;
    color: var(--msg-text-color);
    word-wrap: break-word;
}

.message-text .text-msg .link-span {
    white-space: pre-wrap;
    font-size: 15px;
    color: var(--link-color);
    text-decoration: underline;
}

/* .message-read-status {
      display: inline-block;
      float: right;
      text-align: right;
      padding-left: 15px;
    } */

.whatsapp-text span {
    color: var(--msg-time-color);
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
}

.whatsapp.whatsapp-chat .whatapp-android-footer {
    /* background-image: url(../../images/Whatsapp_background_img.jpg); */
    /* background-image: var(--bg-img);
    background-size: cover;
    background-position: top; */
    padding: 5px 0;
}

.whatsapp .whatapp-android-footer .post_write_comment {
    position: relative;
    padding: 0 5px;
    z-index: 9;
}

.txt {
    position: relative;
}

.whatsapp .whatapp-android-footer .text_block {
    padding: 0 53px 0 0 !important;
}

.whatsapp .post_write_comment .txt .text_block .comment {
    min-height: 46px;
    padding: 10px;
    background-color: var(--msg-r-bg-color);
    border-radius: 30px;
    display: flex;
    align-items: center;
}

#download .post_write_comment .img {
    float: left;
    overflow: hidden;
    display: flex;
    align-items: center;
}

#download .post_write_comment .img svg {
    height: 25px;
    width: 25px;
    min-width: 25px;
    margin-right: 8px;
}

.text-wrcommenttext {
    color: #90a4ae;
    font-size: 15px;
    padding-left: 5px;
    line-height: 24px;
    display: inline-block;
}

.whatsapp .whatapp-android-footer .text-wrcommenttext {
    padding-left: 3px;
    flex-grow: 1;
    height: auto;
}

.post_write_comment .txt .text_block .comment .whatsapp-comment-bar {
    text-align: right;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    /* width: 110px; */
    /* height: 20px; */
    gap: 15px;
    padding-right: 5px;
    margin: 0;
}

.post_write_comment .whatsapp-comment-bar .comment-bar-icon {
    height: 20px;
    width: 20px;
}

.whatsapp-comment-bar .comment-bar-icon .money {
    display: block;
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.whatsapp-comment-bar .comment-bar-icon .money.rupee {
    background-image: url(../../images/whatsapp/whatsapp-pay-r.png);
}

.whatsapp-comment-bar .comment-bar-icon .money.dollar {
    background-image: url(../../images/whatsapp/whatsapp-pay-d.png);
}

.whatsapp-comment-bar .comment-bar-icon .money.real {
    background-image: url(../../images/whatsapp/whatsapp-pay-re.png);
}

.whatsapp-comment-bar .comment-bar-icon .money.quahl {
    background-image: url(../../images/whatsapp/whatsapp-pay-q.png);
}

.whatsapp .whatsapp-recoder {
    position: absolute;
    right: 0;
    top: 0;
    height: 46px;
    width: 46px;
    background-color: var(--dark-green);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.whatsapp .whatsapp-recoder .sec-image.recorder {
    background-position: -41px -77px;
}

.dark-theme .whatsapp .whatsapp-recoder .sec-image.recorder {
    background-position: -4px -77px;

}

.whatsapp .whatsapp-recoder img {
    width: 46px;
    height: 100%;
}

.whatsapp .whatapp-ios-footer {
    background-color: var(--ios-bg);
    width: 100%;
    border-top: 1px solid #dddddd;
    display: none;
}

.dark-theme .whatsapp .whatapp-ios-footer {
    border-color: var(--ios-bg);
}

.whatapp-ios-footer .ios-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 40px;
    padding: 5px 12px;
}

.whatapp-ios-footer .ios-footer.d-none {
    display: none;
}


.whatapp-ios-footer .ios-footer .ios-pluse-icon {
    background-position: -2px -187px;
}

.dark-theme .whatapp-ios-footer .ios-footer .ios-pluse-icon {
    background-position: -40px -187px;
}

.whatapp-ios-footer .ios-footer .ios-sticker-icon {
    background-position: -50px -131px;
    background-size: 160px;
}

.dark-theme .whatapp-ios-footer .ios-footer .ios-sticker-icon {
    background-position: -78px -131px;
}


.ios-right-ft {
    display: flex;
    align-items: center;
    gap: 5px;
}

.whatapp-ios-footer .ios-footer .ios-camera-icon {
    background-position: 0px -126px;
    background-size: 190px;
}

.dark-theme .whatapp-ios-footer .ios-footer .ios-camera-icon {
    background-position: -31px -126px;
}

.whatapp-ios-footer .ios-footer .ios-mice-icon {
    background-position: -111px -112px;
    background-size: 170px;
}

.dark-theme .whatapp-ios-footer .ios-footer .ios-mice-icon {
    background-position: -142px -112px;
}

.whatapp-ios-footer .ios-footer .ios-money-icon {
    background-position: -3px -200px;
    background-size: 200px;
}

.dark-theme .whatapp-ios-footer .ios-footer .ios-money-icon {
    background-position: -37px -200px;
}

/* 
.whatapp-ios-footer .ios-footer .ios-money-icon.rupee {
    background-image: url(../../images/whatsapp/whatsapp-pay-r-ios.png?1.2);
}

.whatapp-ios-footer .ios-footer .ios-money-icon.dollar {
    background-image: url(../../images/whatsapp/whatsapp-pay-d-ios.png?1.2);
}

.whatapp-ios-footer .ios-footer .ios-money-icon.real {
    background-image: url(../../images/whatsapp/whatsapp-pay-re-ios.png?1.2);
}

.whatapp-ios-footer .ios-footer .ios-money-icon.quahl {
    background-image: url(../../images/whatsapp/whatsapp-pay-q-ios.png?1.2);
} */

.whatapp-ios-footer .ios-footer .ios-msg-bar {
    height: 100%;
    flex-grow: 1;
    border: 1px solid var(--ios-msg-broder);
    background-color: var(--ios-footer-bg);
    border-radius: 15px;
    margin: 0 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
}

.whatapp-ios-footer .admin-msg p {
    text-align: center;
    color: #9e9e9e;
    margin: 8px 0;
    font-size: 16px;
    -webkit-text-stroke: 0.1px;
}

.whatapp-ios-footer .admin-msg p span {
    color: #017cf9;
}

.whatapp-ios-footer .footer-border {
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 18px;
}

.whatapp-ios-footer .footer-border span {
    height: 5px;
    width: 120px;
    border-radius: 8px;
    background-color: var(--dark-color);
}

.whatsapp .iphone-chat {
    color: #c8c8cd;
    font-size: 15px;
    line-height: 39px;
    padding-left: 65px;
    font-weight: 100;
}

.Caret-right [style="display: none;"]+.whatsapp-text,
.Caret-left [style="display: none;"]+.whatsapp-text {
    border-radius: 10px;
}

.iphone-bottom {
    position: absolute;
    bottom: 0;
    left: -8px;
    height: 19px;
    width: 10px;
}

.Caret-right .iphone-bottom {
    right: -8px;
    left: auto;
}

.iphone-bottom .iphone-left-carat,
.iphone-bottom .iphone-right-carat {
    width: 10px;
    height: 19px;
}

.message-received:not(:last-child) .iphone-bottom .iphone-left-carat,
.message-receive:not(:last-child) .iphone-bottom .iphone-left-carat,
.message-sent:not(:last-child) .iphone-bottom .iphone-right-carat {
    opacity: 0;
    visibility: hidden;
}

.message-sent:last-child .iphone-bottom .iphone-right-carat,
.message-received:last-child .iphone-bottom .iphone-left-carat,
.message-sent:has(+ .message-received) .iphone-bottom .iphone-right-carat,
.message-sent:has(+ .message-receive) .iphone-bottom .iphone-right-carat,
.message-sent:has(+ .date-label) .iphone-bottom .iphone-right-carat,
.message-received:has(+ .date-label) .iphone-bottom .iphone-left-carat,
.message-received:has(+ .message-sent) .iphone-bottom .iphone-left-carat,
.message-received:has(+ .message-receive.other-sender) .iphone-bottom .iphone-left-carat,
.message-receive:has(+ .message-received.other-sender) .iphone-bottom .iphone-left-carat,
.message-receive:has(+ .message-sent) .iphone-bottom .iphone-left-carat,
.message-received.other-sender:has(+ .message-received.other-sender) .iphone-bottom .iphone-left-carat,
.message-receive.other-sender:has(+ .message-received.other-sender) .iphone-bottom .iphone-left-carat,
.message-received.other-sender:has(+ .message-receive.other-sender) .iphone-bottom .iphone-left-carat,
.message-receive.other-sender:has(+ .message-receive) .iphone-bottom .iphone-left-carat,
.message-received.other-sender:has(+ .message-receive) .iphone-bottom .iphone-left-carat,
.message-receive:has(+ .message-receive.other-sender) .iphone-bottom .iphone-left-carat,
.message-received:has(+ .message-received.other-sender) .iphone-bottom .iphone-left-carat,
.message-receive:has(+ .message-received.other-sender) .iphone-bottom .iphone-left-carat,
.message-received:has(+ .message-receive.other-sender) .iphone-bottom .iphone-left-carat,
.message-received:has(+ .chat-timer-wrap) .iphone-bottom .iphone-left-carat,
.message-receive:has(+ .chat-timer-wrap) .iphone-bottom .iphone-left-carat,
.message-sent:has(+ .chat-timer-wrap) .iphone-bottom .iphone-right-carat {
    opacity: 1;
    visibility: visible;
}


.wp-desktop-footer {
    display: none;
}

.desktop_view .whatsapp-chat {
    width: 977px !important;
}

.desktop_view .whatsapp-chat .android-header,
.desktop_view .whatsapp-chat .wp-ios-header {
    display: none;
}

.desktop_view .whatsapp-chat .wp-android-header .whatsapp-arrow-img {
    display: none;
}

.desktop_view .whatsapp .wp-android-header .modal-header {
    background: var(--msg-box-color);
    height: 60px;
    padding: 10px 16px;
}

.desktop_view .whatsapp-chat .wp-android-header .modal-title {
    margin: 0;
}

.desktop_view .wp-android-header .modal-title .header-content {
    margin-left: 15px;
}

.desktop_view .wp-android-header .modal-title .header-content input,
.desktop_view .wp-android-header .modal-title .header-content span {
    color: var(--msg-text-color);
    font-weight: normal;
}

.desktop_view .wp-android-header .modal-title .header-content .name-text {
    color: var(--msg-text-color);
}

.desktop_view .wp-android-header .modal-title .header-content .status-text {
    font-size: 12px;
    color: var(--gary-color);
}

.desktop_view.right-part .modal-header .header-icon.pull-right {
    width: 40%;
}

.desktop_view.right-part .whatsapp-chat .modal-header .pull-right .header-right-all-icon {
    display: none;
}

.desktop_view.right-part .whatsapp-chat .modal-header .pull-right .wp-desktop-header-icon {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.header-right-all-icon {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-right-all-icon .sec-image.video-call {
    background-position: -150px -480px;
}

.dark-theme .header-right-all-icon .sec-image.video-call {
    background-position: -188px -480px;
}

.header-right-all-icon .sec-image.voice-call {
    background-position: -76px -298px;
}

.dark-theme .header-right-all-icon .sec-image.voice-call {
    background-position: -114px -298px;
}

.header-right-all-icon .sec-image.dots {
    width: 20px;
    background-position: -154px -298px;
}

.dark-theme .header-right-all-icon .sec-image.dots {
    background-position: -190px -298px;
}

.desktop_view .wp-desktop-header-icon .wp-header-icon {
    width: 50px;
}

.desktop_view .wp-desktop-header-icon .wp-header-icon.search-icon {
    margin-right: 10px;
}

.ft-left-icon .sec-image.emojis-icon {
    background-position: -4px -41px;
}

.dark-theme .ft-left-icon .sec-image.emojis-icon {
    background-position: -42px -42px;
}


.comment-bar .sec-image.attech {
    background-position: -58px -29px;
    background-size: 180px;
}

.dark-theme .comment-bar .sec-image.attech {
    background-position: -88px -28px;
}

.comment-bar .sec-image.rupee {
    background-position: -115px -29px;
    background-size: 175px;
}

.dark-theme .comment-bar .sec-image.rupee {
    background-position: -146px -29px;

}

.comment-bar .sec-image.camera {
    background-position: -125px -62px;
    background-size: 185px;
}

.dark-theme .comment-bar .sec-image.camera {
    background-position: -155px -62px;
}

.desktop_view .whatsapp .whatsapp-body {
    padding: 12px 0;
}

.desktop_view .whatsapp-received {
    padding-left: 82px !important;
}

.desktop_view .whatsapp-sent {
    padding-right: 82PX !important;
}

.desktop_view .whatsapp-sent .whatsapp-text,
.desktop_view .whatsapp-received .whatsapp-text {
    padding: 6px 7px 8px 9px !important;
}

/* .desktop_view .message-read-status {
      position: relative;
      bottom: -7px;
    } */
.desktop_view .whatsapp-sent,
.desktop_view .whatsapp-received {
    max-width: 67% !important;
}

.desktop_view .message-text p {
    line-height: 19px !important;
}

.desktop_view .whatsapp .whatapp-ios-footer,
.desktop_view .whatsapp .whatapp-android-footer {
    display: none !important;
}

/* ========= old desktop footer ======== */

/* .desktop_view .whatsapp .wp-desktop-footer {
      position: relative;
      display: block;
      width: 100%;
      height: 60px;
      background-image: url(../../images/wp-desktop-footer.jpg?erarf);
      background-position: center;
      background-size: cover;
    } */

/* ========= new desktop footer ======== */

.desktop_view .whatsapp .wp-desktop-footer {
    display: block;
    width: 100%;
    height: 60px;
    background-color: #f0f2f5;
}

.desktop_view .whatsapp-chat .whatsapp-body {
    background-size: auto 150%;
    background-position: center;
    background-image: var(--bg-img) !important;
}

.wp-desktop-footer .wp-footer-wrap {
    display: flex;
    padding: 5px 10px;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background-color: var(--msg-box-color);
    position: relative;
}


.wp-footer-icon {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wp-footer-icon.clip-icon {
    margin-right: 10px;
}

.wp-footer-icon.microphone-icon {
    margin-left: 10px;
}

.wp-desktop-footer .wp-footer-wrap .comment-box {
    display: block;
    border-radius: 8px;
    background-color: var(--input-bar);
    width: 100%;
}

.comment-box span {
    color: #667781;
    padding: 10px 12px;
    display: block;
}

/* ========= new desktop footer end ======== */

.desktop_view .whatsapp-chat .wp-android {
    display: block !important;
}

.desktop_view .whatsapp-chat .wp-ios,
.desktop_view .whatsapp-chat .wp-android .android-header {
    display: none !important;
}



.whatsapp.whatsapp-videocall {
    position: relative;
}

.whatsapp-videocall .android-header,
.whatsapp-videocall .ios-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 9;
    display: block;
}

.whatsapp.whatsapp-videocall .ios-header {
    display: none;
    z-index: 9;
}

.whatsapp.whatsapp-videocall .ios-header .status-bar,
.whatsapp-videocall .android-header .status-bar {
    background: transparent;
}

.whatsapp-videocall .video-header-bottom {
    position: relative;
    padding: 10px 25px;
    min-height: 40px;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.whatsapp-videocall .video-header-bottom .wp-arw-dwn-icon img {
    width: 17px;
}


.whatsapp-videocall .video-header-bottom .wp-group-icon img {
    width: 20px;
}

.whatsapp.whatsapp-videocall .whatsapp-body {
    background: transparent;
    min-height: 586px;
}

.wp-video-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.wp-video-box .profile_call_1 {
    background-image: url(../../images/profile-1.png);
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wp-video-box .profile_call_1::after,
.wp-video-box .profile_call_2::after,
.wp-video-box .profile_call_3::after,
.wp-video-box .profile_call_4::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #34393d;
    display: none;
}

.wp-video-box .profile_call_1.camera_off::after,
.wp-video-box .profile_call_2.camera_off::after,
.wp-video-box .profile_call_3.camera_off::after,
.wp-video-box .profile_call_4.camera_off::after {
    display: block;
}

.profile_call_2 {
    background-image: url(../../images/profile-2.jpg);
    background-size: cover;
    background-position: center;
    position: absolute;
    width: 80px;
    height: 110px;
    bottom: 110px;
    right: 15px;
    top: unset;
    left: unset;
    z-index: 50;
}

.whatsapp.whatsapp-videocall .whatapp-footer .post_write_comment {
    padding: 0 5px;
    background: 0 0;
}

.wp-video-footer-icon.vcall_icon.video.on_off .mute_video,
.wp-video-footer-icon.vcall_icon.audio.muted .mute_audio {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
}


.wp-video-footer-icon.vcall_icon.video.on_off,
.wp-video-footer-icon.vcall_icon.audio.muted {
    position: relative;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: #fff;
}


.wp-video-footer-icon.vcall_icon img,
.whatapp-android-footer.wp-video-footer.wp-ios-video-footer .ios_call_end {
    width: 35px;
}

.wp-video-footer-icon.vcall_icon.screen_sharing img,
.wp-video-footer-icon.vcall_icon .iphone_bluetooth {
    width: 30px;
}

.whatapp-android-footer.wp-video-footer .ios_screenshare,
.whatapp-android-footer.wp-video-footer.wp-ios-video-footer .android_screenshare,
.whatapp-android-footer.wp-video-footer.wp-ios-video-footer .call_end,
.wp-video-footer-icon.vcall_icon.video.on_off .unmute_video,
.wp-video-footer-icon.vcall_icon.audio.muted .unmute_audio,
.wp-video-footer-icon.vcall_icon.video .mute_video,
.wp-video-footer-icon.vcall_icon.audio .mute_audio {
    display: none;
}

.whatapp-android-footer.wp-video-footer.wp-ios-video-footer .ios_screenshare,
.whatapp-android-footer.wp-video-footer.wp-ios-video-footer .ios_call_end {
    display: block;
}

.whatapp-android-footer.wp-video-footer.wp-ios-video-footer .wp-video-footer-icon.vcall_icon.bluetooth {
    display: none !important;
}

.wp-video-footer-icon.vcall_call img {
    width: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wp-video-footer.wp-ios-video-footer .wp-video-footer-icon.vcall_call {
    background: #fc3b32;
}

.wp-video-footer-icon.vcall_call {
    position: relative;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: red;
}

.wp-video-footer-icon.vcall_icon.bluetooth {
    position: relative;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: #fff;
}

.wp-video-footer-icon.vcall_icon.bluetooth img {
    width: 27px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.width-50 {
    width: 50% !important;
    height: 50% !important;
    background-size: cover;
    background-position: center;
}

.top-right-width-0 {
    background-size: cover !important;
    background-position: center !important;
    position: absolute;
    top: 0;
    right: 0;
    left: unset !important;
    width: 50% !important;
    height: 50% !important;
}

.whatsapp-videocall .ios-header .video-header-bottom {
    padding: 10px 15px;
}

.whatsapp-videocall .ios-header .video-header-bottom .wp-group-icon img {
    height: 25px;
    width: auto;
}

.wp-ios-video-footer .wp-video-footer-icon.vcall_icon {
    position: relative;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: #5d5d5d;
}

.wp-ios-video-footer .wp-video-footer-icon.vcall_icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wp-ios-video-box .profile_call_2 {
    bottom: 150px;
}

.wp-ios-video-box .profile_call_2.top-right-width-0 {
    border-radius: 0;
}

.info-wrap {
    padding-right: 25px;
    position: relative;
    display: inline-block;
}

.info-wrap .tooltip-info {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 16px;
    color: var(--primery-color);
    width: 15px;
    z-index: 5;
}

.info-wrap .tooltip-info[data-tooltip-title]::before {
    content: attr(data-tooltip-title);
    position: absolute;
    max-width: 300px;
    font-size: 12px;
    min-width: 300px;
    left: 50%;
    bottom: 130%;
    transform: translateX(-70%);
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: #000;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3 all ease-in-out;
}

.info-wrap .tooltip-info[data-tooltip-title]::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: 110%;
    left: 50%;
    margin-left: -5px;
    border-width: 6px 6px 0;
    border-color: transparent;
    border-top-color: #000;
    border-style: solid;
    opacity: 0;
    visibility: hidden;
    transition: 0.3 all ease-in-out;
    z-index: 5;
}

.info-wrap .tooltip-info[data-tooltip-title]:hover:before,
.info-wrap .tooltip-info[data-tooltip-title]:hover::after {
    opacity: 1;
    visibility: visible;
}

.info-wrap .main-input-text[style="display: none;"]+.tooltip-info {
    display: none !important;
}

.message-label.info-wrap {
    margin-bottom: 15px;
}

.message-label.info-wrap input {
    margin-bottom: 0;
}

.tooltip {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    min-width: 200px;
    max-width: 250px !important;
    z-index: 99999;
}

.alert-info-wrap {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 110vh;
    width: 110vw;
    padding: 38px;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.alert-info-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: -1;
}

.alert-info-wrap .alert-body {
    padding: 15px;
    max-width: 500px;
    width: 100%;
    height: 60%;
    min-height: 380px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    position: relative;
}

.alert-info-wrap .alert-body p {
    text-align: center;
    font-size: 18px;
    margin-top: 15px;
    padding: 0 15px;
}

.alert-info-wrap .alert-body .phone-rotat-image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 80px);
}

.alert-info-wrap .alert-body .phone-rotat-image svg {
    width: 180px;
}

.alert-info-wrap .alert-body .close {
    position: absolute;
    right: -10px;
    top: -10px;
    z-index: 10;
    background: #000;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    text-shadow: none;
    opacity: 0.5;
}

/* steps css start */

.img-sec-main {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 -15px 30px -15px;
}

.img-sec-main:not(:last-child) {
    margin-bottom: 120px;
}

.img-sec-main .img-description {
    width: 45%;
    padding: 0 15px;
}

.img-sec-main .img-sec {
    width: 55%;
    padding: 0 15px;
    text-align: center;
}

.img-sec-main .img-sec img {
    max-width: 100%;
    max-height: 480px;
    height: auto;
    width: auto;
}

.img-sec-main .img-description .img-title {
    display: inline-block;
    background-color: rgba(0, 255, 255, 0.2);
    font-weight: 700;
    font-size: 14px;
    padding: 8px 15px;
    border-radius: 8px;
    margin-bottom: 8px;
    /* color: var(--primery-color); */
}

.img-sec-main .img-description p {
    font-size: 16px;
    margin-bottom: 30px;
}

/* steps css end */
.clockandtime-format {
    border: 1px solid #cdcdcd;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
}

.link-div {
    background-color: var(--light-bg-color);
    text-align: center;
    padding: 2px 0;
    position: relative;
    z-index: 5;
}

.link-div a {
    font-size: 11px;
    line-height: 1;
    color: var(--gray-black);
}

.clockandtime-format .time-box {
    border: none !important;
}

/* ============== New css start (23-02-2024)============ */
.add_bluetooth {
    display: none;
    margin-right: 3px;
}

.add_bluetooth.show {
    display: block;
}

.whatsapp-videocall .android-header .battery-container.battery-vertical-one .battery::before {
    height: 4px;
    width: 2.5px;
    left: -2.5px;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 0;
    margin: 0;
    background: rgba(200, 200, 200, 0.5);
}


.whatsapp-videocall .android-header .status-bar {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px 5px 15px;
    align-items: center;
}

.whatsapp-videocall .battery-percentage.iphone-battery-percentage {
    background-color: rgba(255, 255, 255, 0.5);
}

.whatsapp-videocall .ios-header.header-wh .iphone-battery .battery-status {
    color: #000;
}

.whatsapp-videocall .ios-header.header-wh .iphone-time .status-time,
.whatsapp-videocall .whatsapp-iphone-status-bar .new-iphone-moblie-network .data-network {
    color: #fff;
}

.whatsapp-videocall .whatsapp-iphone-status-bar .new-iphone-moblie-network .network-point,
.whatsapp-videocall .ios-header .battery-container.hide-percentage .battery:before,
.whatsapp-videocall .whatsapp-iphone-status-bar .new-iphone-moblie-network .network-point::before {
    background-color: #fff;
}

.whatsapp-videocall .ios-header .battery-container.hide-percentage .battery-percentage {
    border-color: #fff;
}

.whatsapp-videocall .whatsapp-iphone-status-bar .iphone-time {
    background: #30d258;
    padding: 0 10px;
    border-radius: 10px
}

.whatsapp-videocall .video-header-bottom .wp-end-end {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
}

.wp-end-end img {
    width: 14px;
}

.whatsapp-videocall .whatapp-android-footer .post_write_comment {
    position: relative;
    padding: 30px 15px 25px;
    z-index: 9;
    background-color: #202f34;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px 10px 0 0
}

.whatsapp-videocall .wp-ios-video-footer .post_write_comment {
    background-color: #444444;
    border-radius: 30px 30px 0 0;
}

.whatsapp-videocall .all_footer_wp .wp-ios-video-footer .footer-border {
    background-color: rgb(0 0 0 / 49%);
}



.whatsapp-videocall .whatapp-android-footer .post_write_comment::before {
    position: absolute;
    content: '';
    width: 25px;
    height: 5px;
    background-color: gray;
    top: 12px;
    left: calc(50% - 2px);
    transform: rotate(16deg);
    border-radius: 0 5px 5px 0;
}

.whatsapp-videocall .whatapp-android-footer .post_write_comment::after {
    position: absolute;
    content: '';
    width: 25px;
    height: 5px;
    background-color: gray;
    top: 12px;
    left: calc(50% - 25px);
    transform: rotate(-16deg);
    border-radius: 5px 0 0 5px;
}

.whatsapp-videocall .ios-header .video-header-bottom .wp-arw-dwn-icon {
    transform: rotate(90deg);
}

.whatsapp-videocall .v_call_footer {
    display: none;
}

.whatsapp-videocall .v_call_footer.show.remove {
    display: none !important;
}

.whatsapp-videocall .v_call_footer.show {
    display: block !important;
}

.video_call_options .form-element.arrow:before {
    pointer-events: none;
}

.video_call_options .form-element.arrow .form-control {
    cursor: pointer;
}

.whatsapp-videocall .footer-border {
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 18px;
    z-index: 6;
    position: relative;
    background-color: #444444
}

.whatsapp-videocall .footer-border span {
    height: 5px;
    width: 120px;
    border-radius: 8px;
    background-color: #fff;
}

.whatsapp-videocall .all_footer_wp.hide~.wp-video-box .profile_call_2 {
    bottom: 30px;
}

.whatsapp-videocall .wp-video-footer-icon.vcall_icon.bluetooth {
    display: none;
}

.v_call_footer.show+.wp-video-box .profile_call_2 {
    bottom: 155px;
}

.mute_msg {
    color: #fff;
}

.msg_1 {
    background-color: rgb(0 0 0 / 49%);
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 3px 10px;
    border-radius: 15px;
    z-index: 10;
}

.mute_msg.msg_2 {
    background: transparent;
    top: 5px;
    left: 5px;
    position: absolute;
    z-index: 5;
}

.mute_msg.msg_2 img {
    width: 30px;
}


.msg_1,
.msg_2 {
    display: none;
}

.wp-video-box input {
    width: 100%;
    color: #000;
    z-index: 4;
}

.wp-video-box p {
    margin: 0;
}

.off_camera,
.off_camera2 {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 1;
    text-align: center;
    width: 100%;
    display: none;
    /* padding: 0 20px; */
    z-index: 5;
}

.off_camera p,
.off_camera2 p {
    text-align: center;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 30px;
}

.off_camera img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.off_camera2 img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

.modal-title-img.whatsapp-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.input-img {
    cursor: pointer;
}

.input-img.edit-icon {
    position: relative;
}

.input-img i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: rgb(32 32 32 / 60%);
    color: #fff;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-img input[type="file"] {
    opacity: 0;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.whatsapp-videocall .input-main-div i {
    color: #fff;
}

.vcall_setting .switch+span {
    margin-right: 0;
}

.whatsapp-videocall .all_footer_wp {
    margin: 0;
}

.whatapp-android-footer.wp-video-footer .iphone_bluetooth,
.whatapp-android-footer.wp-video-footer.wp-ios-video-footer .iphone_bluetooth {
    display: none;
}

.whatapp-android-footer.wp-video-footer .iphone_bluetooth.connect {
    display: none;
}

.whatapp-android-footer.wp-video-footer.wp-ios-video-footer .iphone_bluetooth.connect {
    display: block;
}

.whatapp-android-footer.wp-video-footer.wp-ios-video-footer .iphone_bluetooth.connect~.unmute_audio {
    display: none;
}

.off_camera .voice_waves {
    position: relative;
    margin-top: 15px;

}

.off_camera .voice_waves .sound {
    width: 120px;
    height: 20px
}

.off_camera2 .voice_waves_sec {
    position: absolute;
    z-index: 6;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.off_camera2 .voice_waves_sec .sound {
    width: 50px;
    height: 10px;
}

.mute_msg.msg_2.both_check+.off_camera2 {
    top: 15px;
    transform: unset;
}

.mute_msg.msg_2.both_check {
    top: unset;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6px;
}

.both_on .sound {
    width: 120px;
    height: 25px;
    margin-top: 10px;
}

.camera_off .both_on {
    display: none;
}

.camera_off.both_check .both_on {
    display: block;
}

.camera_off.both_check .voice_waves,
.camera_off.both_check .msg_1 {
    display: none !important;
}

.profile_call_1 .btn-remove {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
}

.profile_call_2 .btn-remove {
    width: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
}

.vcall-time .form-group {
    margin: 0;
}

.layout_radio {
    display: flex;
    gap: 20px;
}


.flex-row {
    display: flex;
    flex-wrap: wrap;
}

.video_call_options .select-list .network {
    display: flex;
    align-items: center;
    gap: 10px
}

.video_call_options .checkbox-grp .checkbox {
    white-space: nowrap;
    margin: 0;
}

.left-part.video_call_options {
    box-shadow: none;
}

.social-page .video_call_options .radio-grp {
    border: 1px solid #ccc;
    padding: 10px;
}

.social-page .video_call_options .radio-grp .fb_post_d_block {
    position: absolute;
    top: -12px;
    background: #f9f9f9;
    padding: 0 5px
}

.video_call_options .wp_lg_clock .select-list,
.video_call_options .vcall-time,
.video_call_options .header_bt_op {
    border: 1px solid #ccc;
    padding: 15px 10px 10px;
    position: relative;
    margin-top: 25px;
}

.video_call_options .wp_lg_clock .select-list .nw_label,
.video_call_options .vcall-time label {
    position: absolute;
    top: -11px;
    background-color: #f9f9f9;
    padding: 0 5px;
}

.video_call_options .battery {
    display: flex;
    gap: 10px;
    align-items: center;
}

.video_call_options .battery .select-list,
.video_call_options .battery .Battery-percent-wrap {
    width: 50%;
    margin: 0;
}

.video_call_options .battery .form-control {
    height: 34px;
    padding: 6px 10px;
}

.video_call_options .header_bt_op .bt_label {
    position: absolute;
    top: -11px;
    background-color: #f9f9f9;
    padding: 0 5px;
}

.video_call_options .header_bt_op .checkbox {
    margin-bottom: 0;
}

.live-box.vcall_live {
    margin-bottom: 10px;
}

.img-sec-main .img-description.col-12 {
    width: 100%;
}

.description .img-sec-main .img-sec {
    width: 40%;
    text-align: end;
}

.description .img-sec-main .img-description {
    width: 60%;
}

.description .img-sec-main .img-description p {
    width: 500px;
}

.description .img-sec-main {
    margin-bottom: unset !important;
}


.profile_call_1.camera_off .img-input,
.profile_call_2.camera_off .img-input {
    pointer-events: none;
}

/* ============ whatsapp chat list generator start============ */

.chat-list-modal .right-part #download,
.chat-list-modal #preview-modal-content {
    width: 375px;
}

.chat-list .whatsapp-chat.group-chat {
    width: 370px !important;

}

.chat-list .whatsapp.whatsapp-chat .android-header .status-bar {
    background-color: var(--white);
}

.chat-list .status-bar-left,
.chat-list .status-bar-right {
    color: var(--dark-color);
}

.chat-list .android-header.white-content .status-bar .battery-status,
.chat-list .android-header.white-content .status-bar {
    color: var(--dark-color);
}

.chat-list .android-header.white-content .status-bar .battery {
    border-color: var(--dark-color);
}

.chat-list .android-header.white-content .battery-level,
.chat-list .android-header.white-content .battery:before {
    background-color: var(--dark-color);
}

.chat-list .android-header .battery-container.battery-vertical-one .battery::before {
    background: linear-gradient(var(--white) 30%, transparent 30%, transparent 70%, var(--white) 70%);
}


.main-wp-header p {
    font-size: 22px;
    margin: 0;
    color: var(--green);
    font-weight: 600;
}

.chat-list .whatsapp .wp-android-header .modal-header {
    padding: 20px 15px;
    background: var(--white);
}


.main-wp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.main-wp-header .left-side-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.main-wp-header .left-side-header .qr-code {
    background-position: -62px -30px;
}

.main-wp-header .left-side-header .camera {
    background-position: -94px 1px;
}

.main-wp-header .left-side-header .dots {
    background-position: -64px 1px;
}

.dark-theme .main-wp-header .left-side-header .qr-code {
    background-position: -30px -124px;
}

.dark-theme .main-wp-header .left-side-header .camera {
    background-position: -62px -124px;
}

.dark-theme .main-wp-header .left-side-header .dots {
    background-position: -98px -124px;
}

/* .chat-list .whatsapp.whatsapp-chat .whatsapp-body {
    padding: 0 15px;
} */

.chat-list .whatsapp.whatsapp-chat .whatsapp-body,
.chat-list .whatsapp.whatsapp-chat .whatapp-android-footer {
    background-color: var(--white);
}

.chat-list .whatsapp .whatapp-android-footer .post_write_comment {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--gray);
}

.chat-list .whatsapp .whatapp-android-footer {
    padding: 0;
}

.post_write_comment .ft-box p {
    margin: 0;
    font-weight: 600;
    color: var(--dark-color);
}

.post_write_comment .ft-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
}

.common-img {
    width: 30px;
    height: 30px;
    background-image: url(/assets/images/wp-chat-list.png);
    background-size: 220px;
    /* display: inline-block; */
}

.ft-box .chats {
    background-position: -2px -125px;
}

.dark-theme .ft-box .chats {
    background-position: -126px 0px;
}

.chat-active {
    padding: 3px 15px;
    border-radius: 20px;
    background-color: var(--light-green);
    position: relative;
}

.chat-active .total-msg {
    border-radius: 50%;
    background-color: var(--dark-green);
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 2px;
    right: 10px;
}

.chat-active .total-msg p,
.calls .total-calls p {
    margin: 0;
    font-size: 12px;
    color: var(--white);
}

.calls .total-calls {
    border-radius: 50%;
    background-color: var(--dark-green);
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    right: -2px;
}

.ios-call .total-calls,
.ios-chat .total-msg {
    border-radius: 50%;
    background-color: var(--dark-green);
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    right: -9px;
}

.ios-call .total-calls p,
.ios-chat .total-msg p {
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--white) !important;
}



.ios-ft-box {
    position: relative;
}

.ios-ft-box.updates-available .check-update {
    border-radius: 50%;
    background-color: var(--dark-green);
    width: 8px;
    height: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 6px;
    right: 5px;
}


.ft-box .updates {
    background-position: -60px -60px;
    height: 35px;
}

.ft-box.updates-available .check-updates {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--dark-green);
    position: absolute;
    right: 3px;
    top: 1px;
}

.ft-box .communities {
    background-position: -140px -65px;
    height: 35px;
    background-size: 240px;
}

.ft-box .calls {
    background-position: 2px -23px;
    height: 35px;
    background-size: 190px;
}

.dark-theme .ft-box .updates {
    background-position: -125px -125px;
}

.dark-theme .ft-box .communities {
    background-position: -174px -99px;

}

.dark-theme .ft-box .calls {
    background-position: -162px -74px;
}

.add-message .add-message-input-btn {
    height: auto;
    line-height: 1.2;
}

.ai-sec {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    position: absolute;
    bottom: 105px;
    right: 15px;
    z-index: 5;
}

.ai-sec .btn-space {
    margin-bottom: 20px;
}

.ai-sec .ai img {
    width: 30px;
    height: 30px;
}

.ai-sec .ai {
    width: 50px;
    height: 50px;
    background-color: var(--ai-bg);
    /* padding: 15px; */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}

.ai-sec .add-plus {
    width: 60px;
    height: 60px;
    background-color: var(--dark-green);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ai-sec .add-plus .msg-add-icon {
    background-position: -157px -127px;
}

.dark-theme .ai-sec .add-plus .msg-add-icon {
    background-position: -95px -95px;

}

.chat-list .main-search {
    padding: 0 15px;
}

.search-bar {
    background-color: var(--ai-bg);
    padding: 15px;
    width: 100%;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-bar span {
    font-size: 16px;
    color: var(--android-gray);
}

.search-bar .glass {
    background-position: -30px -3px;
    width: 20px;
    height: 20px;
    background-size: 190px;
}

.chat-list .message-box {
    padding: 0 0px 0 15px;
    position: relative;
}

.chat-list .message-box:not(:first-child) {
    padding-top: 15px;
}


.chat-list .message-box p {
    margin: 0;
}

.chat-list .message-box .main-msg-sec .chat-profile {
    position: relative;
}

.chat-list .message-box .main-msg-sec .chat-profile .chat-profile-img {
    width: 50px;
    height: 50px;
    background-image: url(../../images/profile.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin: 2px;
}

/* .chat-list .message-box .main-msg-sec .chat-profile img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
} */

.chat-list .whatsapp-body-ios .message-box .main-msg-sec .chat-profile .chat-profile-img {
    width: 55px;
    height: 55px;
    max-width: 100%;
    max-height: 100%;
}

.chat-list .whatsapp-body-ios .message-box .main-msg-sec .chat-profile {
    margin-top: -22px;
    /* width: 55px;
    height: 55px; */
}

.chat-list .message-box .main-msg-sec {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-list .message-box .main-msg-sec .msg-detail {
    width: 100%;
    overflow: hidden;
    padding-right: 15px;
}

.chat-list .whatsapp-body-ios .message-box .main-msg-sec .msg-detail {
    padding: 0 15px 10px 0;
    border-bottom: 1px solid var(--border-gray);
    height: 85px;

}

.chat-list .whatsapp-body-ios .message-box {
    padding-top: 10px;
}

.msg-detail .profile-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.msg-detail .profile-user .user-name p {
    color: var(--dark-color);
    font-weight: 600;
}

.msg-detail .profile-user .user-name {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tab-tool {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 25px 0 10px;
    padding: 0 15px;
}

.tab-tool .tabs {
    padding: 5px 9px;
    border-radius: 20px;
    background-color: var(--ai-bg);
    white-space: nowrap;
}

.tab-tool .tabs p {
    margin: 0;
    color: var(--android-gray);
}

.tab-tool .tabs.all {
    background-color: var(--light-green);
}

.tab-tool .tabs.all p {
    color: var(--dark-green);
}

.tab-tool .text-unseengrp {
    width: 50px;
    color: #000 !important;
}

.tab-tool .tabs .plus {
    background-position: -65px -22px;
    background-size: 150px;
    width: 20px;
    height: 20px;
}

.main-user-msg {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    justify-content: space-between;
}

/* ------- pin ------ */
.main-user-msg .pin-chat {
    background-position: -95px -222px;
    background-size: 173px;
}

.dark-theme .main-user-msg .pin-chat {
    background-position: -118px -222px;
}

/* ---image---- */
.main-user-msg .image-icon {
    width: 25px;
    height: 25px;
    background-position: -56px -82px;
    background-size: 190px;
    margin-bottom: -7px;
    display: inline-block;
}

.dark-theme .main-user-msg .image-icon {
    background-position: -138px -136px;
}

.main-user-msg .gif-icon {
    width: 25px;
    height: 25px;
    background-position: -102px -335px;
    background-size: 180px;
    margin-bottom: -7px;
    display: inline-block;
}

.dark-theme .main-user-msg .gif-icon {
    background-position: -128px -335px;
}

.main-user-msg .contact-icon {
    width: 22px;
    height: 22px;
    background-position: -35px -592px;
    background-size: 130px;
    margin-bottom: -5px;
    display: inline-block;
}

.dark-theme .main-user-msg .contact-icon {
    background-position: -52px -592px;
}

.main-user-msg .sticker-icon {
    width: 22px;
    height: 22px;
    background-position: 2px -611px;
    background-size: 130px;
    margin-bottom: -5px;
    display: inline-block;
}

.dark-theme .main-user-msg .sticker-icon {
    background-position: -17px -611px;
}

/* ---video---- */
.main-user-msg .video-icon {
    width: 30px;
    height: 30px;
    background-position: -143px 4px;
    background-size: 170px;
    margin-bottom: -9px;
    display: inline-block;
}

.dark-theme .main-user-msg .video-icon {
    background-position: -95px -120px;
}

/* ---file---- */
.main-user-msg .file-icon {
    width: 26px;
    height: 30px;
    background-position: -66px -43px;
    background-size: 160px;
    margin-bottom: -10px;
    display: inline-block;
}

.dark-theme .main-user-msg .file-icon {
    background-position: -135px -88px;
    height: 28px;
}

/* ---- location--- */
.main-user-msg .location-icon {
    width: 28px;
    height: 30px;
    background-position: -111px -19px;
    background-size: 160px;
    margin-bottom: -11px;
    display: inline-block;
}

.dark-theme .main-user-msg .location-icon {
    background-position: -20px -135px;
}

/* ---- delete msg--- */
.main-user-msg .delete-msg-icon {
    width: 25px;
    height: 25px;
    background-position: -86px -63px;
    background-size: 150px;
    margin-bottom: -7px;
    display: inline-block;
}

.dark-theme .main-user-msg .delete-msg-icon {
    background-position: -42px -127px;
}


.main-user-msg .audio-icon {
    width: 25px;
    height: 25px;
    background-position: 2px 1px;
    margin-bottom: -7px;
    background-size: 150px;
    display: inline-block;
}

.dark-theme .main-user-msg .audio-icon {
    background-position: -127px -106px;
}


.main-user-msg .react-icon {
    width: 25px;
    height: 25px;
    background-position: 2px -45px;
    background-size: 160px;
    margin-bottom: -7px;
    display: inline-block;
}

.dark-theme .main-user-msg .react-icon {
    background-position: -66px -113px;
}

.main-user-msg .receive-vcall-icon {
    width: 26px;
    height: 26px;
    background-position: -97px -22px;
    background-size: 170px;
    margin-bottom: -7px;
    display: inline-block;
}

.dark-theme .main-user-msg .receive-vcall-icon {
    background-position: -1px -121px;
}

.main-user-msg .send-vcall-icon {
    width: 26px;
    height: 26px;
    background-position: -97px -241px;
    background-size: 170px;
    margin-bottom: -7px;
    display: inline-block;
}

.dark-theme .main-user-msg .send-vcall-icon {
    background-position: -121px -241px;
}

.main-user-msg .missed-vcall-icon {
    width: 26px;
    height: 26px;
    background-position: -24px -121px;
    background-size: 170px;
    margin-bottom: -7px;
    display: inline-block;
}

.dark-theme .main-user-msg .missed-vcall-icon {
    background-position: -47px -121px;
}

.main-user-msg .missed-voice-icon {
    width: 26px;
    height: 26px;
    background-position: -48px -340px;
    background-size: 170px;
    margin-bottom: -7px;
    display: inline-block;
}

.dark-theme .main-user-msg .missed-voice-icon {
    background-position: -73px -340px;
}

.main-user-msg .receive-voice-icon {
    width: 26px;
    height: 20px;
    background-position: 2px -340px;
    background-size: 170px;
    margin-bottom: -3px;
    display: inline-block;
}

.dark-theme .main-user-msg .receive-voice-icon {
    background-position: -25px -340px;
}

.main-user-msg .send-voice-icon {
    width: 26px;
    height: 26px;
    background-position: 2px -316px;
    background-size: 170px;
    margin-bottom: -7px;
    display: inline-block;
}

.dark-theme .main-user-msg .send-voice-icon {
    background-position: -24px -316px;
}

.chat-box .chat-profile .timer-icon {
    display: none;

}

.chat-box.msg-timer .chat-profile .timer-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--white);
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: block;
}

.chat-box.msg-timer .chat-profile .timer-icon .common-img {
    width: 26px;
    height: 26px;
    background-position: 26px -283px;
    background-size: 180px;
}

.dark-theme .chat-box.msg-timer .chat-profile .timer-icon .common-img {
    background-position: 26px -309px;
}

.status-unseen .chat-profile {
    border-radius: 50%;
    border: 2px solid var(--dark-green);
}

.status-seen .chat-profile {
    border-radius: 50%;
    border: 2px solid var(--light-gray);
}

.main-user-msg .user-msg {
    display: inline;
    width: 100%;
    color: var(--android-gray);
}

.main-user-msg .user-msg .msgTxtIphone {
    display: none;
}

.pin-msg-count-box {
    display: flex;
    align-items: center;
}

.msg-detail .profile-user .msg-time p {
    color: var(--android-gray);
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.msg-detail .profile-user .msg-time {
    display: flex;
    align-items: center;
    gap: 5px;
}

.message-box.chat-group .member-name {
    display: inline;
}

.message-box.chat-group .member-name p {
    color: var(--android-gray);
    display: inline;
}

.message-box.unseen-msg .msg-detail .profile-user .msg-time p {
    color: var(--dark-green);
}

.main-user-msg .unseen {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-user-msg .unseen p {
    margin: 0;
    color: var(--white);
    font-size: 14px;
    border-radius: 50%;
    background-color: var(--dark-green);
    line-height: unset;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ---------- iphone design---------- */


.chat-list .ios-header .status-bar {
    background-color: var(--white);
}

.chat-list .wp-ios-header {
    padding: 15px;
    background-color: var(--white);
}

.chat-list .wp-ios-header .main-header-div .left-header .ios-dots {
    background-position: 31px -64px;
}

.chat-list .wp-ios-header .main-header-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-list .wp-ios-header .main-header-div .left-header {
    background-color: var(--grey);
    border-radius: 50%;
}

.chat-list .wp-ios-header .main-header-div .right-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-list .wp-ios-header .main-header-div .right-header .ios-camera {
    background-color: var(--grey);
    border-radius: 50%;
    display: flex;
    justify-content: center;
}

.chat-list .wp-ios-header .main-header-div .right-header .ios-camera .common-img {
    background-position: 57px 1px;
    background-size: 190px;
}


.chat-list .wp-ios-header .main-header-div .right-header .ios-add {
    background-color: var(--dark-green);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
}

.chat-list .wp-ios-header .main-header-div .right-header .ios-add .common-img {
    background-position: 46px -133px;
    background-size: 160px;
    width: 26px;
    height: 26px;
}

.dark-theme .wp-ios-header .main-header-div .left-header .ios-dots {
    background-position: 219px -222px;
}

.dark-theme .wp-ios-header .main-header-div .right-header .ios-camera .common-img {
    background-position: 28px -162px;
}

.dark-theme .wp-ios-header .main-header-div .right-header .ios-add .common-img {
    background-position: 71px -133px;
}

.chat-list .wp-ios-header p {
    margin: 10px 0 0;
    font-size: 30px;
    font-weight: 600;
    color: var(--dark-color);
}

.chat-list .whatsapp-body-ios .search-bar {
    border-radius: 10px;
    padding: 12px 15px;
    background-color: var(--grey);
}

.chat-list .whatsapp-body-ios .search-bar span {
    color: var(--ios-gray);
}

.tab-tool {
    margin: 15px 0;
    overflow-x: auto;
}

.tab-tool::-webkit-scrollbar {
    display: none;
}

.whatsapp-body-ios .tab-tool .tabs {
    padding: 5px 12px;
    white-space: nowrap;
}

.whatsapp-body-ios .tab-tool .tabs p {
    font-size: 16px;
    color: var(--ios-gray);
}

.whatsapp-body-ios .msg-detail .profile-user .user-name p {
    font-size: 18px;
}

.whatsapp-body-ios .msg-detail .profile-user .msg-time p {
    font-size: 15px;
    font-weight: 500;
}

.whatsapp-body-ios .main-user-msg .user-msg,
.whatsapp-body-ios .message-box.chat-group .member-name p {
    font-size: 15px;
}

.main-footer.iphone-ft .ai-sec .add-plus {
    display: none;
}

.main-footer.iphone-ft .ai-sec {
    bottom: 115px;
}

.main-footer.iphone-ft .ai-sec .ai {
    background-color: var(--grey);
    border-radius: 50%;
}

.main-footer.iphone-ft .whatapp-ios-footer .ios-footer {
    justify-content: space-between;
    padding: 5px 15px;
    height: unset;
    border: 1px solid var(--border-gray);
}

.main-footer.iphone-ft .whatapp-ios-footer .ios-footer .ios-updates {
    background-position: -94px -219px;
}

.dark-theme .main-footer.iphone-ft .whatapp-ios-footer .ios-footer .ios-updates {
    background-position: -125px -219px;
}

.main-footer.iphone-ft .whatapp-ios-footer .ios-footer .ios-call {
    background-position: 0px -93px;
}

.dark-theme .main-footer.iphone-ft .whatapp-ios-footer .ios-footer .ios-call {
    background-position: 0px -250px;
}

.main-footer.iphone-ft .whatapp-ios-footer .ios-footer .ios-communication {
    background-position: 184px -297px;
    background-size: 260px;
    width: 34px;
}

.dark-theme .main-footer.iphone-ft .whatapp-ios-footer .ios-footer .ios-communication {
    background-position: 150px -297px;
}

.main-footer.iphone-ft .whatapp-ios-footer .ios-footer .ios-chat {
    background-position: 69px -75px;
    background-size: 260px;
}

.dark-theme .main-footer.iphone-ft .whatapp-ios-footer .ios-footer .ios-chat {
    background-position: 220px -262px;
}

.main-footer.iphone-ft .whatapp-ios-footer .ios-footer .ios-setting {
    background-position: -33px -30px;

}

.dark-theme .main-footer.iphone-ft .whatapp-ios-footer .ios-footer .ios-setting {
    background-position: -64px -219px;
}


.main-footer.iphone-ft .whatapp-ios-footer .ios-footer .ios-ft-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-footer.iphone-ft .whatapp-ios-footer .ios-footer .ios-ft-box p {
    margin: 0;
    font-size: 12px;
    color: var(--ios-gray);
}

.main-footer.iphone-ft .whatapp-ios-footer {
    background-color: var(--ios-bg);
}


.whatsapp-body-ios .main-user-msg .image-icon {
    width: 26px;
    height: 26px;
    background-position: -2px -233px;
    background-size: 180px;
    display: inline-block;
}

.dark-theme .whatsapp-body-ios .main-user-msg .image-icon {
    background-position: -28px -233px;
}


.whatsapp-body-ios .main-user-msg .contact-icon {
    width: 22px;
    height: 22px;
    background-position: 4px -592px;
    background-size: 130px;
    margin-bottom: -5px;
    display: inline-block;
}

.dark-theme .whatsapp-body-ios .main-user-msg .contact-icon {
    background-position: -17px -592px;
}

.whatsapp-body-ios .main-user-msg .sticker-icon {
    width: 22px;
    height: 22px;
    background-position: -36px -611px;
    background-size: 130px;
    margin-bottom: -5px;
    display: inline-block;
}

.dark-theme .whatsapp-body-ios .main-user-msg .sticker-icon {
    background-position: -56px -611px;
}

.whatsapp-body-ios .main-user-msg .gif-icon {
    width: 26px;
    height: 26px;
    background-position: -100px -361px;
    background-size: 180px;
    margin-bottom: -7px;
    display: inline-block;
}

.dark-theme .whatsapp-body-ios .main-user-msg .gif-icon {
    background-position: -126px -361px;
}

/* ---video---- */
.whatsapp-body-ios .main-user-msg .video-icon {
    width: 26px;
    height: 26px;
    background-position: -1px -259px;
    background-size: 180px;
    display: inline-block;
}

.dark-theme .whatsapp-body-ios .main-user-msg .video-icon {
    background-position: -27px -259px;
}

/* ---file---- */
.whatsapp-body-ios .main-user-msg .file-icon {
    width: 26px;
    height: 26px;
    background-position: -44px -199px;
    background-size: 155px;
    display: inline-block;
}

.dark-theme .whatsapp-body-ios .main-user-msg .file-icon {
    background-position: -64px -198px;
}

/* ---- location--- */
.whatsapp-body-ios .main-user-msg .location-icon {
    width: 30px;
    height: 27px;
    background-position: -24px -52px;
    background-size: 180px;
    display: inline-block;
}

.dark-theme .whatsapp-body-ios .main-user-msg .location-icon {
    background-position: -24px -207px;
}


/* ---- delete msg--- */
.whatsapp-body-ios .main-user-msg .delete-msg-icon {
    width: 25px;
    height: 25px;
    background-position: -106px -170px;
    background-size: 150px;
    display: inline-block;
}

.dark-theme .whatsapp-body-ios .main-user-msg .delete-msg-icon {
    background-position: -128px -170px;
}

.whatsapp-body-ios .main-user-msg .pin-chat {
    background-position: -46px -243px;
    background-size: 170px;
}

.dark-theme .whatsapp-body-ios .main-user-msg .pin-chat {
    background-position: -69px -242px;
}

.whatsapp-body-ios .main-user-msg .audio-icon {
    width: 24px;
    height: 24px;
    background-position: -21px -63px;
    background-size: 150px;
    display: inline-block;
}

.dark-theme .whatsapp-body-ios .main-user-msg .audio-icon {
    background-position: -86px -170px;
}


.whatsapp-body-ios .main-user-msg .react-icon {
    width: 25px;
    height: 25px;
    background-position: -115px -160px;
    background-size: 160px;
    display: inline-block;
}

.dark-theme .whatsapp-body-ios .main-user-msg .react-icon {
    background-position: -138px -160px;
}

.whatsapp-body-ios .main-user-msg .receive-vcall-icon {
    width: 28px;
    height: 28px;
    background-position: -102px -310px;
    background-size: 180px;
    margin-bottom: -10px;
    display: inline-block;
}

.dark-theme .whatsapp-body-ios .main-user-msg .receive-vcall-icon {
    background-position: -128px -310px;
}

.whatsapp-body-ios .main-user-msg .send-vcall-icon {
    width: 28px;
    height: 28px;
    background-position: -102px -283px;
    background-size: 180px;
    margin-bottom: -10px;
    display: inline-block;

}

.dark-theme .whatsapp-body-ios .main-user-msg .send-vcall-icon {
    background-position: -129px -284px;

}


.whatsapp-body-ios .main-user-msg .missed-vcall-icon {
    width: 28px;
    height: 28px;
    background-position: -154px -231px;
    background-size: 180px;
    display: inline-block;
}

.dark-theme .whatsapp-body-ios .main-user-msg .missed-vcall-icon {
    background-position: -154px -256px;
}

.whatsapp-body-ios .main-user-msg .missed-voice-icon {
    width: 26px;
    height: 26px;
    background-position: -55px -302px;
    background-size: 190px;
    display: inline-block;
}

.dark-theme .whatsapp-body-ios .main-user-msg .missed-voice-icon {
    background-position: -82px -302px;
}

.whatsapp-body-ios .main-user-msg .receive-voice-icon {
    width: 26px;
    height: 26px;
    background-position: 2px -302px;
    background-size: 190px;
    margin-bottom: -9px;
    display: inline-block;
}

.dark-theme .whatsapp-body-ios .main-user-msg .receive-voice-icon {
    background-position: -28px -302px;
}

.whatsapp-body-ios .main-user-msg .send-voice-icon {
    width: 26px;
    height: 26px;
    background-position: 1px -330px;
    background-size: 190px;
    display: inline-block;
}

.dark-theme .whatsapp-body-ios .main-user-msg .send-voice-icon {
    background-position: -28px -330px;
}

.whatsapp-body-ios .main-user-msg .user-msg {
    color: var(--ios-gray);
}

/* ============== modal css start ============ */
.post-profile-box {
    position: relative;
}

.post-profile-box .profile-img {
    max-width: 300px;
    max-height: 300px;
    margin: 0 auto 30px auto;
    border: 2px dashed #b5b5b5;
    border-radius: 8px;
    display: block;
    z-index: 1;
}

.post-profile-box .profile-img .privew_profile {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.input-img img {
    flex-shrink: 0;
    min-height: 100%;
    min-width: 100%;
    max-width: 200%;
    max-height: 150%;
}

.input-img.profile-img {
    height: 100px;
    width: 100px;
    margin: auto;
}

.chat-list-modal .messagetaboptions .d-flex {
    align-items: center;
}

.chat-list-modal label {
    font-weight: 400;
}

.status-switch {
    margin-left: 10px;
}

.status-switch .radio {
    margin-bottom: 5px !important;
    margin-top: 0;
}

.chat-list-modal .head-text {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px;
}

.grp_name_feild {
    display: none;
}

.chat-list-modal .message-time-input {
    display: none;
}

.keyboard-popup.chat-list-modal .message-label {
    padding-left: 0;
}




.footer-chat-option {
    display: flex;
    gap: 25px;
    margin-top: 20px;
    align-items: center;
}

.msg-count-box input {
    width: 90px;
    font-weight: 400;
    margin-top: 5px;
}

.footer-chat-option .checkbox {
    max-height: 20px;
    height: auto;
}

.footer-chat-option .add-message-input-btn {
    margin: 0;
}

.footer-chat-option .total-msg-count {
    display: flex;
    align-items: center;
    gap: 15px;
}

.edit-delete {
    padding: 5px 0;
    position: absolute;
    top: 0;
    /* background: var(--light-green); */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    left: 0;
    visibility: hidden;
    border-radius: 10px 10px 0 0;
    /* background: linear-gradient(180deg, rgb(91 184 41 / 0%) 0%, rgb(132 198 96 / 85%) 4%, rgba(227, 255, 230, 1) 71%) */
    background: linear-gradient(180deg, rgba(0, 170, 102, 0.6278886554621849) 31%, rgba(0, 170, 102, 0.29175420168067223) 79%);
    z-index: 2;
}

.edit-delete button {
    background-color: transparent;
    border: none;
    outline: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.message-box:hover .edit-delete,
.message-box.active-hover .edit-delete {
    visibility: visible;
}

.edit-delete button i {
    font-size: 18px;
}

.edit-delete .delete-btn {
    color: #E74C3C;
    background: #FADBD8;
}

.edit-delete .edit-msg {
    color: var(--link-color);
    background-color: #95e0ff;
}


.fixed-msg {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.fixed-msg p {
    color: var(--android-gray);
    font-size: 13px;
    margin: 0;
}

.fixed-msg span {
    font-weight: 600;
    color: var(--dark-green);
}

.fixed-msg .lock-icon {
    background-size: 120px;
    width: 20px;
    height: 20px;
    background-position: -68px 17px;
}

.dark-theme .fixed-msg .lock-icon {
    background-position: -85px 17px;
}


.whatsapp-body-ios .fixed-msg .lock-icon {
    background-size: 120px;
    width: 20px;
    height: 20px;
    background-position: -66px 36px;
}

.dark-theme .whatsapp-body-ios .fixed-msg .lock-icon {
    background-position: -86px 36px;
}

.chat-list-content .description .des-list,
.chat-list-content .des-list {
    list-style-type: disc;
    padding-left: 30px;
}

.chat-list-preview .popup-content {
    max-width: 410px;
}

.chat-list-preview .popup-content .download-btn {
    display: flex;
    justify-content: center;
}



.tool-sug-box .new-icon {
    height: 26px;
    width: 26px;
    border-radius: 8px;
    background: #128C7E;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tool-sug-box .new-icon i {
    color: #fff;
}

.txtIphone {
    display: none;
}

/* ============ whatsapp chat list generator end ============ */

.keyboard-popup-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    width: 100%;
    /* padding: 30px 0 100px;
    max-width: 320px; */
    margin: 0 auto;
}

.keyboard-body {
    background-color: #fff;
    padding: 20px 10px;
    border-radius: 5px;
    width: 100%;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.btn-toggle-wp {
    position: relative;
}

.btn-toggle-wp input {
    position: absolute;
    opacity: 0;
    visibility: hidden;
}

.btn-group-wp {
    display: inline-flex;
    padding: 5px;
    border: 1px solid var(--primery-color);
    border-radius: 60px;
}

.btn-group-wp .btn-toggle-wp:not(:last-child) {
    margin-right: 7px;
}

.btn-group-wp input[type="radio"]:not(:checked)+.btn-toggle.btn:hover,
.btn-group-wp input[type="radio"]:not(:checked)+.btn-toggle {
    background-color: transparent;
    color: #7c7c7c !important;
    border: 0;
    box-shadow: none;
}

.btn-toggle-wp .btn-toggle {
    height: auto;
    border: 0;
    padding: 5px 15px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 5px 5px 2px rgb(148 169 195 / 60%);
    transition: box-shadow 0.3s;
}

.btn-toggle-wp .btn-toggle:hover {
    border: 0;
}


/* ================ new popup css start ================== */


.keyboard-popup .head-text {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.keyboard-popup .head-text button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    background-color: #ff6363;
    border-color: #ff6363 !important;
}

.keyboard-popup .head-text button:hover {
    background-color: red;
}

.keyboard-popup .head-text button i {
    margin: 0;
}

.keyboard-popup .pre-reply-text:not([style="display: none;"]) {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-right: 6px;
}

.keyboard-popup textarea {
    width: 100%;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    resize: none;
    padding: 5px;
    margin-bottom: 5px;
}

.keyboard-popup .time-label {
    position: relative;
    display: block;
    width: 100%;
}


.keyboard-popup .head-text button {
    display: none;
}

.keyboard-popup .message-label {
    padding-left: 8px;
}

.keyboard-popup .time-label label {
    position: absolute;
    font-weight: 500;
    top: -10px;
    left: 6px;
    background: #fff;
    padding: 0 7px;
}

.keyboard-popup select.form-control,
.keyboard-popup .time-label input {
    position: relative;
    height: 40px;
    width: 100%;
    display: block;
    padding: 9px 10px;
    color: #252525;
    background-color: #ffffff;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    box-shadow: none;
    line-height: normal;
}

.keyboard-popup .title-name .time-label {
    margin: 5px 0;
    position: relative;
}

.keyboard-popup .title-name.name-input {
    display: none;
}

.keyboard-popup .whatsapp-text {
    box-shadow: unset;
}

.desktop_view .keyboard-popup .title-name .time-label {
    margin-left: 1px;
}

.keyboard-popup .title-name input {
    padding: 7px 5px;
    margin-bottom: 20px;
}

.keyboard-popup .fa-paint-brush {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


.keyboard-popup.whatsapp-chat-popup .head-text {
    justify-content: center;
}

.keyboard-popup.whatsapp-chat-popup .btn-group-wp {
    border: unset;
    box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 25%);
    border-radius: 10px;
    padding: 0;
}

.keyboard-popup.whatsapp-chat-popup .btn-group-wp .btn-toggle {
    background-color: rgba(0, 161, 176, .15);
    color: var(--primery-color);
    font-weight: 600;
    box-shadow: unset;
    border-radius: 10px 0 0 10px;
}

.keyboard-popup.whatsapp-chat-popup .btn-group-wp .btn-toggle:hover {
    color: var(--primery-color) !important;
    opacity: 1;
}


.keyboard-popup.whatsapp-chat-popup .btn-toggle-wp.message-receive-tab .btn-toggle {
    border-radius: 0 10px 10px 0;
}


.keyboard-popup.whatsapp-chat-popup .message-label {
    padding-left: 0;
}

.modalAdvancedOption {
    display: none;
}

.whatsapp-chat-section,
.whatsapp-chat-list-section {
    position: relative;
}

.keyboard-popup {
    position: sticky;
    top: 200px;
}

.remove-padding {
    padding: 0 10px;
}


.change_reset .add-message-input-btn {
    display: none;
}

.main-ft i {
    display: none;
}

.add-message {
    /* display: none; */
    visibility: hidden;
    opacity: 0;
    height: 0;
}



/* ================new popup css end ================== */

/* ============== New css end (23-02-2024)============ */





/* preview popup css start */
.preview-popup {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 10000;
    -webkit-transform: translateZ(10);
    overflow-x: hidden;
}

.popup-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    width: 100%;
    padding: 30px 0 100px;
    max-width: 400px;
    margin: 0 auto;
}

.popup-body {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    width: auto;
    min-width: 300px;
}

.pop-header {
    position: relative;
}

.pop-header p {
    font-size: 24px;
    padding: 20px 0;
    margin: 0;
}

.close-modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    height: 30px;
    background-color: #ff6363 !important;
    border-color: #ff6363 !important;
    position: absolute;
    right: 15px;
    top: 8px;
    color: #fff;
}

.close-modal-btn i {
    margin: 0;
}

.preview-popup .right-part {
    padding: 5px;
}

.pop-content .message-box:hover .edit-delete {
    display: none;
}

.preview-download-btn {
    border: 1px solid var(--primery-color);
    font-size: 14px;
    line-height: 24px;
    text-transform: capitalize;
    padding: 5px 12px;
    background: var(--primery-color);
    color: #fff;
}

.preview-download-btn:hover {
    opacity: 0.8;
    background: var(--primery-color);
    border: 1px solid var(--primery-color);
    color: #ffffff !important;
}

/* preview popup css end */


.frame {
    position: relative;
    width: 360px;
    max-width: 1000px;
    margin: 0 auto;
}

.frame .whatsapp {
    border: 10px solid #000 !important;
    border-radius: 35px;
    width: 370px !important;
}

.frame.iphone-layout .whatsapp {
    border-radius: 50px;
}

.frame .camera-dot {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: #2b2a2a;
    border-radius: 50%;
    border-radius: 50%;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
}

.frame.iphone-layout .camera-dot {
    width: 90px;
    height: 23px;
    border-radius: 15px;
}

.frame.iphone-layout .wp-ios-header .modal-header {
    min-height: 65px;
}

.frame::after {
    position: absolute;
    content: '';
    width: 5px;
    height: 100px;
    background-color: #000;
    top: 130px;
    right: -14px;
    border-radius: 0 5px 5px 0;
}

.frame.iphone-layout::after {
    right: unset;
    left: -5px;
    border-radius: 5px 0 0 5px;
    height: 40px;
}

.frame::before {
    position: absolute;
    content: '';
    width: 5px;
    height: 60px;
    background-color: #000;
    top: 270px;
    right: -14px;
    border-radius: 0 5px 5px 0;
}

.frame.iphone-layout::before {
    height: 100px;
    top: 200px;
}

.frame.iphone-layout .all_header_wp {
    border-radius: 40px 40px 0 0;
    overflow: hidden;
}


.frame.iphone-layout .wp-ios {
    padding-top: 5px;
    background: var(--ios-bg);
}

.frame.iphone-layout .screen-switch-one {
    position: absolute;
    content: '';
    width: 5px;
    background-color: #000;
    top: 190px;
    left: -5px;
    border-radius: 5px 0 0 5px;
    height: 60px;
}

.frame.iphone-layout .screen-switch-two {
    position: absolute;
    content: '';
    width: 5px;
    background-color: #000;
    top: 270px;
    left: -5px;
    border-radius: 5px 0 0 5px;
    height: 60px;

}

.frame .wp-ios-header.add_space {
    padding-top: 25px;
}

.frame .wp-android.add_space {
    padding-top: 18px;
    background-color: var(--white);
}

.advance-tab .opt-advance {
    color: var(--primery-color);
    font-weight: 600;
    text-align: center;
    margin-top: 15px;
    transition: 0.3s;
}


.advance-tab .opt-advance.active i {
    transform: rotate(180deg);
}

.advance-tab {
    cursor: pointer;
}

.mode-switch {
    position: relative;
    border: none;
    outline: none;
    height: 34px;
    width: 65px;
    cursor: pointer;
    background: #fff;
    /* padding: 10px 13px; */
    border-radius: 50px;
    box-shadow: 0 4px 5px 0 rgb(0 0 0 / .08);
}

.mode-switch .sun {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 20px;
}

.mode-switch .moon {
    font-size: 20px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translate(0, -50%);
}

.mode-switch::before {
    position: absolute;
    content: "";
    left: 10px;
    height: 21px;
    width: 21px;
    background: #ccc;
    border-radius: 50%;
    transition: 0.3s;
    z-index: 1;
    top: 50%;
    transform: translate(0, -50%);
}

.mode-switch.active::before {
    content: "";
    left: calc(100% - 30px);

}

.mode-switch.active {
    background-color: #000;
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drop-down {
    position: relative;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    height: 40px;
    /* width: calc(50% - 5px); */
}

.drop-down .items-select {
    height: 40px;
    position: relative;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
}

.menu-box li {
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    transition: 0.3s;
}

.menu-box li:hover {
    background-color: rgb(0 161 176 / 29%);
}

.menu-box {
    position: absolute;
    top: 38px;
    left: 0;
    background-color: #fff;
    width: 100%;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    z-index: 6;
    display: none;
}

.menu-box.active {
    display: block;
}

.fa-pencil {
    animation: blinkAnimation 1.5s infinite;
}

@keyframes blinkAnimation {
    0% {
        color: #90a4ae;
    }

    50% {
        color: var(--dark-color);
    }

    100% {
        color: #90a4ae;
    }
}

/* ============== new letest design start( 10/02/2026) ================================== */
.space-left {
    margin-left: 75px;
}

.quick-tab.active~.quick-setting {
    display: block;
}

.new-left-panel {
    position: relative;
}

.fake-options {
    background-color: var(--white);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    /* padding: 10px; */
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}


.all-additional-tabbing {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    background-color: #f3f4f6;
    border-radius: 10px 10px 0 0;

}

.all-additional-tabbing .additional-tabs {
    width: calc(100% /3);
    background-color: #f2f2f2;
    border-radius: 10px;
    padding: 8px 0;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    color: #737b8c;
    cursor: pointer;
}

.all-additional-tabbing .additional-tabs:hover {
    /* border: 1px solid var(--primery-color); */
    color: var(--primery-color);
}

.all-additional-tabbing .additional-tabs i {
    font-size: 18px;
}

.all-additional-tabbing .additional-tabs span {
    font-size: 14px;
    font-weight: 600;
}

.all-additional-tabbing .additional-tabs.active {
    border: 1px solid #fff;
    background-color: #fff;
    padding: 15px 0;
    border-radius: 10px 10px 0 0;
    color: var(--primery-color);
}

.quick-tab.active~.quick-setting {
    display: block;
}

.new-left-panel {
    position: relative;
}

.fake-options {
    background-color: var(--white);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    /* padding: 10px; */
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}




.all-additional-tabbing .additional-tabs {
    width: calc(100% /3);
    background-color: #f2f2f2;
    border-radius: 10px;
    padding: 8px 0;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    color: #737b8c;
    cursor: pointer;
}

.all-additional-tabbing .additional-tabs:hover {
    /* border: 1px solid var(--primery-color); */
    color: var(--primery-color);
}

.all-additional-tabbing .additional-tabs i {
    font-size: 18px;
}



.all-additional-tabbing .additional-tabs.active {
    border: 1px solid #fff;
    background-color: #fff;
    padding: 15px 0;
    border-radius: 10px 10px 0 0;

    color: var(--primery-color);
}

.desktop {
    display: block;
}

.mobile {
    display: none;
}

.device-setting-opt {

    padding: 20px;
}

.device-setting {
    display: flex;
    align-items: center;
    gap: 10px;
}

.device-box {
    cursor: pointer;
    transition: all 0.25s ease;
    padding: 7px 10px;
    /* background-color: #f2f2f2; */
    background-color: #fff;
    color: #737b8c;
    border-radius: 7px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    border: 1px solid #d3d3d3;
}

.device-box:hover {
    border-color: var(--primery-color);
}

.device-box.layout-btn {
    padding: 0;
}

.layout-btn span {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.layout-btn span i {
    font-size: 16px;
}

.device-box.layout-btn .radio-pill {
    padding: 7px 10px;
}

.device-box.active,
.call-type.active {
    background: var(--primery-color);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    font-weight: 600;
    border-color: var(--primery-color);
}

.device-box.active.miss {
    background-color: rgba(255, 0, 0, 0.68);
    color: #fff;
    border-color: red;
}

.label-tab {
    font-weight: 600;
    color: #909090;
    margin-bottom: 6px;
    font-size: 14px;
    display: block;
}

.all-setting-option {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.all-setting-option .device-tab .tab-box {
    border: 1px solid rgba(99, 99, 99, 0.2);
}

.all-setting-option .device-tab {
    width: 100%;
    display: flex;
    /* justify-content: center; */
}

.all-setting-option .device-tab .tab-box .all-tab.active {
    background-color: #EDEDED;
}

.all-setting-option .device-tab .tab-box span {
    cursor: pointer;
    padding: 5px 0;
}

.all-setting-option .device-tab .tab-box .missed-tab.active {
    background-color: rgba(255, 0, 0, 0.68);
    color: #fff;
}

.all-setting-option .left-opt,
.all-setting-option .right-opt {
    width: calc(50% - 10px);
}

.radio-pill input[type="radio"] {
    display: none;
}

.radio-pill {
    cursor: pointer;
    width: 100%;
}

.network-part {
    width: 100%;
}

.name-feild {
    width: 50%;
}

.custom-input {
    width: 100%;
    border: 1px solid #d4d4d4;
    font-size: 14px;
    border-radius: 7px;
    padding: 5px 10px;
    background-color: #fff;
    color: #000;
}

.custom-input:focus {
    border-color: var(--primery-color);
}



.clock-part {
    border: 1px solid #dee2e6;
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    padding: 0 5px;
    font-size: 14px;
    height: 35px;
}

.clock-switch {
    display: flex;
    align-items: center;
}

.clock-part .time-box {
    border: none;
    background-color: #f2f2f2;
    height: 30px;
}


.battery-options {
    width: 100%;
}

.all-battery-option {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.all-battery-option .Battery-percent-wrap {
    position: relative;
    width: 130px !important;
    min-width: 110px;
}


.call-time-switch {
    /* background-color: #fff;
    padding: 5px; */
    display: flex;
    width: 100%;
    align-items: center;
    border-radius: 7px;
    padding: 5px 10px;
    background-color: #f2f2f2;

}

.call-time-switch .call-switch-layout.active {
    /* background-color: rgba(0, 161, 176, 0.15); */
    background-color: var(--primery-color);
    color: #fff;
    border-radius: 5px;
}

.call-switch-layout {
    color: #737b8c;
    text-align: center;
    width: 50%;
}


.call-time-input {
    background-color: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 10px;
    width: 100%;
    border-radius: 7px;
    position: relative;
    margin-top: 15px;
}

.custom-time::before {
    position: absolute;
    content: "";
    right: 45px;
    top: -16px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #dedede;
}

.watch-time::before {
    position: absolute;
    content: "";
    left: 45px;
    top: -16px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #dedede;
}

::placeholder {
    font-size: 12px;
}


.watch-time,
.custom-time {
    display: none;
}

.watch-time.active,
.custom-time.active {
    display: block;
}


.caller-name input:focus {
    border-color: var(--primery-color);
}

.call-direction {
    width: 100%;
}

.call-direction .device-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.call-text {
    width: 100%;
}



/* .multiple-simChat .switch-layout{
    width: 100%;
} */



.custom-dropdown {
    background-color: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 10px;
    width: 100%;
    border-radius: 7px;
    position: relative;
    margin-top: 10px;
    display: none;
    transition: 0.5s;
}

.custom-dropdown.show {
    display: block;
}

.custom-dropdown::before {
    position: absolute;
    content: "";
    left: 30px;
    top: -12px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #dedede;
}

.other-opt {
    display: flex;
    gap: 10px;
    width: 100%;
    align-items: center;
}

.other-opt .device-setting {
    gap: 8px;
}

.other-opt .switch-layout {
    width: calc(100% / 3);
}

.other-opt .device-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
}

.device-box .fa-eye-slash {
    display: none;
}

.device-box.active .fa-eye-slash,
.device-box .fa-eye {
    display: block;
}

.device-box.active .fa-eye {
    display: none;
}

.device-box {
    white-space: nowrap;
}

.multiple-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.multiple-simChat,
.voicemail-opt {
    width: 100%;
}



.editable-input {
    display: flex;
    gap: 10px;
    width: 100%;
    flex-direction: column;
}

.editable-input .custom-input {
    background-color: transparent;
}

.edit-setting {
    display: flex;
    width: 100%;
    gap: 10px;
    align-items: center;
}

.header-edit-opt,
.footer-edit-opt,
.search-setting {
    width: 100%;
}

.add-chat-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    gap: 10px;
}

.add-chat-btn .call-send-btn,
.add-chat-btn .reset-call {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.add-chat-btn .reset-call {
    background-color: #d9534f;
    border-color: #d43f3a;
}

.add-chat-btn .reset-call:hover {
    border-color: #ff6363;
    background-color: #ff6363;
}

.allCall-setting,
.more-setting {
    display: none;
}

.device-option-footer {
    /* background-color: #f3f4f6; */
    background-color: #dbdbdb;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
    border-top: 1px solid #e5e7eb;
    display: none;
}

.options-tab-grp {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
}

.options-tab-grp .option-tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--primery-color);
    font-weight: 600;
    background-color: #fff;
    padding: 8px 0;
    border-radius: 10px;
    width: 130px;

}

.options-tab-grp .option-tabs span {
    font-size: 14px;
}

.default-profile {
    background: linear-gradient(180deg, #9AAED5 0%, #8491C4 100%);
    height: 55px;
    width: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.default-profile svg {
    height: 55px;
    width: 45px;
}

.alphabet-box {
    background: linear-gradient(180deg, #9AAED5 0%, #8491C4 100%);
    height: 55px;
    width: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.alphabet-box span {
    font-size: 34px;
    color: #fff;
    font-weight: 600;
}

.profile-pic-setting {
    display: flex;
    align-items: center;
    gap: 15px;
}

.profile-pic-setting .post-profile-box {
    cursor: pointer;
}

.post-profile-box i {
    position: absolute;
    top: -5px;
    right: -7px;
    z-index: 1;
    color: var(--primery-color);
    font-size: 20px;
    display: none;
}

.post-profile-box.active i {
    display: block;
}

.call-time-dropdpwn {
    position: relative;
    width: 100%;
}

.profile-img-opt {
    width: 100%;
}

.filter-box {
    width: 100%;
}

.filter-box {
    display: flex;
    gap: 15px;
}

select,
.input-field-grp {
    width: 100%;
}


select,
.input-field {
    width: 100%;

}

.input-field,
.yesterday-label {
    display: none;
}

.call-time-list {
    width: 100%;
    position: relative;
}

.time-input-field {
    display: block;
}

.drop-down-arrow {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    pointer-events: none;
}

.multiple-simChat .multiple-sim {
    background-color: #a2a2a4;
    margin: 0;
}

.multiple-simChat .device-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.call-sim-type.active .multiple-sim {
    color: #a2a2a4;
    background-color: #fff;
}

.popup-header {
    display: none;
}

.hidden-sticky-buttons.device-option-footer {
    display: none;
}

.main-call-log .post-profile-box .default-profile {
    height: 48px;
    width: 48px;
    max-width: 48px;
    max-height: 48px;
    padding: 4px;
}

.main-call-log .post-profile-box .default-profile svg {
    height: 40px;
    width: 40px;
    /* max-height: 48px; */
}

.main-call-log .alphabet-box {
    height: 48px;
    width: 48px;
}

.main-call-log .alphabet-box span {
    font-size: 28px;
}

.switch-layout {
    background-color: #f7f7f7;
    padding: 7px 10px;
    border-radius: 7px;
    margin-top: 15px;
}

.switch-layout-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #737b8c;
    font-size: 14px;
    font-weight: 600;
}

.switch.switch-hour input:checked+.switch-btn:after {
    content: "24h";
}

.switch.switch-hour .switch-btn:after {
    content: "12h";
}

input:checked+.switch-btn:before {
    left: calc(100% - 18px);
}

.switch.switch-hour {
    width: 46px;
}


.favourite-box {
    position: relative;
}

.favourite-box:hover .edit-delete {
    visibility: visible;
    border-radius: 12px;
    flex-direction: column;
}

.favourite-image .edit-delete button {
    width: 20px;
    height: 20px;
}

.favourite-image .edit-delete button i {
    font-size: 11px;
}

.error {
    border: 1px solid red !important;
}

.buttons-grp .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.btn-reset-chat {
    background-color: #d9534f !important;
    border-color: #d43f3a !important;
}

.btn-reset-chat:hover {
    border-color: #ff6363;
    background-color: #ff6363;
}

.buttons-grp .preview-btn:focus-visible,
.buttons-grp .preview-btn:active {
    background-color: var(--primery-color);
}


.switches-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    max-height: 180px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.toggle-switches {
    display: flex;
    justify-content: center;
    align-items: center;
    /* box-shadow: 0 0 4px 0 rgb(0 0 0 / 25%); */
    border-radius: 10px;
    border: 1px solid #d4d4d4;

}

.toggle-switches .messsage-tab {
    background-color: transparent;
}

.toggle-switches .messsage-tab .btn-toggle {
    background-color: rgba(0, 161, 176, .15);
    /* color: var(--primery-color); */
    color: #007b87;
    font-weight: 600;
    box-shadow: unset;
    border-radius: 10px 0 0 10px;
}

.toggle-switches .messsage-tab.message-receive-tab .btn-toggle {
    border-radius: 0 10px 10px 0;
}

.toggle-switches input[type=radio]:not(:checked)+.btn-toggle.btn:hover,
.toggle-switches input[type="radio"]:not(:checked)+.btn-toggle {
    background: transparent !important;
    color: #7c7c7c !important;
    border: 0;
}

.toggle-switches .btn-toggle:hover {
    color: #007b87 !important;
    opacity: 1;
}

.message-textarea {
    position: relative;
    width: 100%;
}

.message-textarea.info-wrap {
    padding-right: unset;
    position: relative;
}

.message-textarea textarea {
    width: 100%;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    resize: none;
    padding: 5px;
    position: relative;
    margin: 10px 0;
}

.message-textarea.new-tooltip .tooltip-info {
    top: 25px;
    right: 9px;
}

.message-time-box,
.message-date-box,
.message-status-box {
    margin-bottom: 10px;
}

.message-time-box .custom-input {
    padding: 0 10px;
    height: 36px;
    width: 150px;
    min-width: 150px;
}

.chat-date-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
}

.chat-time-list {
    position: relative;
}

.chat-time-list .custom-input {
    width: 100%;
}

.chat-date-box .custom-input {
    width: 140px;
    height: 36px;

}

.custom-input:focus {
    box-shadow: none;
}

.user-colorfull {
    margin-top: 10px;
    width: 100%;
}

.user-colorfull .time-label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;

}

.user-colorfull .time-label .custom-input {
    height: 32px;
}

.user-colorfull .time-label .custom-label {
    height: 36px;
}

.receiver-color-input {
    width: 100px;
}

.user-colorfull .fa-paint-brush {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.user-colorfull .title-name {
    width: 100%;
}

.add-chat-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    gap: 10px;
}

.add-chat-btn .call-send-btn,
.add-chat-btn .reset-call {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.add-chat-btn .reset-call {
    background-color: #d9534f;
    border-color: #d43f3a;
}

.add-chat-btn .reset-call:hover {
    border-color: #ff6363;
    background-color: #ff6363;
}

.device-option-footer {
    /* background-color: #f3f4f6; */
    background-color: #dbdbdb;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
    border-top: 1px solid #e5e7eb;
    display: none;
}

.options-tab-grp {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
}

.options-tab-grp .option-tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--primery-color);
    font-weight: 600;
    background-color: #fff;
    padding: 8px 0;
    border-radius: 10px;
    width: 130px;

}

.options-tab-grp .option-tabs span {
    font-size: 14px;
}


.ios-header .battery-container .battery .charge-icon {
    display: none;
}

.ios-header .battery-container.charging-mode-on .battery .charge-icon {
    position: absolute;
    left: calc(50% + 7px);
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    font-size: 10px;
    z-index: 4;
    color: #fff;
}

.ios-header .battery-container.hide-percentage.charging-mode-on .battery .charge-icon {
    left: 50%;
    font-size: 14px;
    color: var(--dark-black);
}

.ios-header .battery-container.charging-mode-on .battery .battery-status {
    left: calc(50% - 4px);
    color: #fff;
    font-weight: 500;
}

.ios-header .battery-container.charging-mode-on .battery .battery-level {
    background-color: #00ab00;
}


.ios-header .battery-container.hide-percentage.charging-mode-on .battery .charge-icon {
    left: 50%;
    font-size: 14px;
    color: var(--dark-color);
}

.ios-header .battery-container.charging-mode-on.charge-full .battery .battery-status {
    left: calc(50% - 1px);
}

.ios-header .battery-container.charging-mode-on.charge-full .battery .charge-icon {
    display: none;
}

.new-battery-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.battery-image {
    margin-left: 5px;
    display: none;
}

.battery-container.charging-mode-on .battery-image {
    display: block;
}

.iphone-network {
    display: flex;
    align-items: center;
    gap: 5px;
}

.location,
.silent {
    display: none;
    color: var(--dark-color);
}

.blue-tik {
    fill: #53bdeb;
}

.gray-tik {
    fill: #8696a0;
}

.device-box.active .blue-tik,
.device-box.active .gray-tik {
    fill: #fff;
}

.mobile-hide {
    display: block !important;
}

.close {
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: 800;
    opacity: 0.5;
}

.modal-header {
    justify-content: space-between;
}

.more-other-opt {
    align-items: flex-start;
    flex-wrap: nowrap !important;
}

.message-status-box .device-box {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 
.message-status-box .device-box {
    height: 36px;
} */

.whatsapp-android-img {
    position: relative;
}

.user-detail {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 20px;
    margin-bottom: 20px;
}


.user-detail .whatsapp-content-name {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-detail .whatsapp-content-name .custom-input {
    height: 36px;
}

.user-detail .whatsapp-content-name .chat-status-list {
    position: relative;
    width: 100%;
}

.page-profile {
    width: 100%;
}

.user-detail .whatsapp-android-img .profile-wrap {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px dashed #b5b5b5;
}

.profile-wrap i,
.audio-profile i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: rgb(32 32 32 / 38%);
    color: #fff;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.profile-wrap .receiver-item-img-output,
.user-detail .whatsapp-android-img .profile-wrap .item-img-output {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.user-detail .whatsapp-android-img .img-input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    font-size: 23px;
    height: 100%;
    width: 100%;
    direction: ltr;
    cursor: pointer;
    z-index: 9;
}

.more-other-opt .device-setting {
    flex-wrap: wrap;
}

.more-other-opt .device-setting .device-box {
    width: auto;
}

.device-setting-opt.more-setting .chat-status-list,
.device-setting-opt.more-setting .custom-last-seen {
    display: none;
}

.group-member-name {
    display: none;
}

.device-setting-opt.more-setting .group-member-name {
    display: block;
    width: 100%;
}

.device-setting-opt.more-setting .group-member-name .custom-input {
    height: 36px;
}

.add-person-tab {
    padding: 0 15px;
    background: transparent;
    color: #7c7c7c;
    border-radius: 10px;
    border: 1px solid #d4d4d4;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.add-person-tab {
    display: none;
}

.device-setting-opt.more-setting .add-person-tab {
    display: flex;
}

.device-setting-opt.more-setting .add-person-tab.active {
    background-color: rgba(0, 161, 176, .15);
    color: var(--primery-color);
}

.device-setting-opt .add-person-tab span {
    font-size: 14px;
    font-weight: 600;
}

.group-member {
    display: flex;
    align-items: center;
    gap: 20px;
}

.group-member .group-icon .profile-wrap {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px dashed #b5b5b5;

}

.group-member .group-icon {
    position: relative;
}

.group-member .group-icon .img-input-file {
    height: 100%;
    cursor: pointer;
}

.group-member .group-icon .profile-wrap .item-img-output {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.group-member .group-icon .img-input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    font-size: 23px;
    height: 100%;
    width: 100%;
    direction: ltr;
    cursor: pointer;
    z-index: 9;
}

.group-user-detail {
    margin-top: 10px;
    display: none;
}

/* .device-setting-opt.more-setting .group-user-detail {
    display: block;
} */

.device-setting-opt.more-setting .group-user-detail.active {
    display: block;
}

.group-chat-list .group-member-image {
    margin: 10px 10px 0 0;
    display: block;
}

.audio-chat .group-member-image {
    display: block;
    position: relative;
}

.audio-chat .group-member-image .member-img {
    width: 50px;
    height: 50px;
}

.group-member-image {
    position: relative;
}

.group-member-image .member-img {
    width: 30px;
    height: 30px;
    background-image: url(../../images/insta-profile-pic.jpg);
    border-radius: 50%;
    background-position: center;
    background-size: cover;
}

.group-chat-list.whatsapp-received {
    padding-left: 5px !important;
}

.desktop_view .modal-dialog {
    max-width: unset;
}

.down-group {
    display: none;
}

.whatsapp-chat.group-chat .down-group {
    display: block;
    margin: -3px 0 0 -15px;
    color: var(--dark-color);
    font-size: 12px;
}

.whatsapp-chat.group-chat .voice-call,
.whatsapp-chat.group-chat .voice_call {
    display: none;
}

.group-chat .header-icon.pull-right {
    align-items: center !important
}

.group-chat .wp-ios-header .header-icon .down-group {
    margin: 0;
}

.fake-option-content .wp_lg_clock {
    padding-right: 10px !important;
}

.custom-last-seen .last-seen-line {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.custom-last-seen .last-seen-line .custom-input {
    border: none;
    border-bottom: 1px dotted #979797;
    border-radius: 0;
}

.custom-last-seen {
    margin-top: 10px;
}

.last-seen-time {
    position: relative;
}

.last-seen-time .custom-input {
    width: 110px;
    height: 33px;
}

.last-seem-input {
    width: 110px;
}

.audio-box {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 40px;
    --audio-wave: var(--audio-wave-bg);
    --fill-waves: var(--fill-waves-bg);


}

.audio-box .group-member-image .member-img {
    width: 40px;
    height: 40px;
}

.audio-box .audio-waves {
    width: 137px;
    margin-bottom: 7px;
}

.audio-wave-box {
    position: relative;
}

.audio-chat .audio-time {
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: -12px;
}

.audio-chat .msg-activity {
    bottom: -2px;
}

.whatsapp-received.audio-chat .msg-activity {}

.whatsapp-received.audio-chat .msg-activity {
    right: 60px;
}

.whatsapp-received.audio-chat .microphone {
    left: -6px;
}

.microphone {
    position: absolute;
    bottom: 0;
    right: -6px;
}

.audio-speed {
    width: 50px;
    background: #000000a1;
    background-color: rgba(0, 0, 0, 0.36);
    border-radius: 25px;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.audio-speed p {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.audio-speed span {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1px;
}

.audio-btn {
    background-color: var(--primery-color);
    color: #fff;
    border-radius: 10px;
    padding: 5px 15px;
    font-weight: 600;
    cursor: pointer;
}

.audio-options {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    gap: 15px;
    position: relative;
}

.audio-options #audioUpload {
    display: none;
}

.audio-profile {
    position: relative;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 2px dashed #b5b5b5;
}

.audio-profile .item-img-output {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.audio-profile-box {
    position: relative;
}


.more-other-opt.other-opt {
    flex-wrap: wrap !important;
    width: 100%;
}

.audio-waves {
    position: relative;
}

.custom-cursor {
    position: absolute;
    top: 0;
    width: 8px;
    height: 8px;
    background: var(--link-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    pointer-events: none;
    transition: left 0.05s linear;
    z-index: 4;
}

.group-chat-list .custom-cursor {
    background-color: var(--pause-icon);
}

p.text-name {
    display: flex;
    align-items: center;
}

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

.whatsapp-chat-section {
    margin-top: 20px;
}



/* ------------- more advance option css start ------------- */
.default-dp {
    background: rgb(180 180 180 / 47%);
    height: 55px;
    width: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.default-dp i {
    font-size: 24px;
    color: gray;
}

.images-type {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
}

.alphabet-dp {
    background: rgb(180 180 180 / 47%);
    height: 55px;
    width: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.alphabet-dp span {
    font-size: 24px;
    color: gray;
}

.profile-box .input-img {
    max-width: 55px !important;
    max-height: 55px !important;
    border-radius: 50% !important;
    width: 55px;
    height: 55px;
}

.profile-box .input-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.profile-box {
    position: relative;
}

.profile-box .selected {
    position: absolute;
    top: -5px;
    right: -7px;
    z-index: 1;
    color: var(--primery-color);
    font-size: 20px;
    display: none;
}

.profile-box.active .selected {
    display: block;
}


.color-code .alphabet-color {
    width: 100%;
}

.srushti {
    padding: 10px;
    background-color: rgb(128 128 128 / 7%);
    border-radius: 15px;
}

/* ------------- more advance option css end------------- */

/* ----------- crypto button css start ------------------ */
.remove-mark-btn {
    /* background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%) !important; */
    background-color: #ffc439 !important;
    color: #000 !important;
    font-weight: 600;
    border-color: #ffc439 !important;
}

.social-page .btn.remove-mark-btn:focus,
.social-page .btn.remove-mark-btn:hover {
    color: #000 !important;

}


.payment-dropdown {
    background-color: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    margin: auto;
    max-width: 750px;
    position: relative;
    display: none;
    margin-top: 15px;
}


.payment-dropdown .pay {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.payment-dropdown p {
    margin: 0;
    text-align: center;
}

.crypto-list {
    background-color: rgba(0, 161, 176, 0.14);
    padding: 10px;
    border-radius: 6px;
    margin: 10px 0;
    cursor: pointer;
}

.crypto-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.crypto-logo svg {
    width: 40px;
    height: 40px;
}

.buy-crypto {
    background-color: rgb(128 128 128 / 13%);
    padding: 10px;
    border-radius: 6px;
    margin: 10px 0;
}

.buy-crypto a {
    font-weight: 600;
    color: #000;
    font-size: 16px;
    width: 100%;
    display: block;
    text-align: center;
}


.coin-box span {
    font-size: 18px;
    color: #000;
}

.coin-box .pay-now {
    font-weight: 600;
}

.three-dots {
    display: none;
}

.plan-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: fixed;
    right: 0;
    top: 18dvh;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 10px 0 0 10px;
    z-index: 9999;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    color: green;
    background: #b8f6b8;
}

.plan-timer.red {
    background-color: #feeded;
    color: #ed4c40;
}

/* ----------- crypto button css end ------------------ */
/* =========== all responsive css start =================== */

@media screen and (max-width: 1399px) {
    .space-left {
        margin: 0;
    }
}

@media screen and (max-width: 1199px) {
    .other-opt .device-setting {
        flex-wrap: wrap;
    }

    .other-opt {
        flex-wrap: wrap;
    }

    .other-opt .device-box {
        width: unset;
    }

    .message-time-box .custom-input {
        width: 120px;
        min-width: 120px;
    }

    .chat-date-box .custom-input {
        width: 125px;
    }
}

@media only screen and (min-width: 992px) {
    .keyboard-popup {
        display: block !important;
    }
}

@media only screen and (orientation: Portrait) and (max-width: 991px) {
    .alert-info-wrap.active {
        display: flex;
    }
}

@media only screen and (max-width: 991px) {
    .live-box.vcall_live {
        margin-bottom: 20px;
    }


    .edit-delete-popup::before {
        top: 32px;
    }


    .img-sec-main {
        flex-direction: column;
        margin-top: 30px;
        margin-bottom: 60px !important;
    }

    .img-sec-main .img-description {
        order: 1;
        width: 100%;
    }

    .img-sec-main .img-sec {
        order: 2;
        margin-bottom: 15px;
        width: 100%;
    }

    .img-sec-main .img-sec img {
        max-height: 320px;
    }

    .tip-text {
        display: none;
    }

    .select-list .network,
    .wp_lg_clock .battery {
        display: flex;
        gap: 5px;
        align-items: center;
    }

    .clockandtime-format {
        margin: 0 !important;
    }

    .social-page .wp_lg_clock .form-group>input {
        height: 34px;
    }


    .wp_lg_clock .battery .select-list {
        width: 50%;
    }

    .form-element.arrow {
        height: auto;
    }

    .social-page .form-group.Battery-percent-wrap {
        margin: 0;
    }

    .change_reset {
        margin-top: 20px;
    }

    .video_call_options .wp_lg_clock .battery {
        display: flex;
    }

    .order1 {
        order: 1;
    }

    .order2 {
        order: 2;
    }

    .order3 {
        order: 3;
    }

    .order4 {
        order: 4;
    }

    .order5 {
        order: 5;
    }

    .social-page .video_call_options .nav-tabs {
        margin: 0;
    }

    .description .img-sec-main .img-sec {
        width: 100%;
        text-align: center;
        order: 1;
    }

    .description .img-sec-main .img-description {
        width: 100%;
        order: 2;
    }

    .description .img-sec-main .img-description p {
        width: 100%;
    }

    .footer-chat-option {
        flex-direction: column;
        align-items: flex-start;
        margin: 0;
        gap: 10px;
    }

    .keyboard-popup {
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.2);
        display: none;
        z-index: 10000;
        -webkit-transform: translateZ(10);
        overflow-x: hidden;
    }

    .modalShow {
        display: block;
    }

    .keyboard-popup.whatsapp-chat-popup .head-text button {
        border-radius: 50%;
        position: absolute;
        right: -7px;
        top: -10px;
        width: 25px;
        height: 25px;
        display: flex;
    }

    .keyboard-popup-container {

        padding: 30px 0 100px;
        max-width: 320px;
    }

    .change_reset .add-message-input-btn {
        display: block;
    }

    .main-ft i {
        display: inline-block;
    }

    .chat-list-modal.keyboard-popup .head-text button {
        display: flex;
    }

    .add-message {
        /* display: block; */
        visibility: visible;
        opacity: 1;
        height: 100%;
    }

    .whatsapp.whatsapp-chat .whatapp-android-footer,
    .whatapp-ios-footer .ios-footer {
        cursor: pointer;
    }

    .device-option-footer {
        display: block;
    }

    .fake-options {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        /* overflow-y: hidden; */
        transform: translateY(100%);
        z-index: 9999;
        transition: 0.3s;
        padding: 0;
        border-radius: 20px 20px 0 0;
    }

    .fake-option-content {
        overflow-y: scroll;
        overflow-x: hidden;

    }

    .fake-options.toggled {
        transform: translateY(0) !important;
        box-shadow: 1px -20px 20px 100dvh rgb(0 0 0 / 53%) !important;
    }

    .fake-options.toggled .fake-option-content {
        height: auto !important;
        max-height: calc(100vh - 200px);
        /* border-radius: 20px 20px 0 0; */
    }

    .close-button {
        width: 30px;
        height: 30px;
        /* background-color: var(--primery-color); */
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        color: var(--primery-color);
        font-size: 18px;
    }

    .popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #dee2e6;
        padding: 5px 10px;
        /* position: sticky;
        top: 0; */
        background: #fff;
        z-index: 6;
        border-radius: 20px 20px 0 0;
    }

    .popup-header p {
        margin: 0;
        color: #737b8c;
        font-weight: 600;
    }

    .scroll-shadow {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50px;
        pointer-events: none;
        /* background: linear-gradient(to bottom, rgb(255 255 255 / 42%), rgb(0 0 0 / 38%)); */
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 999;

        background: linear-gradient(to bottom, rgb(255 255 255 / 42%) 0%, rgb(120 120 120 / 25%) 50%, rgb(0 0 0 / 38%) 100%);
        background-size: 100% 200%;
        background-position: top;
    }

    /* .message-time-box .custom-input {
        width: 120px;
        min-width: 120px;
    }

    .chat-date-box .custom-input {
        width: 125px;
    } */

    .all-additional-tabbing {
        position: sticky;
        top: 0;
        z-index: 999;
    }


}



@media only screen and (max-width: 768px) {
    .wp_lg_clock {
        padding-right: 0;
    }

    .social-page .Battery-percent-wrap .form-control {
        padding: 5px;
    }

    .social-page .Battery-percent-wrap {
        width: 50%;
    }

    /* .change_reset .btn {
        margin-bottom: 10px;
    } */

    .keyboard-popup-container {
        align-items: flex-start;
        padding: 40px 0 100px;
    }


}

@media only screen and (max-width: 575px) {
    .xxs-12 {
        width: 100%;
    }

    .xxs-6 {
        width: 50%;
    }

    .change_reset .btn {
        padding: 5px 10px;
    }

    .wp_lg_clock {
        padding-right: 10px;
    }

    .space {
        margin-top: 15px;
    }

    .wp_lg_clock .form-element {
        width: 60%;
    }

    .wp_lg_clock .battery .select-list .form-element {
        width: 100%;
    }

    .crypto-logo svg {
        width: 35px;
        height: 35px;
    }


}

@media only screen and (max-width: 480px) {
    .total-msg-count {
        flex-direction: column;
        gap: 5px !important;
        align-items: flex-start !important;
    }

    .device-setting-opt {
        padding: 20px 15px;
    }

    .all-setting-option {
        gap: 20px 10px;
    }

    .mobile-hide {
        display: none !important;
    }

    .coin-box span {
        font-size: 15px;
    }

    .coin-box .more-and {
        display: none;
    }

    .coin-box .three-dots {
        display: block;
        font-size: 22px !important;
    }

    .crypto-logo svg {
        width: 25px;
        height: 25px;
    }

    /* .plan-counter {
        visibility: visible;
        width: 100%;
    } */


    .plan-timer .plan-counter {
        display: none;
    }

    .plan-timer.active .plan-counter {
        display: block;
    }
}

@media only screen and (max-width: 420px) {
    .xxs-6 {
        width: 100%;
    }

    .change_reset {
        margin: 0;
    }

    .wp-video-footer-icon:nth-child(4) img .clockandtime-format {
        gap: unset;
    }

    .network .switch+span {
        margin-right: 5px;
    }

    .social-page .form-control.time-box {
        padding: 9px 0 9px 10px;
    }

    .checkbox-grp .switch+span {
        margin: 0;
    }

    .social-page .video_call_options .nav-tabs {
        margin-top: 15px;
    }

    .order2 {
        order: 4;
    }

    .total-msg-count {
        flex-direction: row;
    }

    .frame .whatsapp {
        width: 100% !important;
    }

    .frame::after,
    .frame::before {
        right: -14px;
    }

    .frame {
        margin: auto;
        width: 320px;
    }


    .right-part.mobile_view {
        overflow: hidden;
    }

    .preview-popup .right-part {
        overflow: scroll;
    }

    .post_write_comment .txt .text_block .comment .whatsapp-comment-bar {
        gap: 5px;
    }

    .whatsapp .whatapp-android-footer .text-wrcommenttext {
        white-space: nowrap;
    }

    .only-img.setvideo .msg-image {
        width: 200px;
    }

    .header-right-all-icon {
        gap: 10px;
    }

    .fixed-msg p {
        font-size: 12px;
    }

    .right-part {
        overflow: hidden;
        background-image: unset;
        box-shadow: none;
        border: none;
    }

    .frame {
        margin: auto;
        width: auto;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    .preview-popup .right-part {
        overflow: scroll;
        box-shadow: inset 0 10px 10px 10px rgba(0, 0, 0, 0.15);
    }
}



@media only screen and (max-width: 380px) {
    .frame {
        margin: 0;
    }

}