/* Style the messages of folders list */
.AppMessagesFolders {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    width: 100%;

    padding-top: var(--size-17);
    padding-left: var(--size-17);
    padding-right: var(--size-17);
    margin-bottom: var(--size-17);
}

@media screen and (max-width: 900px){
    .AppMessagesFolders {
        padding-top: var(--size-07);
        padding-left: var(--size-07);
        padding-right: var(--size-07);
        margin-bottom: var(--size-07);
    }
}

    .AppMessagesFolders__Header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;

        width: 100%;

        margin-bottom: var(--size-04);
    }

        .AppMessagesFoldersHeader__Icon {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-right: var(--size-04);
        }

            .AppMessagesFoldersHeader__Icon > img {
                width: 100%;
                height: auto;
                max-width: var(--icon-button-size);

                opacity: 0.7;
                transition: 0.4s;
            }

                .AppMessagesFolders:hover .AppMessagesFoldersHeader__Icon > img {
                    transition: 0.2s;
                    opacity: 1.0;
                }

        .AppMessagesFoldersHeader__Title {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            width: 100%;
        }

    .AppMessagesFolders__List {
        display: grid;
        align-items: flex-start;
        justify-content: flex-start;

        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));

        width: 100%;

        gap: var(--size-07);
    }

    .AppMessagesFolders__List::-webkit-scrollbar { width: 0px; height: 0px; }
            
    @media screen and (max-width: 900px){
        .AppMessagesFolders__List {
            grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
        }
    }

        @media screen and (max-width: 650px){
            .AppMessagesFolders__List {
                display: flex;
                flex-direction: row;

                overflow-x: scroll;

                gap: unset;
            }

        }

        .AppMessagesFoldersList__Item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;

            background: rgb(255, 255, 255);
            border: 1px solid rgb(237, 237, 237);
            border-radius: var(--size-07);

            width: 100%;
            height: 100%;
            min-height: var(--size-7);

            padding: var(--size-07);
            transition: 0.4s;
        }

        @media screen and (max-width: 650px){
            .AppMessagesFoldersList__Item {
                min-width: var(--size-120);
                margin-right: var(--size-07);
            }
        }

            .AppMessagesFoldersList__Item:hover {
                transition: 0.2s;
                background: rgb(250, 250, 250);
            }

            .AppMessagesFoldersList__Item:last-child {
                margin-right: unset;
            }

            .AppMessagesFoldersListItem__Header {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                justify-content: space-between;

                width: 100%;
                height: 100%;

                margin-bottom: var(--size-07);
            }

                .AppMessagesFoldersListItemHeader__Name {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-start;

                    font-weight: 500;
                    font-size: var(--font-size-link);

                    width: 100%;

                    margin-right: var(--size-07);
                }

                    .AppMessagesFoldersListItemHeader__Name > a {
                        color: rgb(57, 57, 57);
                    }

                .AppMessagesFoldersListItemHeader__Data {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-end;
                }

                    .AppMessagesFoldersListItemHeaderData__Status {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;

                        background: rgba(235, 235, 235, 0.4);
                        border: 0.017cm solid rgb(225, 225, 225);
                        border-radius: var(--size-07);

                        font-size: var(--font-size-context);
                        font-weight: 600;

                        padding-top: var(--size-02);
                        padding-bottom: var(--size-02);
                        padding-left: var(--size-07);
                        padding-right: var(--size-07);
                    }

            .AppMessagesFoldersListItem__Chats {
                display: none;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;

                width: 100%;
            }

                .AppMessagesFoldersListItemChats__Header {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-start;

                    width: 100%;

                    margin-bottom: var(--size-04);
                }

                    .AppMessagesFoldersListItemChatsHeader__Icon {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;

                        margin-right: var(--size-04);
                    }

                        .AppMessagesFoldersListItemChatsHeader__Icon > img {
                            width: 100%;
                            height: auto;
                            max-width: var(--icon-button-size);

                            opacity: 0.7;
                            transition: 0.4s;
                        }

                            .AppMessagesFolders:hover .AppMessagesFoldersListItemChatsHeader__Icon > img {
                                transition: 0.2s;
                                opacity: 1.0;
                            }

                    .AppMessagesFoldersListItemChatsHeader__Title {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: space-between;

                        width: 100%;
                    }

                .AppMessagesFoldersListItemChats__Dialogs {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: flex-start;
                    justify-content: flex-start;

                    width: 100%;
                }

                    .AppMessagesFoldersListItemChatsDialogs__Item {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;

                        border: 1px solid rgb(217, 217, 217);
                        border-radius: 100%;

                        width: var(--size-17);
                        height: var(--size-17);
                        min-width: var(--size-17);
                        min-height: var(--size-17);

                        margin-top: var(--size-03);
                        margin-right: var(--size-03);
                    }

                    .AppMessagesFoldersListItemChatsDialogs__ItemQuantity {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;

                        border: 1px solid rgb(157, 217, 97);
                        border-radius: 100%;

                        color: rgb(157, 217, 97);
                        text-align: center;
                        font-size: var(--font-size-context);
                        font-weight: 600;

                        width: var(--size-17);
                        height: var(--size-17);
                        min-width: var(--size-17);
                        min-height: var(--size-17);

                        margin-top: var(--size-03);
                        margin-right: var(--size-03);
                    }