/*==============================================================================================================================
	bardzo trudny kawałek chlenba, który dał mi w kość.
	Ogólnie wszelki layout to ma być flex - dlaczego bo ma to byc. Komórka ma być rozciągnięta tak jak jest to w tabeli. Nie może sobnie być komórka na środku w tabeli. One wszystkie miają byc jak komórki tabeli a więc od deski do deski. Taki jest ogół.
	
	Tu robimy wyjątek i komórki logo oraz logowania mają być wyśrodkowane z minimalną szerokością 16rem, która będzie podtrzymana przez ściskanie rodzica align-items: center; - to wymusza na potomnych komórkach ściśnięcie do środka i wyśrodkowanie względem innych dzieci do środka - tak działa - align-items: center; , natomiast align-content: stretch; uastawia ten cały układ względem przestrzeni które ma rodzić czyli w środku rodzica i tak - jak jest center to rodzic to wszystko ściska i ustawia dzieci wyśrodkowane względem siebie i teraz plus align-content: center - ustawia cały ten układ na środku - align-content: left czyli start itp cały ten układ do lewej ale nadal dzieci względem siebie sa wyśrodkowane ale przesunięte nieco na lewą flankę rodzica - align-content: stretch; dociąga rozciągnięcie do granic rodzica jeśli align-items: jest stretch; - bo to powoduje rozciągnięcie dzieci ale tylko względem soiebie czyli wszystkie mają szerokość równą najszerszego bachora ale nie rodzica i może byc wolna przestrzeń więc align-content: stretch; dociąga ich jeszcze bardziej. align-content: stretch; wydaje się nie miec na nic wpływu jak align-items: nie jest stretch; tylko center albo left itp to tyle jeśli chodzi o układ kontenerowy flex.
	
	Możemy ustalić wewnętrzną - własną szerokość elementu i tak min-width jest dobre jak rodzic każe ściskac dzieci, bo to ustali bezwzględną granicę ścisku a max-width to granica stretch, kiedy rodzic każe rozciągać dzieci. Pojebane co ?
	
	ciekawa rzecz, że przy stretchu dla bachorów align-items i stałej szerokośsci bachora i inny bachor nie ma stałej szerokości to stretch zaczyna się od lewej strony. Tak więc wąskie bachory lądują na lewą stronę zamiast na środek a bachor bez wymiaru rozciąga rodzica i siebie nawet jak rodzić ma nad sobą rodzica ściskającego typu center. Align-text rodzica nie działa.
	
	A teraz uwaga tu jest jednak wyjątek od tych założen, bo na początku mamy wąską kolumnę logowania a stopka jest maksymalnie szeroka a więc główny układ nie może rozciągać musi kurczyć, bo w takim przypadku przy stretch i stałej szerokości kolumny 16rem to te kolumny układane są od lewej krawędzi układu.
	
	Kolejne problemy. Okazało się że nie można za bardzo zagnieżdżać divów bo jest probelm z marginesami, czyli div komórka to komórka, kolejny div do podłoże, a kolejny to zawartość komórki, która może mieć marginesy itp a woięc układ jest następujący cell-box-data i box musi być flow-root, bo w przeciwnmym razie może się stać tak że box będzie miał tło a data marginesy i okaże się że nie widać górnej ramki i dolnej z tła pod spodem czyli boxa, za to boczne widać - pojebane... Musi być zatem box typu flow-root bo tworzy dla tego elementu nowy Block Formatting Context (BFC).
	==============================================================================================================================*/



	/*==============================================================================================================================
																ogólne
	==============================================================================================================================*/
	
	/* ====================================================== globalne ====================================================== */

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		background-color: rgb(0 0 0);
		background-image: url("../images/background/curse_of_the_allflame_background.png");
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% auto;
		background-attachment: fixed;

		font-family: Verdana, sans-serif;
		font-size: 14px;
		color: goldenrod;
	}

	body {
		
		margin: 0;
	}
	
	/* ====================================================== elementy ====================================================== */
	
	a{
		color: gold;
		font-family: inherit;
		font-size: inherit;
		text-decoration: none;
	}

	a:hover {
		color: yellow;
	}
	
	div{
		
		border-radius: 0.3rem;
	}

	/*==============================================================================================================================
															main layout
	==============================================================================================================================*/

	/*przestrzeń i układ dwóch kolumn tool i foot. potrzebne dla ściskania panelu 1*/
	div.main_layout {

		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
		flex-wrap: wrap;
		
		min-width: 80rem;
		width: 80rem;

		margin: 1rem auto;
	}

	/*==============================================================================================================================
															tool layout
	==============================================================================================================================*/

	/*główne pole narzedzia z ramką w której jest kolumna jako wiersz kolumn oraz pod spodem info*/
	div.tool_layout {

		border: 1px solid gold;
		box-shadow: inset 0 0 10px 3px gold;
	}
	
	/* ====================================================== first row tool ====================================================== */
	
	div.first_row_tool_layout {
		
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: center;
		align-content: flex-start;

		flex-wrap: nowrap;
	}

	/*==============================================================================================================================
															panel 1 layout
	==============================================================================================================================*/
	
	/*kolumna filtrów i nawigacji*/
	div.panel_1_layout {
		
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		align-content: stretch;
		flex-wrap: wrap;
		
		max-width: 16rem;
		min-width: 16rem;
		width: auto;
	}

	/* ====================================================== login cells layout ====================================================== */

	div.login_cells_layout {

		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		align-content: stretch;
		flex-wrap: wrap;

		text-align: center;
	}

	div.login_cell{

		border: 1px solid gold;
		
		text-align: inherit;
	}

	div.login_cell_box{

		display: flow-root;
		
		text-align: inherit;
	}

	div.login_cell_box_data{
		
		text-align: inherit;
		overflow-wrap: anywhere;
		
		margin: 0.5rem;
	}
	
	/* --------------------------------------------------- elements --------------------------------------------------- */
	
	img.logo{
		
		display: block;
		width: 4rem;
		margin: 0 auto;
	}

	img.logo:hover{
		
		filter: brightness(1.3);
	}
	
	/* ====================================================== allert cells layout ====================================================== */

	div.error_cell_box_data{
		
		background-color: rgb(255 165 0 / 10% );
	}
	
	/*==============================================================================================================================
															footer cells layout
	==============================================================================================================================*/

	div.footer_cell_layout {
		
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-content: stretch;
		align-items: stretch;
		flex-wrap: wrap;
		
		max-width: 78rem;
		min-width: 78rem;
		width: auto;

		margin: 1rem;
	}

	div.footer_cell {

	}

	div.footer_cell_box {
		
		display: flow-root;
		
		text-align: center;
	}

	div.footer_cell_box_data {

		color: darkgoldenrod;
		text-align: center;
		overflow-wrap: anywhere;
		
		margin: 0.25rem;
	}

	/*==============================================================================================================================
															specjalne
	==============================================================================================================================*/

	/* =================================================== sterujące ===================================================*/
	
	.hidden {
		
		display: none !important;
	}
	
	/* =================================================== animacja ===================================================*/
	
	div.fast_flashing_info {
		
		text-align: center;
		color: palegoldenrod;
		background-color: midnightblue;
		animation: flashing 0.1s linear infinite;
	}
	
	div.fast_flashing_warning {
		
		text-align: center;
		color: palegoldenrod;
		background-color: goldenrod;
		animation: flashing 0.1s linear infinite;
	}
	
	div.fast_flashing_error {
		
		text-align: center;
		color: palegoldenrod;
		background-color: red;
		animation: flashing 0.1s linear infinite;
	}
	
	div.slow_flashing_error {
		
		text-align: center;
		color: palegoldenrod;
		background-color: red;
		animation: flashing 1s linear infinite;
	}

	@keyframes flashing{

		0%, 100% {
			
			opacity: 0.7;
		}

		50% {
			
			opacity: 0.5;
		}
	}