/* The style of app for navigation by share public */
.AppDataNavigationShareView {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    z-index: 2;

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

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

        padding-top: 1.7vw;
        padding-bottom: 1.7vw;
    }
}

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

        width: 100%;

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

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

            width: 100%;
        }

            .AppDataNavigationShareViewBrand__Logo > a {
                margin-right: var(--size-04);
            }

                .AppDataNavigationShareViewBrand__Logo > a > img {
                    width: auto;
                    height: 100%;
                    max-height: var(--icon-company-size);

                    transition: 0.4s;
                }

                    .AppDataNavigationShareViewBrand__Logo > a > img:hover {
                        transition: 0.2s;
                        opacity: 0.9;
                    }

            .AppDataNavigationShareViewBrandLogo__Name {
                display: block;

                font-size: var(--font-size-h6);
                text-align: left;
                white-space: normal;
                word-break: break-word;
            }

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

        width: 100%;
    }

    @media screen and (max-width: 650px){
        .AppDataNavigationShareView__Owner {
            width: auto;
        }
    }

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

            width: 100%;

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

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

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

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

                    opacity: 0.7;
                    transition: 0.4s;
                }

                    .AppDataNavigationShareView__Owner:hover .AppDataNavigationShareViewOwnerHeader__Icon > img {
                        transition: 0.2s;
                        opacity: 1.0;
                    }

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

                text-align: right;
            }

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

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

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

                padding: unset;
            }
        }

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

                background: url( '/server/administration-panel/assets/images/system/icons/users/no-photo.svg' );
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                border: 1px solid rgb(237, 237, 237);
                border-radius: 100%;

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

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

            @media screen and (max-width: 650px){
                .AppDataNavigationShareViewOwnerProfil__Photo {
                    margin-right: unset;
                }
            }

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

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

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

                    white-space: normal;
                    word-break: break-all;

                    width: 100%;
                }

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

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

                    width: 100%;
                }

/* Tempalte the navigation */
/* <section class="AppDataNavigationShareView">
    <div class="AppDataNavigationShareView__Brand">
        <div class="AppDataNavigationShareViewBrand__Logo">
            <a href="/company/view/:inn=123" data-link="false"><img src="/server/administration-panel/assets/images/system/layer-logo.svg" alt="Логотип компании ООО КОМПАНИЯ"></a>
            <div class="AppDataNavigationShareViewBrandLogo__Name">
                ООО Название компании
            </div>
        </div>
        <div class="AppDataNavigationShareViewBrand__Copyright">
            Создано в <span>Task</span>Gate
        </div>
    </div>
    <div class="AppDataNavigationShareView__Owner">
        <div class="AppDataNavigationShareViewOwner__Header">
            <div class="AppDataNavigationShareViewOwnerHeader__Icon">
                <img src="/assets/images/system/icons/managments.svg" alt="TaskGate - Управляющий">
            </div>
            <div class="AppDataNavigationShareViewOwnerHeader__Title">
                Управляющий
            </div>
        </div>
        <div class="AppDataNavigationShareViewOwner__Profil">
            <div style="background: url( '/server/administration-panel/assets/images/system/icons/users/no-photo.svg' ); background-size: cover; background-position: center; background-repeat: no-repeat;" class="AppDataNavigationShareViewOwnerProfil__Photo"></div>
            <div class="AppDataNavigationShareViewOwnerProfil__Data">
                <div class="AppDataNavigationShareViewOwnerProfilData__Name">
                    <a href="/profil/view/:id=123" target="_blank" data-link="false">Администратор</a>
                </div>
                <div class="AppDataNavigationShareViewOwnerProfilData__Type">
                    Менеджер
                </div>
            </div>
        </div>
    </div>
</section> */