:root { --menu-dropdown-background-color: #ffffff; --menu-dropdown-border-color: #49844d; --menu-dropdown-text-color: #2d2b2b; --menu-dropdown-text-muted-color: #aaaaaa; --menu-dropdown-hover-background-color: #adecab; --menu-dropdown-hover-text-color: #2d2d2d; --menu-dropdown-divider-color: #e5e5e5; } .sr_only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .main_menu { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .main_menu > ul.menu_bar { display: flex; flex-direction: row; list-style: none; padding: 0; margin: 0; height: 30px; padding-left: 10px; background: var(--menu-background-color); } .main_menu > ul.menu_bar > li { padding: 0; overflow: hidden; height: 100%; } .main_menu > ul.menu_bar > li > a { display: flex; align-items: center; font-size: 12px; color: var(--menu-text-color); text-decoration: none; padding: 0 10px; height: 100%; } .main_menu > ul.menu_bar > li > a::-moz-focus-inner { border: 0; } .main_menu > ul.menu_bar > li > a:focus { outline: none; box-shadow: 0 -3px var(--menu-dropdown-background-color) inset; } .main_menu > ul.menu_bar > li > a:hover { background: var(--menu-dropdown-hover-background-color); box-shadow: none; color: var(--menu-dropdown-hover-text-color); } .main_menu > ul.menu_bar > li > a[aria-expanded="true"] { background: var(--menu-dropdown-background-color); box-shadow: none; color: var(--menu-dropdown-text-color); } .main_menu > ul.menu_bar > li > a > * { pointer-events: none; } .main_menu > ul.menu_dropdown { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; list-style: none; padding: 0; margin: 0; overflow-x: hidden; overflow-y: auto; min-width: 150px; box-shadow: 0 0 0 1px var(--menu-dropdown-border-color); background: var(--menu-dropdown-background-color); } .main_menu > ul.menu_dropdown > li { padding: 0; } .main_menu > ul.menu_dropdown > li > hr { background: none; border: 1px solid var(--menu-dropdown-divider-color); border-bottom: none; margin: 0; } .main_menu > ul.menu_dropdown > li > a { display: flex; flex-direction: row; align-items: center; position: relative; height: 30px; padding: 0 10px; font-size: 12px; line-height: 30px; text-decoration: none; color: var(--menu-dropdown-text-color); } .main_menu > ul.menu_dropdown > li > ::-moz-focus-inner { border: 0; } .main_menu > ul.menu_dropdown > li > a:focus { outline: none; box-shadow: 0 0 0 2px var(--menu-dropdown-hover-background-color) inset; } .main_menu > ul.menu_dropdown > li > a:hover { background: var(--menu-dropdown-hover-background-color); box-shadow: none; color: var(--menu-dropdown-hover-text-color); } .main_menu > ul.menu_dropdown > li > a[aria-expanded="true"] { background: var(--menu-dropdown-hover-background-color); box-shadow: none; color: var(--menu-dropdown-hover-text-color); } .main_menu > ul.menu_dropdown > li > a[aria-haspopup="true"]::after { position: absolute; content: ">"; right: 9px; width: 5px; transform: scaleY(2); color: #808080; } .main_menu > ul.menu_dropdown > li > a[aria-haspopup="true"] > .name { margin-right: 8px; } .main_menu > ul.menu_dropdown > li > a[target="_blank"]::after { content: ""; width: 10px; height: 10px; margin-left: 5px; background: url('images/icons/external.png') no-repeat center center; background-size: auto 8px; opacity: 0.3; } .main_menu > ul.menu_dropdown > li > a > * { pointer-events: none; } .main_menu > ul.menu_dropdown > li > a > .name { flex-grow: 1; overflow: hidden; white-space: nowrap; } .main_menu > ul.menu_dropdown > li > a > .shortcut { flex-shrink: 1; color: var(--menu-dropdown-text-muted-color); } .mobile_menu { display: none; position: absolute; width: 100%; top: 0; } .left_mobile_menu, .right_mobile_menu { position: absolute; width: 50px; height: 50px; display: block; top: 0; z-index: 200; border: 0; outline: 0; cursor: pointer; background-color: transparent; } .left_mobile_menu:after, .right_mobile_menu:after { position: absolute; content: ''; left:0; top:0; bottom:0; right:0; filter: var(--mobile-menu-toggle-filter); background: url('images/icons/menu.svg') no-repeat center center; background-size: auto 26px; } .left_mobile_menu { left:0; } .right_mobile_menu { right:0; } @media screen and (max-width:700px) { .mobile_menu { display: block; } .main_menu > ul.menu_bar { height: 50px; padding-left: 50px; padding-right: 50px; } }