/* ################################################################################## */
/* ################################### MENU ######################################### */
/* ################################################################################## */


#divBodyWrapper             {height:100vh;display: flex;flex-flow: column;max-width:1280px;margin:auto;}

#divHeader                  { height:100px;background-color: var(--color95);}
#divHeader .divImgWrapper   { position:relative;margin-left:15px;display:inline-block;text-align:center;width:90px;}
#divHeader .divImglabel     { font-size:12px; border:0px solid green;}
#divHeader img              { border:0px solid blue; height:50px;width:auto;cursor:pointer;display:inline-block; }
#divHeader .imgHamburger    {display:none;}
#divHeader table{height:100%;}
#divHeader table td:first-child {padding-left:15px;}
#divHeader table td:last-child {width:130px;text-align:right;padding-right:5px;}
#divHeader table td{position:relative;vertical-align:middle;overflow:hidden;white-space: nowrap;}

#divContainer       {flex: 1 1 auto;}
#divContent         {height:100%;background-color:var(--color100);padding:5px;position:relative;}
#divContent iframe  {border:0px solid red;}

#tableContainer                 {height:100%;}
#tableContainer td              {vertical-align:top;height:100%;}
#tableContainer td:first-child  {width:250px;background-color: var(--color95);} /* var(--color95) */


@media (max-width: 1000px) 
{
    #divHeader .divImglabel     { display:none; }
    #divHeader .divImgWrapper   { width:auto; }
    #divHeader table td:last-child {padding-right:15px;}
}

@media (max-width: 670px) 
{
    #divHeader .divImgWrapper       { display:none; }
    #divHeader .imgHamburger        { display:inline-block;}
    #tableContainer td:first-child  { display:none;}
    #divHeader                      { height:50px;}
    #divHeader img                  { height:40px} 
}

.submenuBlock
{
    display:inline-block;
    min-width:150px;
    border:1px solid var(--color80);
    z-index:1;
    position:absolute;
    background-color: var(--color100);
    padding:5px;
}

.submenuEntry
{
    padding-top:5px;
    padding-bottom:5px;
    user-select: none; 
    cursor:pointer;
    text-overflow: ellipsis;
    overflow:hidden;
    white-space: nowrap;
    max-width:200px;
    padding-left:20px;
    position:relative;
    line-height: 30px;
}

.submenuEntry:before {
    content: '\25B2\FE0E'; /* \FE0E prevents emoij display */
    position:absolute;
    left: 7px;
    width:16px;
    height:16px;
    top:50%;
    transform: translateY(-50%) rotate(90deg);
    opacity:0.9;
} 

.submenuEntry:hover
{
    text-decoration: underline;
}



/* ################################################################################## */
/* ################################### Instances #################################### */
/* ################################################################################## */

.navInstance                    {padding-right:40px;padding-left:40px;text-overflow: ellipsis;overflow:hidden;white-space: nowrap;opacity:0.6;background-color:inherit;user-select: none; cursor:pointer;position:relative;line-height: 50px;}
.navInstance.active             {opacity:1;background-color:var(--color100);}
.navInstance .moduleImg         {overflow:hidden;position:absolute;left:5px;width:30px;height:auto;opacity:0.5;	top:50%;transform: translateY(-50%);}
.navInstance .closeImg          {overflow:hidden;position:absolute;right:5px;width:20px;height:auto;opacity:0.5;top:50%;transform: translateY(-50%);}

@media (min-width: 1000px) 
{
    .navInstance .closeImg          {display:none;}
    .navInstance:hover .closeImg    {display:inline-block;}
}

.iframeModuleContent            {display:none;}
.iframeModuleContent.active     {display:block;}


/* ################################################################################## */
/* ################################### Responsive #################################### */
/* ################################################################################## */
#divResponsiveMenu {display:none;}
@media (max-width: 600px) 
{
    #tableContainer td:first-child.responsiveMode  { display:block;width:100%;}
    #tableContainer td:last-child.responsiveMode   { display:none;}
    #divResponsiveMenu                             { display:block;}
}

#divResponsiveLabel                         {padding:20px;font-weight:bold;}
#divResponsiveMenu                          {border-top:1px solid var(--color70);}
#divResponsiveMenu .responsiveRow           {text-transform: uppercase;position:relative;line-height:50px;padding-left:50px;text-overflow: ellipsis;overflow:hidden;white-space: nowrap;}
#divResponsiveMenu .responsiveRow img       {overflow:hidden;position:absolute;left:5px;width:30px;height:auto;	top:50%;transform: translateY(-50%);}
#divResponsiveMenu .responsiveEntry         {cursor:pointer;position:relative;line-height:50px;padding-left:50px;text-overflow: ellipsis;overflow:hidden;white-space: nowrap;}
#divResponsiveMenu .responsiveEntry:hover   {text-decoration: underline;}

#divResponsiveMenu .responsiveEntry:before {
    content: '\25B2\FE0E'; /* \FE0E prevents emoij display */
    position:absolute;
    left: 40px;
    width:22px;
    height:22px;
    top:50%;
    transform: translateY(-50%) rotate(90deg);
    opacity:0.9;
} 

/* ################################################################################## */
/* ################################### Department listing ########################### */
/* ################################################################################## */

#divDepartmentListing{
    border:1px solid var(--color80);
    min-width:150px;
    min-height:20px;
    position:absolute;
    background-color: var(--color95);
    z-index:1;
    border-bottom:0px;
}

#divDepartmentListing .depEntry{
    border-bottom:1px solid var(--color80);
    padding:5px;
    cursor:pointer;
}


#divDepartmentListing .depEntry.active{
    font-weight:bold;
}

#divDepartmentListing .depEntry:hover
{
    text-decoration: underline;
}