@charset "utf-8";

/* 
BREAKPOINTS
>= 480px - desktop (default)
<  880px - mobile / tablet



PALETA:

#333 - ciemnoszary: header, footer
#999 - szary: ramka header, footer



***
***#999 - szary: tekst w footer
***#aaa - ramka dialogu, przycisków, ramki rozdzielające heder & footer



***#28226b 			- granat SDW: stopka
***#d90a3a          - czerwony SDW
***
***RoyalBlue (#4169e1) 				    - niebieski: 	custom_btn, main_menu_btn
***Navy (#000080)      				    - granat: 		action_btn
***Gray (#808080) / LightGray (#d3d3d3) - szary: 		cancel_btn
***ForestGreen (#228b22)				- zielony: 		ok_btn
***
***#444 - ciemnoszary: tło belek, panelu, 
***#eee - tło pól dialogu
*/

* {
	font-size: 13px;
}
a {
	cursor: default;
}
h1 {
	font-size: 30px;
    text-align: center;
    padding: 8px;
}
h2 {
	font-size: 24px;
    text-align: center;
    padding: 4px;
	margin-bottom: 8px;
}
h3 {
	font-size: 20px;
    text-align: center;
    padding: 4px 2px;
}
h4 {
	font-size: 16px;
    text-align: center;
    padding: 2px;
	margin-bottom: 4px;
}
label {
	font-weight: bold;
}


/****  GENERIC  ****/

/*=== Borders ===*/

.unbordered     { border: 0; }
.bordered       { border: 1px solid black; }
.bordered_dark  { border: 1px solid #333; }
.bordered_light { border: 1px solid #999; }


/*=== Icons ===*/

.ok_icon {
    color: ForestGreen;
}
.warning_icon {
    color: Orange;
}
.error_icon {
    color: Red;
}
.blue_icon {
    color: #4169e1;
}


/*=== Buttons ===*/

.button {
	display: inline-block;
	padding: 4px 16px;
	text-decoration: none;
	color: White;
	border: 1px solid #aaa;
	white-space: nowrap;
	text-align: center;
	border-radius: 3px;
	cursor: default;
}
.button:hover {
	border: 1px solid White;
	color: White;
}
.button:active {
	transform: translate(2px, 2px);
}
.button[disabled] {
	opacity: 50%;
}

.default_btn,
input[type="submit"] {
	font-weight: bold;
	border-color: #ccc;
}
.button ~ .default_btn,
.button ~ input[type="submit"] {
    margin-left: 4px;
}

.nice_btn     { box-shadow: 3px 3px 3px 0 rgb(0 0 0 / 50%); }

.xsmall_btn   { min-width: 30px; }
.small_btn    { min-width: 50px; }
.medium_btn   { min-width: 70px; }
.large_btn    { min-width: 90px; }
.xlarge_btn   { min-width: 110px; }
.xxlarge_btn  { min-width: 130px; }
.xxxlarge_btn { min-width: 150px; }
.xxx_btn { 
	font-size: 20px;
    padding: 8px !important;
    min-width: 100px;
}
.square_medium_icon_btn {
	width: 25px;
	height: 25px;
	padding: 4px;
}
.square_medium_icon_btn span {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

.cancel_btn,
.close_btn,
.exit_btn { background-color: Gray; }
.cancel_btn:hover,
.close_btn:hover,
.exit_btn:hover { background-color: LightGray; }

.ok_btn,
.save_btn { background-color: DarkGreen; }
.ok_btn:hover,
.save_btn:hover { background-color: Green; }

.new_btn,
.add_btn,
.edit_btn,
.window_btn { background-color: DarkBlue; }
.new_btn:hover,
.add_btn:hover,
.edit_btn:hover,
.window_btn:hover { background-color: Blue; }

.delete_btn { background-color: Red; }
.delete_btn:hover { background-color: Crimson; }

.action_btn { background-color: SteelBlue; }
.action_btn:hover { background-color: SlateBlue; }

.quick_btn { background-color: GoldenRod; }
.quick_btn:hover { background-color: DarkGoldenRod; }

.report_btn,
.filter_btn { background-color: DarkTurquoise; }
.report_btn:hover,
.filter_btn:hover { background-color: ForestGreen; }

.filter_btn {
	padding: 4px 16px 3px !important;
}

.buttons_container {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

/*
.buttons_group {
}
*/
.buttons_group .button ~ .button {
    margin-left: 0 !important;
}


/*=== Title & status bar ===*/

.title_bar {
	padding: 8px 0;
	background-color: #eee;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0.05em;
	text-align: center;
}
.title_status_bar {
	padding: 12px 24px 6px 24px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
#object_title {
	flex-grow: 1;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
#object_status_icons_container {
	display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
	gap: 12px;
}
#object_status_icons_container span {
	font-size: 24px;
	font-weight: bold;
	color: #333;
}


/*=== Actions & Filter bar ===*/

.actions_filters_bar {
	margin: 8px 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.actions_bar {
	margin: 8px 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
}
.filters_bar {
	margin: 8px 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
}
.actions_container {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
}
.filters_container {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
}
.filter_field {
	display: flex;
	flex-direction: row;
    justify-content: flex-start;
    align-items: center;
	gap: 8px;
}

.actions_filters_bar button,
.actions_filters_bar .button {
	padding: 4px 16px;
	font-size: 14px;
	font-weight: bold;
}
@media screen and (max-width: 480px) {
	.filter_field { width: 100%; }
}


/*=== Icons bar ===*/

.icons_bar {
	display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.icons_bar button {
	margin: 0 4px;
	background-color: transparent;
}
.icons_bar span {
	padding: 2px;
	font-size: 14px;
	color: Black;
}
.icons_bar button:hover span {
	background-color: transparent;
	color:Gray;
}


/*=== Page container ===*/

.page_container {
	padding: 8px;
	overflow: hidden;
}
.panels_columns_container {
	display: flex;
    flex-direction: row;
	justify-content: space-evenly;
    align-items: flex-start;
	gap: 8px;
	overflow-y: auto;
}
.panels_columns_container.col_1_1 .column {
	width: 50%;
}
.panels_columns_container.col_1_2 .column_1 {
	width: 34%;
}
.panels_columns_container.col_1_2 .column_2 {
	width: 66%;
}
.panels_columns_container.col_1_3 .column_1 {
	width: 25%;
}
.panels_columns_container.col_1_3 .column_2 {
	width: 75%;
}

@media screen and (max-width: 480px) {
	.panels_columns_container {
		flex-direction: column;
		justify-content: flex-start;
   	 	align-items: stretch;
	}
	.panels_columns_container.col_1_1 .column {
		width: 100%;
	}
}		
	


/*=== Panels ===*/

.panel {
	margin-bottom: 12px;
}
.panel_top_bar {
	padding: 8px;
	border-top: 1px solid #444;
	border-left: 1px solid #444;
	border-right: 1px solid #444;
	background-color: #444;
	color: white;
	font-weight: bold;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	/*
	border-top-right-radius: 4px;
    border-top-left-radius: 4px;
	*/
}
.panel_top_bar * {
	font-size: 14px;
}
/*
.panel_info_bar {
	background-color: #666 !important;
}
*/
.panel_content {
	background-color: #f0f0f0;
	border: 1px solid #444;
	padding: 4px 8px;
}
.panel_bottom_bar {
	border-bottom: 1px solid #444;
	border-left: 1px solid #444;
	border-right: 1px solid #444;
	background-color: #444;
	color: white;
	padding: 5px 8px 5px 8px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}



/*=== Panel elements ===*/

.panel_header_small {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 8px;
	font-size: 20px;
    font-weight: 600;
}
.panel_header_small span {
	display: inline-block;
	font-size: 20px;
    font-weight: 600;
}
.panel_header_small span:first-child {
	text-align: left;
}
.panel_header_small span:last-child {
	text-align: right;
}



/*=== Table: header, footer, summary ===*/

.table_comment {
	margin: 4px 0;
	padding: 12px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}
.table_caption_bar {
	margin: 4px 0;
	display: flex;
    flex-direction: row;
    justify-content: center;
}

/*
.table_panel {
	flex-grow: 1;
	display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: hidden;
	border: 1px solid RoyalBlue;
}
*/
/*
.table_summary {
	margin: 4px 0;
	text-align: center;
}
*/
tr.space_after th, 
tr.space_after td {
	padding-bottom: 8px;
} 
td.bold_cell {
	font-weight: bold;
}
td.action_buttons_cell {
	padding-right: 6px !important;
}
td .action_buttons_cell_content {
	width: 100%;
	display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}
td.icons_cell {
	padding: 2px !important;
}
td .icons_cell_content {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
    align-items: center;
	gap: 4px;
}
td .icons_cell_content span {
	font-size: 16px;
}


/*=== Fixed header table ===*/

.fixed_head_scrollable_table_container {
	max-height: 100%;
	/*flex-grow: 1;*/
	overflow: auto;
	border: 1px solid #666;
}
.fixed_head_scrollable_table_container table {
	margin: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	border-left: 0 !important;
	border-right: 1px solid black !important;
}
.fixed_head_scrollable_table_container thead th {
	position: sticky; 
	top: -1px; 
}


/*=== Data grid (lightweight table, no borders) ===*/

table.data_grid {
	margin: 2px 0;
	border: none;
}
table.data_grid th {
	padding: 2px;
	font-size: 12px;
	font-weight: bold;
}
table.data_grid tbody td {
	padding: 2px;
}
table.data_grid tbody td.bottom_spaced {
	padding-bottom: 16px !important;
}
table.data_grid thead th + th {
	padding-left: 8px;
}
table.data_grid tbody td + td {
	padding-left: 8px;
}


/*=== Data tables (gray stripes) ===*/
/*
table.data_table {
	margin: 2px 0;
	border: 1px solid black;
}
*/
table.data_table thead th {
	background-color: #666;
	border: 1px solid #999;
	color: White;
	padding: 4px;
	font-size: 14px;
	font-weight: bold;
}
table.data_table tbody td {
	padding: 4px;
	text-align: center;
	font-size: 12px;
	border: 1px solid #ccc;
}
table.data_table tbody tr:nth-child(odd) {
    background-color: #eee;
}
table.data_table tbody tr:nth-child(even) {
    background-color: #ddd;
}
table.data_table tbody tr:hover {
	background-color: White !important;
}
table.data_table tfoot tr td {
	padding: 4px;
	border: 1px solid #ccc;
	border-top: 3px double #333;
	background-color: #999;
	font-size: 12px;
	font-weight: bold;
}



/*=== TabPane main table (extra styling) ===*/

table.data_table.tabpane_table {
	outline: 1px solid #444;
	outline-offset: -1px;	
}
table.data_table.tabpane_table thead th {
	padding: 8px;
	background-color: #444;
}


/*=== Info table - Type 1 (gray stripes) ===*/

table.info_table_1 thead {
	border: 1px solid DarkSlateGray;
	background-color: #666;
	color: White;
}
table.info_table_1 th {
	padding: 4px;
	font-size: 24px;
	font-weight: bold;
}
table.info_table_1 tbody {
	border: 1px solid DarkSlateGray;
}	
table.info_table_1 tbody tr:nth-child(odd) {
    background-color: LightGray ;
}
table.info_table_1 tbody tr:nth-child(even) {
    background-color: Silver;
}
table.info_table_1 td {
	padding: 4px 8px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}
@media screen and (max-width: 480px) {
	table.info_table_1 th {
		padding: 2px;
		font-size: 12px; 
	}
	table.info_table_1 td {
		padding: 2px;
		font-size: 11px;
	}
}


/*=== Info table - Type 2 (blue stripes) ===*/

table.info_table_2 thead {
	border: 1px solid DarkSlateGray;
	background-color: #666;
	color: White;
}
table.info_table_2 th {
	padding: 4px;
	font-size: 24px;
	font-weight: bold;
}
table.info_table_2 tbody {
	border: 1px solid DarkSlateGray;
}	
table.info_table_2 tbody tr:nth-child(odd) {
    background-color: DeepSkyBlue;
}
table.info_table_2 tbody tr:nth-child(even) {
    background-color: LightSkyBlue;
}
table.info_table_2 td {
	padding: 4px;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
}
@media screen and (max-width: 480px) {
	table.info_table_2 th {
		padding: 2px;
		font-size: 12px; 
	}
	table.info_table_2 td {
		padding: 2px;
		font-size: 11px;
	}
}


/*=== Kalendarz table - przegląd slotów w miesiącach ===*/

table.kalendarz_table {
	border: 1px solid #ccc;
}
table.kalendarz_table thead td {
	border: 1px solid #ccc;
	background-color: #eee;
	color: Black;
	padding: 2px;
	font-size: 12px;
	text-align: center;
	font-weight: bold;
}	
table.kalendarz_table tbody td {
	border: 1px solid #ccc;
	color: Black;
	padding: 2px;
	font-size: 10px;
	text-align: center;
}
table.kalendarz_table .aktywny {
	background-color: LightBlue;
}


/*====  Table columns fields default alignments  ====*/

/* right: */
td[td-fld="lp"],
td[td-fld="kwota"],
td[td-fld="rozmiar"],
td[td-fld="waga"] { 
	text-align: right; 
}

/* center */
td[td-fld="tak-nie"],
td[td-fld="data"],
td[td-fld="czas"],
td[td-fld="data-czas"],
td[td-fld="akcja"],
td[td-fld="osoba"],
td[td-fld="nazwa"],
td[td-fld="telefon"],
td[td-fld="hash"],
td[td-fld="status"] { 
	text-align: center; 
}

/* left */
td[td-fld="kod"],
td[td-fld="model"],
td[td-fld="spadochron"],
td[td-fld="parametry"] { 
	text-align: left; 
}


/*=== Form table ===*/

table.form_table {
	width: 100%;
}
table.form_table th {
	height: 28px;
	padding: 2px 8px 2px 0;
	text-align: right;
}
table.form_table td {
	padding: 2px;
	height: 21px;
}

table.form_table.negative th { font-weight: 100; }
table.form_table.negative td { font-weight: 700; }

table.form_table.th_1_2 th { width: 50% !important; }
table.form_table.th_1_3 th { width: 33.33% !important; }
table.form_table.th_1_4 th { width: 25% !important; }
table.form_table.th_1_5 th { width: 20% !important; }
table.form_table.th_1_6 th { width: 16.66% !important; }
table.form_table.th_1_8 th { width: 12.5% !important; }
table.form_table.td_1_2 td { width: 50% !important; }
table.form_table.td_1_3 td { width: 33.33% !important; }
table.form_table.td_1_4 td { width: 25% !important; }
table.form_table.td_1_5 td { width: 20% !important; }
table.form_table.td_1_6 td { width: 16.66% !important; }
table.form_table.td_1_8 td { width: 12.5% !important; }

tr.tr_def td {
	height: 0 !important;
	padding: 0 !important;
}

.form_table_header_td {
	font-size: 18px;
    font-weight: 600;
}

table.equal_4_cols td,
table.equal_4_cols th {
	width: 25%;
}


.dotted_separator {
	border-bottom: 1px dotted #333333; 
}
.large_separator {
	margin: 12px 0;
}

td.kwota_pakiet {
	border-bottom: 1px dashed black;
}
td.kwota {
	text-align: right;
}
td.kwota_suma {
	border-top: 3px double black;
	text-align: right;
	font-size: 14px;
	font-weight: 600;
}



/*=== Form controls ===*/

.input,
input[type="text"],
input[type="password"],
select,
textarea {
	width: 100%;
	/*margin-left: 4px;*/
	padding: 3px;
	border: 1px solid black;
	border-radius: 3px;
}
textarea.nowrap {
	white-space: pre;
	overflow-wrap: normal;
	overflow-x: auto;
}
input[type="checkbox"] {
	margin: 2px;
	vertical-align: middle;
	border: 1px solid black;
}
.input:invalid {
	border: 2px solid red;
}
.optional {
	border-style: dotted !important;
}	
textarea {
	resize: none;
	min-height: 120px;
}
textarea.small {
	min-height: 60px;
}
input::placeholder {
	font-size: 11px;
}

input[type=checkbox] + span {
	padding-left: 8px;
}

input.kwota      { width: 8ch; }
input.data       { width: 12ch; }
input.godzina,
select.godzina   { width: 10ch; }
input.text       { width: 100%; }
input.kod_wylotu { width: 10ch; }
input.pin        { width: 8ch; }


/*=== Quick lists ===*/

.quick_access_pane {
	height: 100%;
	display: flex;
	flex-flow: column;
	gap: 4px;
}
.quick_list {
	height: 100%;
	overflow-x: hidden; 
	overflow-y: scroll; 
	border: 1px solid grey;
	/*flex-grow : 1;*/
}
.quick_item {
	background-color: LightSeaGreen;
	border: 1px solid DarkSlateGray;
	padding: 3px;
	font-weight: bold;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
    align-items: center;
}
.quick_item span {
	font-weight: bold;
    font-size: 12px;
}
.quick_item .quick_item_icons {
	display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
.quick_item .icon_button {
	padding: 4px;
	color: #eee;	
}
.quick_item .icon_button:hover {
	color: White;
}
.quick_item .icon_button span {
	font-size: 18px;
}
.quick_item.invisible_qi {
	background-color: SlateGray;
	opacity: 50%;
}
.quick_item.present_qi {
	background-color: LightSkyBlue;	
}
.quick_item.selected_qi {
	/*border: 2px solid DarkBlue;*/
	/*padding: 2px;*/
	background-color: #dad55e !important;
}


/****  REPORT   ****/

#report_container {
	display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;
    overflow: hidden;
}
#report_filters_pane {
	padding: 12px;
	background-color: #eee;
	border-bottom: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}
#report_header {
	padding: 12px 8px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
#report_header_c {
	flex-grow: 1;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
#report_header_l,
#report_header_r {
	width: 120px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
#report_header_l_1,
#report_header_l_2,
#report_header_r_1,
#report_header_r_2 {
	height: 20px;
	text-align: center;
}
#report_header_l_2,
#report_header_r_2 {
	font-size: 14px;;
	font-weight: bold;
}
#report_message_container {
	padding: 12px 8px;
	width: 100%;
}
#report_table_container {
	flex-grow: 1;
	border: none !important;
}

#report_loading_spinner_container {
	width: 100%;
	height: 100%;
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#report_loading_spinner_container:not(.active) {
	display: none !important;
} 
#report_loading_spinner_icon {
	font-size: 80px;
	color: #00008020;
}


/*=== Reports (light blue grid) ====*/

table.report_table {
	border: 1px solid RoyalBlue;
}
table.report_table thead th {
	padding: 2px;
	background-color: Navy;
	color: White;
	border: 1px solid LightSkyBlue;
	font-size: 14px;
	font-weight: bold;
	text-align: center !important;
}
table.report_table td {
	padding: 2px 4px;
	border: 1px solid LightSkyBlue;
}
table.report_table tbody tr:hover {
	background-color: #00008020 !important;
}
table.report_table tbody tr.top_separator td {
	border-top: 2px solid Navy;
}
table.report_table tfoot tr td {
	padding: 2px 4px;
	background-color: Navy;
	color: white;
	border: 1px solid LightSkyBlue;
	border-top: 3px double Navy;
	font-size: 14px;
	font-weight: bold;
}



/****  SPECIFIC  ****/



/*=== Header ===*/

header {
	padding: 0 8px;
	background-color: #333;
	border-bottom: 1px solid #999;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
}
header > * {
	height: 59px;
}
body.tryb_pracy_zamknieta header {
	background-color: #b81010 !important;
}	
body.tryb_pracy_serwis header {
	background-color: darkorange !important;
}

#header_nav_section {
    display: flex;
    flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

#hamburger_button_toggle {
    display: none;
}
#hamburger_button {
	display: none;
}

#header_nav_container {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	gap: 8px;
}

#fast_buttons_container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
    align-items: center;
	gap: 8px;
}

#header_menu_container {
	height: 42px;
	display: flex;
	flex-direction: row;
    justify-content: flex-start;
	align-items: stretch;
	gap: 8px;
}
.header_menu_item_container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
	align-items: stretch;
}
.header_menu_item {
	padding: 0 16px;
	display: flex;
	flex-direction: row;
    justify-content: flex-start;
    align-items: center;
	gap: 8px;
	cursor: default;
	border: 1px solid transparent;
    border-radius: 3px;
}
.header_menu_item span {
	font-size: 16px;
	font-weight: 700;
	color: #ccc;
}
.header_menu_item:hover {
	background-color: #999 !important;
	border: 1px solid gray;
}
.header_menu_item:hover span {
	color: White;
}
.header_menu_item.active {
	background-color: #332e6e;
	border: 1px solid gray;
}
.header_menu_item.active span {
	color: White;
}
.header_menu_item.widok {
	text-shadow: 0 0 10px yellow;
}
.header_menu_item.widok span {
	color: yellow;
}
.header_submenu_container {
	position: absolute;
	top: 59px;
	display: flex;
    flex-direction: column;
    border: 1px solid #999;
    z-index: 101;
	box-shadow: 3px 3px 3px 0 rgb(0 0 0 / 50%);
}
.header_submenu_container:not(.active) {
	display: none !important;
}
.header_submenu_item {
	padding: 8px;
	background-color: #333;
	color: #ccc;
	font-size: 16px;
}
.header_submenu_item:hover  {
	background-color: #332e6e !important;
	color: White !important;
}
.header_submenu_item ~ .header_submenu_item {
	border-top: 1px solid grey;
}

#header_search_section {
	margin: 0 16px;
	display: flex;
	flex-direction: row;
    justify-content: center;
    align-items: center;
	position: relative;
}
#header_search_input {
	width: 200px;
	padding: 6px;
	font-size: 16px;
	background-color: #ccc;
    border: 1px solid #999;
    border-radius: 3px;
}
#header_search_input:focus {
	background-color: White;
} 
#header_search_icon {
	position: absolute;
	right: 8px;
    z-index: 2;
	color: #999;
	font-size: 16px;
}
#header_search_results_container {
	position: absolute;
	top: 46px;
	left: 0;
	min-width: 200px;
	border: 1px solid #aaa;
    z-index: 101;
    background-color: white;
	box-shadow: 3px 3px 3px 0 rgb(0 0 0 / 50%);
	display: flex;
    flex-direction: column;
	align-items: stretch;
}
#header_search_results_container:not(.active) {
	display: none !important;
}
#header_search_results_container a {
	display: block;
}
#header_search_results_container div.typ_obiektu {
	padding: 8px;
	font-size: 14px;
    font-weight: bold;
	background-color: #eee;
}
#header_search_results_container a {
	padding: 4px 8px;
    color: royalblue;
}
#header_search_results_container a:hover {
	background-color: deepskyblue;
	color: Black;
}

#header_spacer_section {
	flex-grow: 1;	
	display: flex;
	flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
#header_status_strefy {
	padding: 0 8px;
	height: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid gray;
	border-radius: 3px;
	font-weight: bold;
	font-size: 16px;
}
#header_status_strefy.strefa_otwarta {
	background-color: DeepSkyBlue;
}
#header_status_strefy.strefa_zamknieta {
	background-color: Orange;
}
#header_status_strefy.strefa_serwis {
	background-color: Red;
}

#header_user_section {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
.header_user_name {
    color: White;
	font-size: 16px;
    letter-spacing: 0.1ch;
	white-space: nowrap;
	overflow: hidden;
}
/*
#header_user_name_long { 
	display: block; 
}
*/
#header_user_name_short { 
	display: block; 
}

#header_controls_section {
	margin-left: 16px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
}

#reload_progress_container {
	width: 80px;
	height: 42px;
	position: relative;
	padding: 0;
	border: 1px solid gray;
	border-radius: 3px;
}
#reload_progress_bar {
	background: blue;
	position: absolute;
	right: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: width 1s linear;
    -moz-transition: width 1s linear;
    -o-transition: width 1s linear;
    transition: width 1s linear;
}
#reload_progress_text {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: transparent;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header_button {
	width: 42px;
    height: 42px;
	display: flex;
	justify-content: center;
	align-items: center;
    border: 1px solid gray;
    border-radius: 3px;
    background-color: #332e6e;
}
.header_button:hover {
	background-color: #999 !important;
}
.header_button span {
	font-size: 25px;
	color: #eee;
}

.header_button.disabled {
	border: 1px solid #80808044;
	background-color: #332e6e44;
}
.header_button.disabled:hover {
	background-color: inherit !important;
}
.header_button.disabled span {
	color: #eeeeee44;
}


.header_exit_btn {
	background-color: #e51a46 !important;
}
.header_home_btn {
    background-color: #135f13 !important;
}
.header_buttons_separator {
	width: 4px;
}
.header_buttons_separator + .header_buttons_separator {
	margin-left: -12px;
}

@media screen and (max-width: 480px) {
	#hamburger_button {
		display: flex;
	}
	#header_nav_container {
		display: none;
	} 	
	#hamburger_button_toggle:checked ~ #header_nav_container {
		width: 100%;
		position: absolute;
		top: 58px;
		bottom: 50px;
		left: 0;
		right: 0;
		z-index: 500;
		background-color: #666;
		border-bottom: 1px solid #999;
		opacity: 99%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		gap: 0;
	}
	#header_menu_container {
		flex-direction: column;
		gap: 0;
	}
	.header_menu_item_container {
		flex-direction: column;
	}
	.header_menu_item {
		margin: 0;
		border-top: 1px solid #999;
	}
    .header_menu_item:hover {
        background-color: #999;
    }
	.header_submenu_container {
		position: static;
		border: 0;
	}
	.header_submenu_item {
		border-top: 1px solid grey;
		border-bottom: 0;
	}

	#header_view_container {
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
	}
	#header_search_section,
	#reload_progress_container,
	.header_fullscreen_btn {
		display: none; 
	}
	/*
	#header_user_name_long { 
		display: none; 
	}
	#header_user_name_short { 
		display: block; 
	}
	*/
	#fast_buttons_container,
	.header_menu_item {
		padding: 8px;
	}
}


/*=== Main ===*/

main {
	background-color: white;
	flex-grow: 1;
	overflow: hidden;
	display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}
.main_pane {
	padding: 10px;
}


/*=== Footer ===*/

footer {
	width: 100%;
	background-color: #333;
	border-top: 1px solid #999;
	color: #999;
	padding: 8px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.footer_left,
.footer_center,
.footer_right {
	width: 33.33%;
	display: flex;
	flex-direction: row;
	align-items: center;
}
footer span {
	white-space: nowrap;
}
.footer_left {
	justify-content: flex-start;
    gap: 0.5em;
}
.footer_center {
    justify-content: center;
}
.footer_right { 
    justify-content: flex-end;
    gap: 2em;
}

@media screen and (max-width: 480px) {
	.footer_left,
	.footer_center,
	.footer_right {
		flex-direction: column;
		justify-content: center;
		gap: 4px;
	}
	.footer_left {		
		align-items: flex-start;
	}
	.footer_center {
		align-items: center;
	}
	.footer_right {
		align-items: flex-end;
	}
}	


/*=== Search component ===*/

.search_list {
	position: relative;
}
.search_list input {
	width: 100%;
}
.search_list ul {
	width: 100%;
	position: absolute;
	margin-top: 0;
	list-style-type: none;
	color: #000000;
	background-color: White !important; 
	z-index: 100;
	border: 1px solid black;
}
.search_list ul li {
	display: block;
	cursor: default;
	padding: 2px;
	float: none;
}
.search_list ul li:hover {
	color: #156dc5;
	background-color: #ddd;
}
/*=== Fast search input + select ===*/
/*
div.fast_search {
	position:relative; 
	background-color:white; 
	border:solid grey 1px;  width:120px; height:18px;

}
div.fast_search select {
	position: absolute; 
	top: 0; 
	left: 0; 
	border: none; 
	width: 100%; 
	margin: 0;
	z-index: 0;
}
div.fast_search input {
	position: absolute; 
	top: 0; 
	left: 0; 
	width:100%; 
	padding: 1px; 
	border: none;
	z-index: 100;
}

.fast_search select:focus, 
.fast_search input:focus {outline:none;}
*/


/*=== Fast status icon ===*/

#fast_icon_container {
	position: fixed;
	width: 100%;
	top: 15%;
	margin-top: 24px;
	/*visibility: hidden;*/
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
	z-index: 500;
}
#fast_icon_container:not(.active) {
	display: none !important;
} 
#ok_fast_icon {
	opacity: 0;
	font-size: 80px;
	color: green;
}

.fadeOutIcon {
	animation: fadeOut 0.8s 1 ease forwards;
}
@keyframes fadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
}


/*=== Dialog - 1 na stronie! ===*/

#dialog_container {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    padding-top: 15%;
    background-color: #333333cc;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;	
}
#dialog {
	min-width: 440px;
    width: auto;
	border: 1px solid #aaa;
	border-radius: 3px;
	margin-bottom: 20px;
}
#dialog_pane {
	padding: 10px;
	background-color: White;
	display: flex;
    flex-direction: row;
    align-items: center;
}
#dialog_icon {
	width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
	color: White;
}
#dialog_icon * {
	font-size: 32px !important;
}
#dialog_text {
	font-weight: bold;
	padding: 10px;
}
#dialog_footer {
	padding: 10px;
	background-color: #eee;
	border-top: 1px solid #aaa;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
}

@media screen and (max-width: 480px) {
	#dialog {
		width: 100%;  
	}
}

#dialog.error_dlg #dialog_icon {
	color: Red;
}
#dialog.warning_dlg #dialog_icon {
	color: OrangeRed;
}
#dialog.info_dlg #dialog_icon {
	color: Blue;
}
#dialog.success_dlg #dialog_icon {
	color: Green;
}
#dialog.confirm_dlg #dialog_icon {
	color: LightSkyBlue;
}


/*=== Popup - 1 na stronie! ===*/

#popup_container {
    position: absolute;
    left: 0;
    right: 0;
    top: 59px;
    bottom: 34px;
    display: flex;
    flex-direction: column;	
    justify-content: center;
    align-items: center;
}
#popup_container.shaded_background {
    background-color: #aaaaaacc;
	/*background-color: #ffffffd9;*/
}
#popup {
	min-width: 300px;
	max-width: 95%;
    border: 1px solid #666;
    background-color: White;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
	box-shadow: 8px 8px 8px 4px rgb(0 0 0 / 50%);
}
#popup_header {
	padding: 0;
	background-color: #666;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#popup_title {
	padding: 8px;
    font-size: 14px;
	font-weight: bold;
	color: white;
}
.popup_header_close_btn {  
    border: 0 !important;;
    background-color: transparent;
    color: White;
}
.popup_header_close_btn:hover {
	color: #ccc !important;
}
.popup_header_close_btn span {
    font-size: 16px;
}
#popup_pane {
    flex-grow: 1;
    overflow: hidden;
	background-color: #fafafa;
}
.popup_content {
    width: 100%;
    height: 100%;
}
#popup_footer {
	padding: 6px 8px;
	background-color: #666;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}
.full_screen_popup {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 0 !important;
    border-radius: 0 !important;
}
.full_container_popup {
    height: 100%;
    width: 100%;
    border: 0 !important;
}
.adaptive_popup {
	min-width: 440px;
    width: auto;
	margin: 10px;
}

@media screen and (max-width: 480px) {
	.adaptive_popup {
		width: 100%;
		width: -webkit-fill-available;
	}
}


/*=== Window & Light Window ===*/

#window_container {
	width: 100%;
	position: fixed;
	top: 59px;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
#window_container.shaded_background {
    background-color: #aaaaaacc;
	/*background-color: #ffffffd9;*/
}
#window {
	position: absolute;
	top: 15%;
	min-width: 400px;
	max-width: 95%;
	box-shadow: 8px 8px 8px 4px rgb(0 0 0 / 50%);
}
#window_header {
	padding: 0px 8px;
	background-color: #333;
	color: white;
	font-weight: bold;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
}
#window_title {
	font-size: 14px;
	padding: 8px;
}
.window_header_close_btn {
	border: 0;
    background-color: transparent;
	padding: 4px 7px;
}
.window_header_close_btn:hover {
	border: 0;	
	color: #666;
}
.window_header_close_btn span {
	font-size: 16px;
}
#window_pane {
	background-color: #f0f0f0;
	border: 1px solid #333;
	padding: 4px;
}
#window_footer {
	background-color: #333;
	color: white;
	padding: 6px 12px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 8px;
}
#window_footer_left_container {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 8px;
}
#window_footer_right_container {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 8px;
}
.footer_actions_template {
	display: none;
}


.small_window        { width: 400px; }
.small_medium_window { width: 500px; }
.medium_window       { width: 600px; }
.medium_large_window { width: 700px; }
.large_window        { width: 800px; }
.large_xlarge_window { width: 900px; }
.xlarge_window       { width: 1000px; }
.adaptive_window {
	min-width: 440px;
    width: auto;
	margin: 10px;
}

@media screen and (max-width: 480px) {
	#window { 
		width: 95%; 
	}
	.adaptive_window {
		width: 100%;
		width: -webkit-fill-available;
	}
}











/* ORIGINAŁ START ***********************************************************************************/





/*
.panel_icon_container span {
	font-size: 32px;
    padding: 8px;	
}

.panel_icon {
	font-size: 32px;
    padding: 12px;	
}

.panel_header {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	padding: 12px;
	font-size: 32px;
    font-weight: 600;
}
.panel_header span {
	display: inline-block;
	font-size: 32px;
    font-weight: 600;
}
.panel_header span:last-child {
	text-align: right;
}


*/



/*===  Message baners  ===*/

.messages_container {	
	padding: 8px 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}
.message_baner {
	padding: 4px;
	border: 1px solid black;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.message_baner.text_only {
	justify-content: center;
	padding: 8px;
	font-size: 16px;
	font-weight: bold;
	color: white;
}
.message_baner.success_msg {
	background-color: LimeGreen;
}
.message_baner.info_msg {
	background-color: Blue;
}
.message_baner.warning_msg {
	background-color: Orange;
}
.message_baner.error_msg {
	background-color: OrangeRed;
}	
.message_baner span.icon {
	padding: 0 4px;
	font-size: 24px;
	font-weight: bold;
	color: White;
}
.message_baner div.text {
	padding: 0 8px;
	font-size: 16px;
	font-weight: bold;
	color: white;
}


/*=== Dialog window ===*/	
/*

#dialog_panel {
	min-width: 300px;
	max-width: 50%;
	width: auto;
	position: absolute;
	top: 15%;
	padding: 3px;
	border: 1px solid #333;
	background-color: #333; 
}
@media screen and (max-width: 480px) {
	#dialog_panel { width: 95%; max-width: 95%; }
}

#dialog_panel.error_dlg {
	background: repeating-linear-gradient(-45deg, Red 0 5px, #333 5px 10px);
}	
#dialog_panel.warning_dlg {
	background: repeating-linear-gradient(-45deg, Orange 0 5px, #333 5px 10px);
}	
#dialog_panel.info_dlg {
	background: repeating-linear-gradient(-45deg, Blue 0 5px, #333 5px 10px);
}
#dialog_panel.success_dlg {
	background: repeating-linear-gradient(-45deg, Green 0 5px, #333 5px 10px);
}
#dialog_panel.confirm_dlg {
	background: repeating-linear-gradient(-45deg, LightSkyBlue 0 5px, #333 5px 10px);
}
#dialog_panel.html_dlg {
	background: repeating-linear-gradient(-45deg, Yellow 0 5px, #333 5px 10px);
	max-width: 75%;
}

#dialog_panel.error_dlg #dialog_icon {
	background-color: Red;
	color: White;
}
#dialog_panel.warning_dlg #dialog_icon {
	background-color: Orange;
	color: White;
}
#dialog_panel.info_dlg #dialog_icon {
	background-color: Blue;
	color: White;
}
#dialog_panel.success_dlg #dialog_icon {
	background-color: Green;
	color: White;
}
#dialog_panel.confirm_dlg #dialog_icon {
	background-color: LightSkyBlue;
	color: White;
}

#dialog_panel_pane {
	width: 100%;
	height: 100%;
	border: 1px solid #333;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	align-content: center;
}
#dialog_panel_content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
}
#dialog_icon {
	width: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#dialog_icon span {
	font-size: 30px !important;
}
#dialog_text {
	padding: 12px 24px;
	font-size: 14px !important;
	flex-grow: 1;
	text-align: center;
}
#dialog_footer {
	padding: 8px;
	border-top: 1px solid #aaa;
	background-color: #eee;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
#dialog_panel_progress {
	display: inline-block;
	background: Green;
	height: 6px;
	width: 0;
	*
	-webkit-transition: width 2s linear;
    -moz-transition: width 2s linear;
    -o-transition: width 2s linear;
    transition: width 2s linear;
	*
}
*/
/*
.message_progress_run {
    width: 100% !important;
}
*/


/* ORIGINAŁ END ***********************************************************************************/


/*=== Nav Tabs & Tab Pane ===*/

.tabpane_container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;
    overflow: hidden;
}
.tabpane_navtab_container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
	background-color: #eee;
}
.navtab {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ccc;
	font-weight: bold;
    color: #666;
}
.navtab:hover {
	background-color: #aaa;
	color: #333;
}
.navtab.icon {
	width: 50px;
}
.navtab:not(.icon) {
	padding: 0 25px;
	min-width: 120px;
	font-size: 14px;
}
.navtab.icon span {
	font-size: 30px;
}

.navtab.active {
    font-weight: bold;
	color: Black;
    border-bottom: 4px solid #999;
}
.navtab + .navtab {
    border-left: 1px solid #ccc;
}
.navtab_spacer {
    display: block;
	flex-grow: 1;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

.tabpane_pane {
    flex-grow: 1;
    overflow: hidden;
}
.tabpane_pane:not(.active) {
    display: none !important;
} 


/*=== Big Buttons ===*/

.big_buttons_container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: center;
}
.big_buttons_pane {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
	align-items: center; 
}
.big_button_container {
    width: 33.33%;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.big_button {
	width: 300px;
	height: 300px;
	margin: 10px;
	color: #332e6e;
	display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.big_square_btn:visited {
	color: #332e6e;
}
.big_button_icon {
    font-size: 150px;
}
.big_button_title {
	font-size: 30px;
    font-weight: bold;
    white-space: nowrap;
	text-transform: uppercase;
}

@media screen and (max-width: 480px) {
    .big_buttons_container {
		justify-content: flex-start;
    }
    .big_buttons_pane {
		flex-direction: column;
        align-content: center;
		flex-wrap: nowrap;
		overflow-y: scroll;
    }
    .big_button {
	    width: 110px;
    }
}



/*=== Common: Wyloty ===*/

.ikona_preferowanego_zaloganta {
	margin-left: 8px;
	font-size: 20px; 
	color: Red; 
}
.ikona_kamery_recznej {
	margin-left: 8px;
	font-size: 20px; 
	color: gold; 
}
.ikona_uslugi_fff {
	margin-left: 8px;
	font-size: 20px; 
	color: darkblue; 
}


/*
.v_split_panel {
	display: flex;
	gap: 10px;
}
.v_split_panel > div {
	width: 50%;
}
*/


/*=== Scrollbars ===*/

::-webkit-scrollbar {
	width: 12px;
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
	background-color: LightGray;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
/*
  ::-webkit-scrollbar-button { 
  }
  ::-webkit-scrollbar-track-piece {
  }
  ::-webkit-scrollbar-corner {
  }
  ::-webkit-resizer {
  }
*/

.report_legend {
	padding: 12px 8px;
}

.report_legend h1 {
	font-size: 20px;
	text-align: left;
	padding-left: 0px;
}

































/*!!!!!!!!!!!!!!!   OLD   !!!!!!!!!!!!!!!!!!!!!*/


.popup_window_old {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgba(255,255,255,0.85);
	display: flex;
	justify-content: center;
	align-items: center;
}
.popup_panel_old {
	position: absolute;
	top: 15%;
	/*width: 600px;*/
	min-width: 500px;
	max-width: 95%;
	box-shadow: 8px 8px 8px 4px rgb(0 0 0 / 50%);
}




.panel_top_bar_old {
	padding: 5px 8px 4px 8px;
	background-color: #444;
	color: white;
	font-weight: bold;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
}
.panel_top_bar_old * {
	font-size: 14px;
}
.panel_info_bar_old {
	background-color: #666 !important;
}
.panel_content_old {
	background-color: #f0f0f0;
	border: 1px solid #444;
	padding: 4px;
}
.panel_bottom_bar_old {
	background-color: #444;
	color: white;
	padding: 5px 8px 5px 8px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}