/* kontener głównego paska menu oraz komponentu wylogowania */

.menu-glowne {
    background: var(--menu-kolor-bg) !important; /* ustawia tlo elementu wylogowania */
    box-shadow: var(--menu-box-shadow) !important;
}

body[mobile="true"] .menu-glowne {
    height: var(--wysokosc-menu-mobile, 100px) !important;
}

.wiersz-wyloguj {
    display: flex;
    align-items: center;
    height: 100%;
}

/* glowny pasek menu */
#c_menu {
	border: none !important;
	background: var(--menu-kolor-bg) !important;
	color: var(--menu-kolor-czcionka) !important;
	position: static !important;
	height: var(--wysokosc-menu-desktop, 33px) !important;
}

body[mobile="true"] #c_menu {
    height: var(--wysokosc-menu-mobile, 100px) !important;
}

.pasek-menu-mobilne {
    height: var(--wysokosc-menu-mobile, 100px) !important;
}

.element-pasek-menu-mobilne {
    font-size: var(--font-size-menu-mobile, 30px);
    padding: 0 var(--padding-przycisk-menu-mobile, 15px);
    box-sizing: border-box;
}

.element-pasek-menu-mobilne-login {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

body[mobile="true"] .przycisk-menu {
    font-size: var(--font-size-menu-mobile, 30px);
    padding: 0 var(--padding-przycisk-menu-mobile, 15px);
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    cursor: pointer;
}

body[mobile="true"] #c_menu .przycisk-menu {
    line-height: 1;
}

body[mobile="true"] .separator-menu {
    width: calc(100% - var(--padding-przycisk-menu-mobile, 15px) * 2);
}

.panel-menu-mobilne {
    background-color: white;
    width: 100%;
    height: calc(100% - var(--wysokosc-menu-mobile, 100px));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* podmenu - po wybraniu pozycji z glownego paska menu, jest kompletnie oddzielne od menu wiec trzeba duplikowac czesc styli miedzy menu w podmenu */
[id^="c_menu_menu"] {
	background: var(--menu-kolor-bg) !important;
	border: none !important;
	box-shadow: var(--menu-box-shadow) !important;
	border-radius: var(--border-radius);
	color: var(--menu-kolor-czcionka) !important;
}

/* podmenu - odstep gora/dol miedzy poczatkiem/koncem podmenu a elementami w jego srodku */
[id^="c_menu_menu"] > table {
	margin-top: 5px;
	margin-bottom: 5px;
}

/* menu bar layout */
#c_menu > table,
#c_menu > table > tbody,
#c_menu > table > tbody > tr,
#c_menu > table > tbody > tr > td,
#c_menu > table > tbody > tr > td > div {
    display: flex;
    height: 100%;
    align-items: center;
}

[id^="c_menu_bar_td_item"] {
    padding: 0 12px !important;
}

[id^="c_menu_bar_td_item"] > div {
    padding: 0 !important;
}

[id^="c_menu_bar_td_item"] > img,
[id^="c_menu_bar_td_item"] > svg {
    padding-right: 6px;
}

[id^="c_menu_bar_td_item"]:hover img,
[id^="c_menu_tr_item"]:hover img {
    filter: invert();
}

[id^="c_menu_bar_td_item"] > img + div,
[id^="c_menu_bar_td_item"] > img + svg {
    padding-left: 0px !important;
    padding-right: 6px !important;
}

[id^="c_menu_tr_item"] > td {
    padding-left: 0 !important;
}

[id^="c_menu_tr_item"] > td:first-child:last-child, /* only text node */
[id^="c_menu_tr_item"] > td[colspan], /* icon and text node */
[id^="c_menu_tr_item"] > td[style^="padding: 1"]:first-child:nth-last-child(2), /* text node and submenu chevron */
[id^="c_menu_tr_item"] > td:nth-last-child(2):nth-child(2) /* icon, text node and submenu chevron */
{
    flex-grow: 1;
}

/* podmenu - podmien znaczek pod-podmenu */
[id^="c_menu_tr_item"] > td:not([colspan]):last-child:after {
    content: '\e967';
    font-family: 'vaadin-icons';
}

[id^="c_menu_tr_item"] > td:not([colspan]):last-child > img {
    display: none;
}

/* odstep miedzy elementami w podmenu */
[id^="c_menu_tr_item"] {
	padding-left: 15px !important;
	padding-right: 15px !important;
	line-height: 2;
	display: flex;
	align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* elementy podmenu - pusta przestrzen lewo/prawo */
[id^="c_menu_tr_item"] > td:not(:last-child) {
    padding-right: 8px !important;
}

#c_menu td[id*=bar_td_item] {
    transition: all 0.2s ease;
}

#c_menu td[id*=bar_td_item]:hover, [id^="c_menu_tr_item"]:hover {
    color: var(--menu-kolor-czcionka-hover) !important;
    background-color: var(--menu-kolor-bg-hover) !important;
}

#c_kontenerWierszaWyloguj {
    background: none !important;
}

/* menu w tabelce pod PPM*/
menu#menu {
   margin: 0;
}