html{
	margin:			0;
	padding:		0;
	background: 		#1D1D1D;
	}

a{
	text-decoration:	none;
	}

body{
	color:			#CCC;
	background: 		#1D1D1D;
	letter-spacing: 	0.00em;
	margin:			0;
	min-width:		280px;
	}

body{
	font: 			12pt 'Open Sans', 'Segoe UI Light', 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
	}

h1,h2,h3,h4,h5{
	color:			#FFF;
	}

h2 .category{
	color:			#999;
	font-size:      0.8em;
}

b{
	color:			#e3e3e3;
	}

.hidden{
	display: 		none !important;
	}

.align-right-float{
	float: 			right;
	}

p{
	word-break: break-word;
}


/*menu główne */

div#main-menu{
	height:			2em;
	position:		fixed;
	z-index:		2;
	top:			0;
	left:			0;
	right:			0;
	background-color:	#222;
	overflow:		hidden;
	padding:		0.5em;
	border-bottom:	1px solid #292929;
	}

#main-menu .menu-item{
	display:		inline-block;
	min-width:		2em;
	height:			2em;
	line-height:	2em;
	padding:		0em 0.25em;
	margin:			0em 0.25em;
	text-align:		center;
	overflow:		hidden;
	}

#main-menu .menu-item .fa{
	line-height:	inherit;
	}

#main-menu .menu-alignright	{
	float:			right;
	}

.menu-item{
	color:			#FFF;
	}

a.menu-item:hover{
	border-radius: 3px;
	background-color:	#444 !important;
	}

a.menu-item.current-item,
a.menu-item.current-item:hover,
a.menu-item.current-item:active
	{
	color:				#FFF;
	background-color: 	#777;
	border-radius:		2pt;
	}

a.menu-item i
	{
	color:		#999;
	}

a.menu-item:active,
a.menu-item:hover,
a.menu-item.current-item
	{
	color:		#FFF;
	}


a.menu-logo{
	color: #999;
}

a.menu-logo i{
	color: #CB4906;
}

#main-menu .menu-item.username,
#main-menu .menu-item.username:hover
	{
	background-color:	#1a1a1a;
	margin-right:		0px	!important;
 	border-radius: 		3px 0px 0px 3px;
	}

#main-menu .menu-item.username:hover{
	background-color: 	#1a1a1a;
	}

#main-menu .menu-item.logout{
	margin-left:		0px !important;
	background-color:	#1A1A1A;
	border-radius: 		0px 3px 3px 0px;
	}

#main-menu .menu-desktop-hidden{
	display: none;
  }

#main-menu .menu-desktop-name-hidden .menu-item-name{
	display: none;
	}

#menu-mobile {
	position: fixed;
	z-index: 10;
	top: 3em;
	left: 0;
	right: 0;
	background: #333;
	display: none;
}

#menu-mobile .menu-mobile-hidden{
	display: none !important;
	}

#menu-mobile .menu-item{
	display: block;
	height: 2em;
	box-sizing: border-box;
	padding:		5px;
	margin:			2px 3px;
}

#menu-mobile .current-item,
#menu-mobile  #{
	display: none;
}

#menu-mobile .menu-item-name{
	display: inline-block;
}


/* kontenery */

div#con-main{
	max-width:	1400px;
	margin:	0 auto;
	margin-top:	3em;
	padding: .5em 1em;
	position: relative;
	}

div#con-side{
	float: left;
	width: 240px;
	padding-right: 5pt;
	margin-right: 5pt;
	}

div#con-side label{
	width: auto;
	}

div#con-content{
	overflow: hidden;
	position: relative;
	}
/* status */
div#status-current {
	margin-bottom: 10pt;
	}

div#status-current h3{
	font-size:			14pt;
	margin-bottom:		5pt;
	}

div#status-last-change{
	color: #AAA;
	}

.catId{
	font-style:	italic;
	font-size:	0.9em;
	color:		#999
	}


/* tabele */

table{
	width: auto;
	max-width: 1000px;
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
		color: #666;
    content: " \21D5";
}

table.sortable tbody {
    counter-reset: sortabletablescope;
}
table.sortable thead tr::before {
    content: "Lp.";
    display: table-cell;
}
table.sortable tbody tr::before {
    content: counter(sortabletablescope);
    counter-increment: sortabletablescope;
    display: table-cell;
}

table,
tbody{
	padding:		0px;
	border:			none;
	border-collapse:	collapse;
	}

tr{
	border-bottom: 		1px solid #444;
	color:			#bbb;
	}

tr.table-header{
	color:			#FFF;
	font-size:		1.1em;
	font-weight:		bold;
	border-bottom:		2px solid #777 !important;
	}

tr.table-header:hover{
	background:		initial;
	}

tr:last-child{
	border-bottom:		none;
	}

tr:nth-child(even){
	background: 		#292929;
	}

tr:hover{
	color:			#FFF;
	background:		#444;
	}


th, td,
table.sortable tbody tr::before,
table.sortable thead tr::before	{
	padding: 			0.35em 0.5em;
	text-align:			left;
	vertical-align: top;
	}

td a:hover
	{
	border-radius: 		3px;
	background-color:	#BBB;
	color:				#000 !important;
	}

td.log-date{
	text-align: 		center;
	}

td.td-icon{
	width: 1em;
}

td.td-icons{
	width: 3em;
}

td.td-selected{
	background: #990 !important;
	color: #FFF !important;
	}

.json-data{
	display: none;
	}
/* specjalne typy wierszy */

.td-cash{
	text-align: right;
	width: 4em;
	}

tr.row-przychody{
	background:			#1D301D;
	}

tr.row-przychody:nth-child(even){
	background: 		#1D3F1D;
	}

tr.row-przychody:hover{
	background: 		#464;
	}

tr.row-date td{
	text-align: center;
	font-size: 0.6em;
	background: #1D1D33;
	color: #FFF;
	}

tr.row-new-period td{
	text-align: center;
	font-size: 1em;
	background: #C00;
	color: #FFF;
	}




/*formularze */

/* wymuszenie stosowania czcionek CSS zamiast systemowych */
input,
textarea,
select{
	font-family:inherit;
	font-size:inherit;
	}

form	{
	overflow: 			hidden;
	}

label{
	display: 			block;
	padding:			.4em .4em .4em 0;
	border: 			none;
	}

form select{
	width:				100%;
	max-width:			300px;
	}

select.kategoria{
	height: 	10em;
	overflow:	auto;
	}

option{
	text-overflow: ellipsis;
	overflow: hidden;
	}


.form-info-display
	{
	height:	2.1em;
	display: block;
	box-sizing: border-box;
	padding: 0.4em;
	margin: 0.4em;
	text-align: center;
	background: #770;
	border-radius: 5px;
	}


form input,
form textarea,
form select,
form .form-input-text,
.button,
button
	{
	width: 			100%;
	max-width:		600px;

	display: 		inline-block;
	box-sizing:		border-box;
	overflow:		hidden;

	//margin-bottom: 		2px;
	//padding:		0.4em;
	border: 		none;
	border-radius:		2pt;

	min-height:			2em;
	line-height:	2em;

	padding:		0 0.25em;
	margin:			0.25em 0;
	vertical-align:	middle;
	}

.button.button-dynamic-width,
button.button-dynamic-width{
	width: auto;
	max-width: initial;
}

.button .fa,
button .fa{
	line-height: inherit;
}

form input[type=submit],
.button,
button
	{
	text-align:		center;
	font-family:		inherit;
	font-size:		1em;
	font-weight:		400;
	background-color:	#DDD;
	color:			#000;
	}

form input[type=submit]{
	display:		block;
	}


form input[type=submit]:hover,
.button:hover,
button:hover{
	background-color: 	#888;
	cursor:			pointer;
	}

.button-small{
	width: auto;
}

form input[type=radio]{
	width: 1em;
	height: 1em;
	}


form input[type=checkbox]{
	width: 2em !important;
	height: 2em !important;
	}

a{
	color: 				#AAF;
	}

/* inne */

div.row-bill-content .form-cena{
	width: 8em;
}

div.row-bill-content .form-nazwa{
	width: calc(100% - 10.4em);
}

div.row-bill-content,
div.row-two-inputs,
div.row-three-inputs,
div.row-two-radio-inputs{
	width: 100%;
	max-width: 600px;
	}

div.row-three-inputs input,
div.row-three-inputs a.button
div.row-three-inputs button{
	display: inline-block;
	width: calc(100%/3 - 0.2em);
}

div.row-two-inputs input,
div.row-two-inputs a.button,
div.row-two-inputs button,
div.row-two-radio-inputs label{
	display: inline-block;
	width: calc(100%/2 - 0.2em);
}

div.row-two-radio-inputs label{
	padding: 0;
	text-align: center;
	}

.password_invalid:before
{
	width: 1em;
	display: inline-block;
	content: "\2717 ";
	color: #F00;
}

.password_valid:before
{
	width: 1em;
	display: inline-block;
	content: "\2713";
	color: #0F0;
}
@media only screen and (max-width: 1100px) {
	table{
		max-width: 700px;
	}

	.menu-logo .menu-item-name{
		display: none;
	}
}

@media only screen and (max-width: 1000px) {

	body{
		overflow-x: hidden;
	}

	table{
		width: auto;
		max-width: initial;
		display: block;
		overflow: auto;
		margin-bottom: 0.5em;
	}

	#con-side {
		display: none;
		position: fixed;
		padding: 5pt;
		margin: 5pt;
		top: 3em;
		left: 0;
		bottom: 0;
		overflow-y: auto;
		background: #1D1D1D;
		box-shadow: 0 0 20px 5px #000;
		border-radius: 3px;
		border: 1px solid #666;
		z-index: 1
		}

	.mobile-toggle{
		display: block !important;
	}

	#con-side.mobile-toggle h2{
		margin-top: 0;
	}
	/* menu mobilne */

 	/* fix na ikonkę w menu ultramobilnym */
	.current-item.menu-logo{
		width: auto !important;
		background-color: initial !important;
                }

	.current-item.menu-logo .menu-item-name{
		display: none;
		}


	div#main-menu{
		padding: 0.5em 0em;
		}

	#main-menu .menu-alignright{
		float: none;
		}

	h2.page-title{
		margin-top: 0;
		margin-bottom: 0.25em;
	}

	#main-menu a.menu-item{
		display: none;
	}

	#main-menu a.menu-logo,
	#main-menu a.current-item,
	#main-menu a#show-mobile-menu,
	#main-menu a#show-mobile-sidebar{
		display: inline-block;
		}

	#main-menu .menu-desktop-name-hidden .menu-item-name{
		display: inline-block;
		}

	#main-menu a.current-item{
		width: calc(100vw - 8em);
		}
}

@media only screen and (max-width: 800px) {
	body{
		padding: 0;
		font-size: 14pt;
		}

	h3,
	div#status-current h3{
		font-size:			16pt;
		margin:				2pt 5pt 8pt 0pt;
		}

	div#main-menu a:not(.current-item) span{
		display: none;
		}

	td{
		padding: 			5pt;
		}

	table.sortable tbody tr::before,
	table.sortable thead tr::before{
		display: none;
	}

	table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after
	{
		display: none;
	}

}

@media only screen and (max-width: 600px){
	.mobile-break{
		display: block;
	}

	div.row-three-inputs input,
	div.row-three-inputs a.button
	div.row-three-inputs button{
		display: inline-block;
		width: 100%;
	}

	div.row-two-inputs input,
	div.row-two-inputs a.button,
	div.row-two-inputs button,
	div.row-two-radio-inputs label{
		display: inline-block;
		width: 100%;
	}
}

@media only screen and (max-width: 515px){
	.menu-item-name{
		display: none;
		}

	div#con-main{
		padding: 0.5em;
		}

	.current-item .menu-item-name{
		display: initial;
	}

	h1.status-current{
		text-align: 		center;
		}

	.form-input-text-hidden{
		display: 			none !important;
		}

	#table-bills {
		font-size: 0.8em;
		}

	#con-side {
		width: auto !important;
		right: 0;
		bottom: 0;
		}

	#status-container{
		max-width: 100% !important;
	}

	.form-info-display
		{
		margin-left:		0pt;
		text-align:			center;
		}


}