/* July 25, 2024 */


/* header { display: inline-block; } */



/* header {height: 2.2rem;} */
/* header {height: 3.2vh;} */
/* header {height: 3.6vh;} */
header {height: 36px;}

header.hidden {
    max-height: 0;
}
header.hidden .nav_subgroup:not(.nav_subgroup_3) {
    display: none;
}

#menu_main, header { position: relative; }



/* .  M E N U  .  M A I N  . */
    /*  [s.MenuMain]  */
/* .  M E N U  .  M A I N  . */
/* #menu_main {} */

#menu_main {
    width: 100%;
    height: 100%;
    /* font-size: calc( 12px + (16 - 12) * ((100vw - 500px) / (1920 - 500)) ); */
    color: #555;
}

#menu_main > div {
    cursor: pointer;
    user-select: none;
    /* background-color: aquamarine; */
}


.nav_subgroup_1 {
    float:left;
    /* clear: both; */
}
.nav_subgroup_2 {float:left;}
/* .nav_subgroup_2 {float:right;} */
.nav_subgroup_3 {float:left;}


.nav_subgroup {
    display: inline-block;
    /* width: 4rem; */
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}


.nav_subgroup_3 {
    position: relative;
    justify-content: end;
}




.nav_subgroup_1 {width: calc((100% / 10) * 2);}
.nav_subgroup_2 {width: calc((100% / 10) * 6);}
.nav_subgroup_3 {width: calc((100% / 10) * 2);}


.nav_subgroup_2 span {float: left;}



.nav_subgroup_2 {background-color: aquamarine;}

.nav_subgroup_2 {
    display: flex;
    /* justify-content: space-evenly; */
    align-items: center;
    gap: 0;
}
.nav_subgroup_2 > span.nav_item {
    width: 100%;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}
.nav_subgroup_1 #header_logo { width: 100%; }


/* #menu_main > div > span {height: 100%;} */
/* #menu_main > div > span {vertical-align: middle;} */

.nav_child {height: 100%;}
/* #menu_main > div > span { */
.nav_child {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

/* #menu_main > div > span:hover {background: #EEA385;} */
.nav_child:hover {background: #EEA385;}



#nav-img_uploader {
    /* height: 100%; */
    user-select: none;
    /* margin-left: 40px; */
}
#fileSelect {
/* background-color: blueviolet; */
            /* height: 100%; */
            /* width: 100%; */
            text-align: center;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}
#fileElem {
    display: inline-block;
    /* width: 100%; */
    /* width: 80%; */

    /* margin-bottom: 0.2rem; */
    display: none;
}

#nav-img_uploader.active {
    background-color: rgb(99, 77, 238);
    color: #eee;
}
#fileSelect.active {
    color: #EEA385;
}




/* Nav Subgroup 3 */
#nav_display_toggle {
    padding: 0 15px;
    /* transform: scale(1.4); */
    color: black;
    /* background-color: #EEA385; */

    /* max-height: 100%; */
    font-size: 22px;
    height: 36px;
    /* max-height: 36px; */
    max-height: 44px;
    /* max-height: 38px; */
}

#nav_display_toggle.active {
    transform: rotate(180deg);
    /* transform: rotate(180deg) scale(3, 1.8); */
/* transform: scale(3, 1.8); */
    /* transform: scale(3, 1.8) translateX(-37px); */
/* transform: scale(3, 1.8) translateX(-25%); */
/* transform: rotate(180deg) scale(3, 1.8) translateX(-25%); */
    /* padding-left: 0px; */

    /* padding-right: 10px; */
    /* padding-bottom: 8px; */
    /* right: -12px; */
    /* top: -8px; */
    /* padding-right: 10px; */

    top: 0;
    right: 0;

    z-index: 100;
    opacity: 0.4;
    opacity: 0.2;

    display: flex;
    padding: 0;
    padding-top: 5px;

    position: fixed;
    

    /* transform: scale(3, 1.8) translateX(25%); */
    /* transform: rotate(180deg) scale(3, 1.8) translateX(25%); */

    /* top: -10px; */
    /* right: -26px; */

    /* width: 50px; */
    width: 30px;
    height: 36px;

    /* justify-content: flex-start; */
    /* justify-content: center; */
    /* padding-left: 45px; */

    padding: 0;
    top: 0;

    /* padding: 10px 0; */
    padding-bottom: 10px;
    padding-top: 6px;

    /* max-height: unset; */


}

#nav_display_toggle.active {
    font-size: 22px;
    font-size: 26px;
    /* transition: width 1.4s height 1.4s top 1.4s; */
    /* transition: width 1.4s height 1.4s; */
    /* transition: top 1.4s; */

    /* border: 1px solid rgba(238, 163, 133, 1); */
}



#nav_display_toggle.active:hover {
    opacity: 1;
    right: 0;
    top: 0;
    top: 10px;
    top: 6px;
    right: 6px;

    width: 40px;
    height: 46px;
    /* transition: right 0.2s, top 0.2s; */
/* transition: width 1.4s, height 1.4s, top 0.2s; */
    /* transition: width 1.4s, height 1.4s, top 0.2s, left 0.2s; */
    /* transition: width 0.4s, height 0.4s, top 0.4s; */
    transition: width 0.4s, height 0.4s, top 0.4s, right 0.4s;
}


/* #nav_display_toggle.active {
    transform: rotate(180deg) scale(3, 1.8) translateX(25%);
    padding: 0;
    top: 0;
} */

/* .nav_subgroup_3, #nav_display_toggle { display: none; } */

/* @media only screen and (((max-width: 1100px) and (max-height: 500px)) or ((max-width: 500px) and (max-height: 1100px))) { */
/* @media (max-width: 1100px) and (max-height: 500px) {
    #nav_display_toggle.active {
        top: 2px;
        right: 2px;

        width: 40px;
        height: 46px;

        width: 60px;
        height: 60px;
    }
}
 */












/* #nav_icon_grid {position: absolute;} */

.icon_grid * {
    box-sizing: border-box;
    /* box-sizing: content-box; */
}

.icon_grid {
    /* position: absolute;
    top: 0;
    right: 4%; */

    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: 100%;
    margin: 0 10px;

    
    width: 3rem;
    width: 4rem;
}


/* .icon_grid { margin: 0 10px 0 20px; } */



/* .icon_grid {
    height: 2rem;
    width: 2rem;

    height: 100%;
    height: calc( 12px + (16 - 12) * ((100vw - 500px) / (1920 - 500)) );

    height: 90%;

    justify-content: center;
    align-items: center;
    flex-direction: column;

    height: 50%;

    display: inline-flex;
    height: 100%;
    margin: 0 10px;

    width: 3rem;
} */

/* .icon_grid {
    position: absolute;
    top: 0;
    right: 4%;
} */

.icon_grid .outer_container {
    position: relative;
    height: 100%;
    width: 100%;

    /* height: 20px;
    width: 20px; */

    /* width: auto; */

    pointer-events: none;
    
    height: 80%;
    padding: 0 10px;
    /* padding: 0 20px; */

    margin: 0 25px;

    width: 2rem;
}



.icon_grid:hover {background-color: #eee;}
/* .icon_grid:hover .icon_grid .outer_container {background-color: #eee;} */







/* .icon_grid .outer_container span { */
.icon_grid span {
    background-color: #111;
    position: absolute;
    pointer-events: none;
}
.icon_grid .v_line {
    height: 100%;
    width: 0.2rem;
    top: 0;
}
.icon_grid .h_line {
    height: 0.2rem;
    width: 100%;
    left: 0;
}

/* .icon_grid span:active {background-color: #eee;} */


.icon_grid .v-line_1 {left: 0;}
.icon_grid .v-line_2 {
    /* left: calc(100%); */
    /* left: 20%; */

    /* left: calc(100% / 3); */
    /* left: calc((100% / 3) - 1.5%); */


    left: calc(((100% / 3) * 1) - (3% * 1));
}
.icon_grid .v-line_3 {
    /* left: 40%; */

    left: calc((100% / 3) * 2);
    /* left: calc(((100% / 3) * 2) - 3%); */
    /* left: calc(((100% / 3) * 2) - 1.5%); */
    left: calc(((100% / 3) * 2) - 3%); /* bc of 2 vertical-lines? */
    left: calc(((100% / 3) * 2) - 1.5%);


    left: calc(((100% / 3) * 2) - (3% * 2));

}
.icon_grid .v-line_4 {
    /* left: 60%; */
    /* left: 100%; */
    /* right: 100%; */
    /* background-color: blue; */

    /* left: calc(((100% / 3) * 3)); */
        /* left: calc(((100% / 3) * 3) - 0.2rem); */
    /* right: calc(100% - 3%); */
    /* right: 2%; */
    /* right: 3%; */
    /* left: calc(((100% / 3) * 3) - 1.5%); */
    /* left: calc(((100% / 3) * 3) - 4.5%); */
    /* right: 0%; */


    left: calc(((100% / 3) * 3) - (3% * 3));




    /* right: calc(100% - 0.2rem); */
    /* right: calc(100 - 0.2) * 1rem; */
}
/* .icon_grid .v-line_5 {} */

/* .icon_grid .h-line_1 {top: 0;}
.icon_grid .h-line_2 {top: calc(100% / 3);}
.icon_grid .h-line_3 {top: calc((100% / 3) * 2);}
.icon_grid .h-line_4 {top: calc((100% / 3) * 3);} */

.icon_grid .h-line_1 {top: 0;}
.icon_grid .h-line_2 {top: calc(100% / 3);}
.icon_grid .h-line_3 {top: calc((100% / 3) * 2);}
.icon_grid .h-line_4 {top: calc((100% / 3) * 3);}
/* .icon_grid .h-line_5 {} */

.icon_grid .v-line_1 {left: 0;}
.icon_grid .v-line_2 {left: calc(100% / 3);}
.icon_grid .v-line_3 {left: calc((100% / 3) * 2);}
.icon_grid .v-line_4 {left: calc((100% / 3) * 3);}





.icon_grid .v_line {width: 3%;} 
.icon_grid .h_line {height: 3%;}






.icon_grid .v-line_1 {left: 0;}
/* .icon_grid .v-line_2 {left: calc((100% - (4% * 3)) / 3);}
.icon_grid .v-line_3 {left: calc(((100% - (4% * 3)) / 3) * 2);}
.icon_grid .v-line_4 {left: calc(((100% - (4% * 3)) / 3) * 3);} */

.icon_grid .h-line_1 {top: 0;}
/* .icon_grid .h-line_2 {top: calc((100% - (4% * 3)) / 3);}
.icon_grid .h-line_3 {top: calc(((100% - (4% * 3)) / 3) * 2);}
.icon_grid .h-line_4 {top: calc(((100% - (4% * 3)) / 3) * 3);} */


.icon_grid .h-line_2 {top: calc(97% / 3);}
.icon_grid .h-line_3 {top: calc((97% / 3) * 2);}
.icon_grid .h-line_4 {top: calc((97% / 3) * 3);}

.icon_grid .v-line_2 {left: calc(97% / 3);}
.icon_grid .v-line_3 {left: calc((97% / 3) * 2);}
.icon_grid .v-line_4 {left: calc((97% / 3) * 3);}






#nav_download_img {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border: 1px solid black;
    border-top: none;

    /* padding: 0 15px; */
    width: 30px;

    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    align-items: center;
}
#nav_download_img a {
    /* width: 100%;
    height: 100%; */
    /* display: inline-block; */
    /* margin: auto; */
    width: 90%;
    height: 90%;

    width: 100%;
    height: 100%;

    /* pointer-events: none; */

    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
}





/* Menu Main - Zoom Tools [s.Zoom] */
/* Menu Main - Zoom Tools */


@media screen and ((max-width: 1100px) and (max-height: 500px)) {
    /* .nav_child:hover {background: #EEA385;} */
    .nav_child:hover {background: transparent;}
}