/*
===============================================================
Plik: menu_left.css
===============================================================
*/

/* ======================================================
   Klasa kontenerowa dla lewego menu
   ====================================================== */
.MenuLeweKontener {
	position: fixed;
	top: 190px;
	width: 21.6%;
	height: calc(100vh - 190px);		/* minus odsunięcie od TOP */
	margin-left: 0px;
	text-align: left;
	vertical-align: top;
	display: flex;						/* flex, bo divy jeden pod drugim */
	flex-direction: column;			
	align-items: flex-start;			/* wyrównanie do lewej */
	overflow-wrap: break-word; 			/* Zawijanie tekstu w liściach */
	overflow: hidden;
}
/* =========================================
   WYŚWIETLA TYTUŁ KATEGORII LUB TYTUŁ POSTA
   ========================================= */
.MenuLeweNaglowek {
	width: 100%;
	height: 30px;
	margin-top: 10px;
	margin-bottom: 0px;
	padding: 0px;
    border: 0px solid purple;
}

/* =========================================
   WYŚWIETLA TYTUŁY POSTÓW W JEDNEJ KATEGORII LUB TYTUŁY AKAPITÓW DLA JEDNEGO POSTA
   ========================================= */
.MenuLeweLista {
    width: 90%;
	flex-grow: 1;    
	overflow-y: auto; /* Przewijanie w pionie, jeśli zawartość przekroczy max-height */
    overflow-x: hidden; /* Ukrywa poziome przewijanie */
    scrollbar-color: red black; /* Kolor paska przewijania */
	scrollbar-width: thin; /* Zmniejsza szerokość paska przewijania */
    direction: rtl; /* Pasek przewijania po lewej stronie */
	word-wrap: break-word;
	white-space: normal;
    box-sizing: border-box; /* Uwzględnia padding i border w szerokości */
    border: 0px solid yellow;
    margin-left: 0; /* aby div przylegał do lewej strony */
	margin-top: 5px;
    padding-top: 20px;
}

.MenuLeweLista::-webkit-scrollbar {
    width: 10px; /* Ustaw szerokość na 10px lub dowolną inną wartość */
}

.MenuLeweLista::-webkit-scrollbar-thumb {
    background-color: red; /* Kolor paska przewijania */
}
.MenuLeweLista::-webkit-scrollbar-track {
    background-color: black; /* Kolor tła paska przewijania */
}

.ulMenuLewe {
	list-style-type: none;
	margin-top: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 5px;
}

/* =========================================
   [1] WSPÓLNE DLA WSZYSTKICH
   ========================================= */
.liMenuLeweTytuly,
.liMenuLeweAkapit,
.liMenuLewePodAkapit,
.liMenuLeweKomentarze {
	list-style-type: none;
	border: 1px solid transparent;
	border-radius: 5px;
	color: #b38b5c;
}
/* =========================================
   [2] ROZBICIE NA INDYWIDUALNE - padding, margin, line-height
   ========================================= */

/* ===== TYTUŁY ===== */
.liMenuLeweTytuly {
	line-height: 25px;
	margin-left: 15px;
	margin-bottom: 3px;
	padding-left: 9px;
}
/* ===== AKAPITY ===== */
.liMenuLeweAkapit,
.liMenuLeweKomentarze {
	line-height: 18px;
	margin-left: 15px;
	margin-top: 3px;
	margin-bottom: 3px;
	margin-right: 35px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
}
/* ===== PODAKAPITY ===== */
.liMenuLewePodAkapit {
	line-height: 18px;
	margin-left: 15px;
	margin-top: 3px;
	margin-bottom: 3px;
	margin-right: 35px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 25px;
}
/* =========================================
   [3] STYLIZACJE DLA :hover oraz :active
   ========================================= */
.liMenuLeweTytuly:hover,
.liMenuLeweAkapit:hover,
.liMenuLewePodAkapit:hover,
.liMenuLeweKomentarze:hover,
.liMenuLeweTytuly:active,
.liMenuLeweAkapit:active,
.liMenuLewePodAkapit:active,
.liMenuLeweKomentarze:active {
	border: 1px solid grey;
	background-color: #202020;
	color: #edc18f;
}