/**
 * Chat App style.
 *
 * For the chat app page.
 *
 * @author  Metaverses Nation Agency <mail@metaversesnation.com>
 */

#user-contact-div .list .message, 
#user-group-div .list .message, 
#sidebar-div,
.header-menu-item {
    box-shadow: 0 1px 6px rgb(0 0 0 / 12%), 0 1px 4px rgb(0 0 0 / 24%) !important;
}

#user-image,
#user-contact-image,
#user-group-image {
    border-radius: 10px;
}

#user-contact-div .header, 
#user-group-div .header, 
#sidebar-div .header,
#sidebar-div .list .item {
    padding-left: 10px;
}

#user-contact-div .header, 
#user-group-div .header, 
#sidebar-div .header {
    background-color: red;
}

#sidebar-div .list .item.active {
    background-color: #f8d7da !important;
}

#user-contact-div, 
#user-group-div, 
#user-contact-div .list, 
#user-group-div .list, 
#search-user-contact-messages-div, 
#search-user-group-messages-div, 
#update-user-contact-div, 
#update-user-group-div, 
#sidebar-div .list, 
#create-user-contact-div,
#create-user-group-div, 
#search-user-contacts-div, 
#search-user-groups-div, 
#search-user-blocked-groups-div, 
#search-user-contacts-result-div,
#search-user-groups-result-div,
#search-user-blocked-groups-result-div {
    overflow-y: auto;
}

#create-user-group-image-preview,
#update-user-group-image-preview {
    height: 100px;
    width: auto;
}

#user-contact-div, 
#user-group-div, 
#sidebar-div {
    max-height: 100vh;
}

#sidebar-div {
    width: 30vw;
    z-index: 100;
}

#user-contacts-div .contact .latest-message,
#user-groups-div .group .latest-message,
#user-blocked-groups-div .blocked-group .description,
#search-user-contacts-result-div .search-contact .latest-message,
#search-user-groups-result-div .search-group .latest-message,
#search-user-blocked-groups-result-div .search-blocked-group .description {
    display: flex;
    align-items: center;
    word-break: break-all;
    overflow: hidden;
}

#user-contacts-div .contact .latest-message img,
#user-groups-div .group .latest-message img,
#search-user-contacts-result-div .search-contact .latest-message img,
#search-user-groups-result-div .search-group .latest-message img {
    margin-right: 5px;
}

#user-contact-div .list .message,
#user-group-div .list .message {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow: hidden;
    max-width: 400px;
    padding: 10px;
    margin: 10px;
}

#user-contact-div .list .message .message-content,
#user-group-div .list .message .message-content {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow: hidden;
}

#user-contact-div .list .message.sender,
#user-group-div .list .message.sender {
    background-color: #FFFDD0; /* Cream */
}

#user-contact-div .list .message.receiver,
#user-group-div .list .message.receiver {
    background-color: white;
}

#user-contact-message-form,
#user-group-message-form {
    background-color: red;
}

#user-contact-message-input,
#user-group-message-input {
    resize: none;
    font-size: 18px;
    padding: 15px 10px 15px 10px;
    border-radius: 5px;
    font-family: sans-serif;
}

#user-contact-message-attachment-div,
#user-group-message-attachment-div {
    height: 125px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#user-contact-message-attachment-div img,
#user-group-message-attachment-div img {
    margin: 0;
    vertical-align: middle;
    height: 100px;
    width: auto;
}

#user-contact-message-attachment-div figure, 
#user-group-message-attachment-div figure {
    width: 90%;
    margin: 0;
    text-align: center;
    vertical-align: middle;
}

#user-contact-message-attachment-div figcaption,
#user-group-message-attachment-div figcaption {
    overflow-wrap: break-word;
}

.menu {
    background-color: #f8d7da !important;
}

.menu .menu-item {
    display: flex;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    opacity: 1;
}

.menu .menu-item:hover {
    opacity: 0.6;
}

.menu .menu-item img {
    margin-right: 5px;
}

.menu .menu-item a {
    color: black;
    font-size: 15px;
    text-decoration: none;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

#choose-user-group-member-result-div .choose-group-member,
#user-group-members-result-div .group-member {
    width: 90%;
}

#sidebar-header-div .active,
#user-contact-header-div .active,
#user-group-header-div .active {
    text-align: center;
    background-color: orange;
    border-radius: 5px;
    padding: 5px !important;
}

#sidebar-header-div img,
#user-contact-header-div img,
#user-group-header-div img {
    vertical-align: middle;
}

.image-grid {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    flex-wrap: wrap;
    padding: 0 4px;
}

.image-grid-item {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.image-grid-item img {
    cursor: pointer;
    margin: 8px 0 8px 0;
    vertical-align: middle;
    width: 100%;
    height: 100px;
}

.message-content {
    margin-top: 10px;
}

.message-attachment-div {
    position: relative;
    width: 100%;
    text-align: center;
}

.message-attachment {
    max-width: 200px;
    max-height: 200px;
    margin: auto;
    cursor: pointer;
}

.message-attachment-thumbnail {
    width: 200px;
    height: 200px;
}

.download-message-attachment-button {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: lightGreen;
    color: black;
    font-size: 12px;
    padding: 6px 12px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 1px 6px rgb(0 0 0 / 12%), 0 1px 4px rgb(0 0 0 / 24%);
}

.message-attachment-preview {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
}

.sender-details {
    font-weight: bold;
    padding: 0;
    margin-bottom: 5px;
}

.link-preview {
    padding: 10px;
    background-color: #f8d7da;
    border-radius: 10px;
}

.link-preview .link-preview-title {
    margin-top: 0;
    padding-top: 0;
    font-weight: bold;
}

.header-menu-item {
    background-color: white;
    border-radius: 10px !important;
    padding: 5px !important;
}
.header-menu-item.image {
    padding: 2px !important;
}

@media screen and (max-width: 800px) {
    .image-grid-item {
        flex: 50%;
        max-width: 50%;
    }
    .image-grid-item img {
        height: 150px;
    }
}

@media screen and (max-width: 600px) {
    .image-grid {
        padding: 0 10px;
    }
    .image-grid-item img {
        height: 200px;
    }
    .image-grid-item {
        flex: 100%;
        max-width: 100%;
    }
}

header, footer {
    display: none !important;
}

main {
    padding: 0 !important;
}

hr {
    width: 95%;
    border: none;
    height: 0.2px;
    background: grey;
    margin-top: 10px;
    margin-bottom: 10px;
}

@media only screen and (max-width: 1056px) {
    #sidebar-div {
        flex-grow: 1;
    }
    
    #user-contact-header-menu-mobile-div,
    #user-group-header-menu-mobile-div {
        background-color: #f8d7da !important;
    }
    
    #user-contact-header-menu-mobile-div .menu-item,
    #user-group-header-menu-mobile-div .menu-item {
        display: flex;
        align-items: center;
        padding: 5px;
        cursor: pointer;
        opacity: 1;
    }
    
    #user-contact-header-menu-mobile-div .menu-item:hover,
    #user-group-header-menu-mobile-div .menu-item:hover {
        opacity: 0.6;
    }
    
    #user-contact-header-menu-mobile-div .menu-item img,
    #user-group-header-menu-mobile-div .menu-item img {
        margin-right: 5px;
    }
    
    .mobile-hidden {
        display: none !important;
    }
    
    .desktop-hidden.inline {
        display: inline !important;
    }
    
    .desktop-hidden.block {
        display: block !important;
    }
    
    .desktop-hidden.flex {
        display: flex !important;
    }
}