.appMenuContainer { display: grid; grid-template-rows: 38px 1fr; height: 100%; }
    .appMenuContainer > div:nth-child(1) { overflow: visible; }
    .appMenuContainer > div:nth-child(2) { width: 100%; background-color: #516aa5; color: #fff; }

#applicationLogo { position: absolute; top: 0px; left: 30px; font-display: block; font-family: koblenz-serial-lightregular; font-size: 30px; margin-top: 0px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; cursor: pointer; z-index: 1 }
#applicationCompany { position: absolute; top: 15px; left: 190px }

/* Main Menu */
#applicationMM { font-family: Arial; font-size: 14px; position: absolute; right: 0px; max-width: calc(100% - 300px); padding: 5px 5px 0px 0px; white-space: nowrap; font-size: 0; z-index: 20; overflow: hidden; }
    #applicationMM > div { position: relative; display: inline-block; vertical-align: top; margin: 0px 10px 0px 0px; height: 28px; line-height: 28px; color: #516AA5; font-size: 14px; box-sizing: content-box; cursor: default; }
        #applicationMM > div a { text-decoration: none; color: inherit }
        #applicationMM > div:not(:last-child):after { vertical-align: top; content: ''; font-size: 22px; padding-right: 10px; line-height: 28px; border-right: 1px solid #e3e8f3; }
        #applicationMM > div.selected { text-shadow: 1px 1px 1px #ccc; background: url('/image/selectedmenu.svg') no-repeat calc(50% - 5px) bottom; padding-bottom: 10px; }
        #applicationMM > div:hover { text-shadow: 1px 1px 1px #ccc; }
            #applicationMM > div:hover .applicationDD { visibility: visible; height: auto; opacity: 1; transform: translateY(0); }
            #applicationMM > div:hover .notificationContainer { visibility: visible !important; opacity: 1; transform: translateY(0); }

/* Main Menu Drop Down */
.applicationDD { position: fixed; top: 33px; border-radius: 0 0 5px 5px; padding: 0px 0px 10px 0px; color: #516AA5; background-color: #f7f7f7; box-shadow: 1px 5px 8px 0px rgba(0,0,0,0.2); z-index: 50; visibility: hidden; height: 0; opacity: 0; transform: translateY(-10px); transition: transform 0.3s ease, opacity 0.3s ease, height 0.3s ease, visibility 0.3s ease; overflow: hidden; }
    .applicationDD > div { padding: 5px 12px 0px 10px; line-height: 15px; cursor: default; text-shadow: none; }
    .applicationDD.right > div { text-align: right }
    .applicationDD > div:hover { text-shadow: 1px 1px 1px #ccc; }

/* Submenu */
#applicationSM { padding-left: 5px; width: 100%; background-color: #516aa5; color: #fff; font-size: 0; white-space: nowrap }
    #applicationSM > div { width: calc(100% - 220px); margin-left: 60px; overflow-x: auto; overflow-y: hidden; display: inline-block; height: 42px; padding: 0px 7px; }
        #applicationSM > div > div { display: inline-block; margin-top: 8px; height: 24px; padding: 0px 7px; }
            #applicationSM > div > div:not(:last-child) { border-right: 1px solid #8297c4 }
            #applicationSM > div > div a { color: #fff; text-decoration: none; font-size: 14px; height: 24px; line-height: 24px; }
                #applicationSM > div > div a:hover { color: #f9c32f; }
                #applicationSM > div > div a.selected { color: #f9c32f; }

/* Notifications Menu */
.dNotificationIconContainer { position: absolute; top: 0px; left: 0px; font-size: 28px; text-shadow: none }
#dNotificationCounter { position: absolute; top: 0px; left: 15px; padding: 2px 4px; height: 16px; font-size: 14px; line-height: 12px; color: #fff; background-color: #d00; border-radius: 8px }

.notificationContainer { position: fixed; top: 33px; color: #000; background-color: #f7f7f7; text-shadow: none; width: 400px; right: 0px; height: calc(100vh - 45px) !important; line-height: 16px; overflow-y: auto; box-shadow: 1px 5px 8px 0px rgba(0,0,0,0.2); visibility: hidden; opacity: 0; transform: translateY(-10px); transition: transform 0.3s ease, opacity 0.3s ease, height 0.3s ease, visibility 0.3s ease; }
    .notificationContainer > div:hover { text-shadow: none !important; }
    .notificationContainer .highlight:hover { cursor: pointer; background-color: #ddd }

    .notificationContainer .controlheader { position: sticky; top: -25px; background-color: #f7f7f7; border-bottom: solid 5px #f7f7f7; z-index: 2 }
    .notificationContainer .header { position: sticky; top: 37px; text-indent: 5px; line-height: 30px; margin: 0px 5px; background-color: #f7f7f7; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; z-index: 1 }
    .notificationContainer .section { margin: 5px; }

    .notificationContainer .item { display: flex; align-items: flex-start; gap: 1px; padding: 5px; border-radius: 5px }
        .notificationContainer .item > :nth-child(1) { width: 40px; flex-shrink: 0; font-size: 11px; color: #666; }
        .notificationContainer .item > :nth-child(2) { flex: 1; min-width: 0; color: #666; overflow-x: hidden; text-overflow: ellipsis; margin-right: 5px; font-size: 12px }
            .notificationContainer .item > :nth-child(2) > div { color: #000; margin-bottom: 5px; overflow-x: hidden; text-overflow: ellipsis; font-size: 14px }
            .notificationContainer .item > :nth-child(2) a { color: #516aa5 !important }
                .notificationContainer .item > :nth-child(2) a:visited { color: #516aa5 !important }
                .notificationContainer .item > :nth-child(2) a:hover, .notificationContainer .item > :nth-child(2) a:active { color: #516aa5 !important; text-shadow: 1px 1px 1px #888; }
        .notificationContainer .item > :nth-child(3) { width: 20px; flex-shrink: 0; }
        .notificationContainer .item:hover { background-color: #ddd }