/* whatsapp phone list */
.iris_whatsapp_contacts {
    width: 280px;
    position: absolute;
    left: 0;
    top: 0;
    padding: 20px;
    z-index: 7;
    transition: .5s;
    max-height: 770px;
    overflow-y: auto;
}

    .iris_whatsapp_contacts .iris_whatsapp_contact_phones_list li {
        padding: 10px 15px;
        list-style: none;
        border-radius: 3px;
        position: relative; /* Necesario para posicionar la notificación en relación con el contenedor */
    }

        .iris_whatsapp_contacts .iris_whatsapp_contact_phones_list li:hover {
            background: #efefef;
            cursor: pointer;
        }

        .iris_whatsapp_contacts .iris_whatsapp_contact_phones_list li.active {
            background: #efefef;
        }

        .iris_whatsapp_contacts .iris_whatsapp_contact_phones_list li .name {
            font-size: 15px;
        }

        .iris_whatsapp_contacts .iris_whatsapp_contact_phones_list li .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }

        .iris_whatsapp_contacts .iris_whatsapp_contact_phones_list li .online,
        .iris_whatsapp_contacts .iris_whatsapp_contact_phones_list li .offline,
        .iris_whatsapp_contacts .iris_whatsapp_contact_phones_list li .me {
            margin-right: 2px;
            font-size: 8px;
            vertical-align: middle
        }

        .iris_whatsapp_contacts .iris_whatsapp_contact_phones_list li .online {
            color: #86c541
        }

        .iris_whatsapp_contacts .iris_whatsapp_contact_phones_list li .offline {
            color: #e47297
        }

    .iris_whatsapp_contacts .iris_whatsapp_contact_phones_list img {
        width: 45px;
        border-radius: 50%;
        float: left;
        margin-right: 10px;
    }

    .iris_whatsapp_contacts .about {
        padding-left: 8px;
        white-space: nowrap; /* Mantener el texto en una sola línea */
        overflow: hidden; /* Ocultar el texto que exceda el ancho */
        text-overflow: ellipsis; /* Añadir los puntos suspensivos "..." */
    }

    .iris_whatsapp_contacts .status {
        color: #999;
        font-size: 9px;
    }

    .iris_whatsapp_contacts .iris_whatsapp_contact_phones_list_item_new_msgs_notify {
        position: absolute;
        top: 5px;
        left: 40px;
        background-color: red;
        color: white;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    }

.iris_whatsapp_page_header_notify {
    margin-top: 5px;
    margin-right: 5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 767px) {
    .iris_whatsapp_contacts .iris_whatsapp_contacts {
        height: 465px;
        width: 100%;
        overflow-x: auto;
        background: #fff;
        left: -400px;
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .iris_whatsapp_contacts .iris_whatsapp_contact_phones_list {
        height: 650px;
        overflow-x: auto;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .iris_whatsapp_contacts .iris_whatsapp_contact_phones_list {
        height: 480px;
        overflow-x: auto;
    }
}