/* Style the app of data for navigation */
.AppDataNavigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    background: rgb(255, 255, 255);

    width: 100%;
    height: auto;

    z-index: 10;

    padding-top: var(--size-17);
    padding-bottom: var(--size-17);

    transition: 0.4s;
}

@media screen and (max-width: 900px){
    .AppDataNavigation {
        border-bottom-left-radius: var(--size-07);
        border-bottom-right-radius: var(--size-07);

        padding: 1.7vw;
    }
}

    .AppDataNavigation > button,
    .AppDataNavigation > a {
        padding: var(--size-04);
        margin-right: var(--size-04);

        box-sizing: content-box;
    }

    @media screen and (max-width: 900px){
        .AppDataNavigation > button,
        .AppDataNavigation > a {
            padding: var(--size-02);
        }
    }

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

        width: 100%;

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

    @media screen and (max-width: 900px){
        .AppDataNavigation__Header {
            border: unset;
            border-radius: unset;

            padding: unset;
        }
    }

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

            text-align: left;
            white-space: normal;

            width: 100%;
        }

        @media screen and (max-width: 900px){
            .AppDataNavigationHeader__Title > h6 {
                font-size: var(--font-size);
            }
        }

            @media screen and (max-width: 650px){
                .AppDataNavigationHeader__Title > h6 {
                    font-size: var(--font-size-context);
                }
            }

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

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

            .AppDataNavigationHeader__Icon > img {
                width: var(--icon-button-size-options);
                height: auto;
                max-width: var(--icon-button-size-options);
            }

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

        width: 100%;

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

    @media screen and (max-width: 900px){
        .AppDataNavigationChats__Header {
            border: unset;
            border-radius: unset;

            padding: unset;
        }
    }

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

            width: 100%;
        }

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

                text-align: left;
                white-space: normal;

                width: 100%;
            }

            @media screen and (max-width: 900px){
                .AppDataNavigationChatsHeaderData__Name > h6 {
                    font-size: var(--font-size);
                }
            }

                @media screen and (max-width: 650px){
                    .AppDataNavigationChatsHeaderData__Name > h6 {
                        font-size: var(--font-size-context);
                    }
                }

                .AppDataNavigationChatsHeaderData__Status {
                    color: rgb(127, 127, 127);
                    font-size: var(--font-size-context);
                }

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

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

            width: var(--size-26);
            height: var(--size-26);
            min-width: var(--size-26);
            min-height: var(--size-26);
            
            margin-right: var(--size-04);
        }

        @media screen and (max-width: 900px){
            .AppDataNavigationChatsHeader__Photo {
                width: var(--size-20);
                height: var(--size-20);
                min-width: var(--size-20);
                min-height: var(--size-20);
            }
        }

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

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

    @media screen and (max-width: 900px){
        .AppDataNavigation__Actions {
            display: none;
        }
    }

    .AppDataNavigation > .AppPatternsTools > button {
        padding: var(--size-07);
    }

    @media screen and (max-width: 900px){
        .AppDataNavigation > .AppPatternsTools > button {
            padding: var(--size-05);
        }
    }

        .AppDataNavigation > .AppPatternsTools > .AppPatternsTools__Links {
            top: calc( var(--size-17) * 1.65 );
        }

        @media screen and (max-width: 900px){
            .AppDataNavigation > .AppPatternsTools > .AppPatternsTools__Links {
                top: calc( var(--size-17) * 1.4 );
            }
        }