@media (max-width:1200px) {}

@media (max-width:1200px) {
    .chats-list {
        padding: 0.5rem 0.5rem;

        & .row {
            width: 100%;
            flex-wrap: nowrap;
        }
    }

    .content-wrapper {
        & .text-heading {
            font-size: 17px;
            width: 150px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        & .badge{
            font-size: 10px;
        }
    }
    .chat-text-area,.chat-user-text {
        padding: .4rem .4rem !important;
        font-size: 12px;
    }
    .view-modal-wrapper {
        height: 100vh;
        .view-modal {
            left: 59.2%;
            max-width: 41%;
        }
    }
}

@media (max-width:900px) {
    .main-img-wrapper {
        & .img-wrapper {
            width: 30px;
            height: 30px;
        }
    }

    .chats-list {
        padding: 0.5rem 0.5rem;

        & .row {
            width: 100%;
            flex-wrap: nowrap;
        }
    }

    .content-wrapper {
        & .text-heading {
            font-size: 16px;
            width: 150px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        & .badge{
            font-size: 10px;
        }
    }
    .chat-text-area,.chat-user-text {
        padding: .4rem .4rem !important;
        font-size: 12px;
    }
    .view-modal-wrapper {
        height: 100vh;
        .view-modal {
            left: 59.2%;
            max-width: 41%;
        }
    }
}

@media (max-width:765px) {
    .userList-wrapper{
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        overflow: hidden;
        z-index: 90;
        background-color: #878a99;
        transition: all .3s ease-in-out;
    }
    .view-modal-wrapper {
        .view-modal {
            left: 10.2%;
            max-width: 90%;
        }
    }
    .main-img-wrapper {
        & .img-wrapper {
            width: 40px;
            height: 40px;
        }
    }
    .chat-header{
        & .text-heading{
            width: 63px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .btn-icon{
        width: 25px;
    }
}

@media (max-width:424px) {}