/* Style the app of header */
.AppHeader {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    background: rgb(255, 255, 255);
    border-top-left-radius: var(--size-07);
    border-bottom-left-radius: var(--size-07);

    width: 100%;
    height: 100%;
    max-width: 20%;
}

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

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

        width: 100%;

        padding: var(--size-17);
    }

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

            width: 100%;
        }

            .AppHeaderLogo__Name > a {
                color: rgb(57, 57, 57);
                font-size: calc(var(--size-16) * 1.15);
                text-transform: uppercase;
            }

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

                .AppHeaderLogo__Name > a > span {
                    color: rgb(157, 217, 97);
                }

        .AppHeaderLogo__Core {
            display: block;

            color: rgba(127, 127, 127);
            font-size: var(--font-size-context);
            text-align: left;
        }

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

        width: 100%;
        height: 100%;

        overflow: hidden;
    }

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

            width: 100%;

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

            .AppHeaderNavigation__FirstLink > a {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;

                background: rgb(247, 247, 247);
                border-radius: var(--size-07);

                color: rgb(57, 57, 57);
                font-weight: 500;

                width: 100%;

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

                .AppHeaderNavigation__FirstLink > a:hover {
                    background: rgb(241, 241, 241);
                    color: rgb(57, 57, 57);
                }

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

                    margin-right: var(--size-07);
                    
                    opacity: 0.7;
                    transition: 0.4s;
                }

                    .AppHeaderNavigation__FirstLink > a:hover > img {
                        transition: 0.2s;
                        opacity: 1.0;
                    }

            .AppHeaderNavigation__FirstLink > a > span:nth-of-type(1) {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;

                width: 100%;
            }

            .AppHeaderNavigation__FirstLink > a > span:nth-of-type(2) {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;

                background: rgba(157, 217, 97, 0.1);
                border: 1px solid rgba(157, 217, 97, 0.7);
                border-radius: var(--size-07);

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

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

                transition: 0.4s;
            }

                .AppHeaderNavigation__FirstLink > a:hover > span:nth-of-type(2) {
                    transition: 0.2s;
                    border: 1px solid rgba(157, 217, 97, 1.0);
                }

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

            width: 100%;

            overflow-y: auto;
            direction: rtl;
            
            padding-top: var(--size-07);
            padding-left: var(--size-17);
            padding-right: var(--size-17);
        }

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

                width: 100%;
                direction: ltr;

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

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

                    color: rgba(127, 127, 127);

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

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

                    width: 100%;
                }

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

                        width: 100%;
                    }

                        .AppHeaderNavigationBlockCategory__Links > a {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: flex-start;

                            border-radius: var(--size-07);

                            color: rgb(97, 97, 97);
                            font-weight: 500;

                            width: 100%;

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

                            .AppHeaderNavigationBlockCategory__Links > a:hover {
                                background: rgb(241, 241, 241);
                                color: rgb(57, 57, 57);
                            }
                        
                            .AppHeaderNavigationBlockCategory__Links > a > img {
                                width: 100%;
                                height: auto;
                                max-width: var(--icon-button-size);

                                margin-right: var(--size-07);
                                
                                opacity: 0.7;
                                transition: 0.4s;
                            }

                                .AppHeaderNavigationBlockCategory__Links > a:hover > img {
                                    transition: 0.2s;
                                    opacity: 1.0;
                                }

                        .AppHeaderNavigationBlockCategory__Links > a > span:nth-of-type(1) {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: flex-start;

                            width: 100%;
                        }

                        .AppHeaderNavigationBlockCategory__Links > a > span:nth-of-type(2) {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: flex-start;

                            background: rgb(235, 235, 235);
                            border: 1px solid rgba(225, 225, 225, 0.0);
                            border-radius: var(--size-07);

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

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

                            transition: 0.4s;
                        }

                            .AppHeaderNavigationBlockCategory__Links > a:hover > span:nth-of-type(2) {
                                transition: 0.2s;
                                border: 1px solid rgb(225, 225, 225);
                            }

    .AppHeader__Profil {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    
        background: rgb(247, 247, 247);
        border-top: 1px solid rgb(237, 237, 237);
        border-bottom-left-radius: var(--size-07);

        width: 100%;

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

        transition: 0.4s;
    }

        .AppHeader__Profil:hover {
            transition: 0.2s;
            background: rgb(241, 241, 241);
        }

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

            /* background: url( '/assets/images/photo-test.jpeg' );
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat; */
            border: 1px solid rgb(217, 217, 217);
            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-07);
        }

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

            width: 100%;
        }

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

                width: 100%;
            }

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

            .AppHeaderProfilData__Type {
                display: block;

                color: rgb(127, 127, 127);
                text-align: left;
            }