* {
		box-sizing: border-box;
	}
	
	body {
		margin: 80px 30px;
		overflow-x: hidden;
		font: 15px Tahoma, Arial;
	}
	
	h1 {
		font-size: 22px;
		margin: 15px 0 5px 0;
	}
	
	h2 {
		font-size: 18px;
		margin: 15px 0 5px 0;
	}
	
	a {
		color: #34a;
	}
	
	p {
		margin: 0;
	}
	
	input, select {
		font-size: 16px;
		padding: 4px;
	}

	form {
		margin: 0;		
	}



	form.login {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 250px;
		width: 280px;
		margin: auto;
		padding: 30px;
		background: #eee;
		border: 4px double #aaa;
		border-radius: 10px;
	}
	
	form.login input {
		display: block;
	}
	
	div.err {
		background: #fdd;
		padding: 20px;
		width: 280px;
		margin: 20px auto;
	}


	
	form.edit {
		display: flex;
		justify-content: space-between;
	}

	form.edit label {
		display: block;
		margin: 0 10px;
	}

	form.edit input,
	form.edit select	{
		width: 100%;
	}
	

	
	div.grid {
		display: grid;
		grid-gap: 1px;
		border: 1px solid #ddd;
		border-radius: 10px;
		overflow: hidden;
		margin: 2vw 0;
	}
	
	div.grid * {
		white-space: nowrap;
		margin: 0;
		padding: 8px 12px;
		background: #eee;
	}
	
	div.grid a {
		text-align: center;
	}
	
	div.grid b {
		background: #ddd;
	}
	
	div.grid em {
		display: contents;
		font-style: normal;
		cursor: default;
	}	
	
	div.grid em:hover * {
		filter: sepia( 20% );
	}

	div.grid.user {
		grid-template-columns: 1fr 3fr 2fr 2fr 1fr 1fr 1fr 1fr;
	}
	
	
	
	ul.list {
		padding: 0;
		cursor: default;
		white-space: nowrap;
	}
	
	ul.list li {
		position: relative;
		display: flex;
		justify-content: flex-end;
		background: #eee;
		padding: 10px;
		box-shadow: 0 0 2px #0006;
		border: 1px solid #fff6;
		border-radius: 8px;
		margin: -7px 0;
		filter: grayscale( 1 );
		overflow: hidden;
	}
	
	ul.list > li {
		margin-top: 40px;
	}
	
	ul.list li.O {
		background: #ddd;
	}
	ul.list li.active {
		filter: none;
	}
	
	ul.list li:hover {
		filter: sepia( 20% );
		z-index: 10;
	}
	
	ul.list li > * {
		margin: 0 1vw;
	    flex-basis: 10vw
	}
	
	ul.list p:first-child {
		flex: 1;
	}
	
	ul.list p:last-child {
		flex-basis: 13vw;
		text-align: right;
	}

	ul.list a {	
		overflow: hidden;
		text-overflow: ellipsis;
	    flex-basis: 25vw;
	}
	
	ul.list b {
		padding: 5px 1vw;
	}
	
	ul.list nav {
		text-align: right;
	    flex-basis: 14vw;
	}

	b.btn {
		color: #600;
	}

	li.hassub b {
		color: #a88;
	}
	
	b.btn:hover {
		color: red;
		cursor: pointer;
	}




	
	.menu {
		position: fixed;
		width: 100%;
		z-index: 100;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ddd;
		background: radial-gradient( at 50% 0%, #eee 50%, #ccc 100% );
		margin: -30px; 
		padding: 0 15px;
		height: 47px;
		overflow: hidden;
	}	

	.menu.top {
		top: 0;
		margin-top: 0;
		box-shadow: 0 0 3px #0009;
	}
	
	.menu.bott {
		bottom: 0;
		margin-bottom: 0;
		border-top: 1px solid #fff;
	}
	
	.menu * {
		font-size: 19px;
		margin: 0;
	}
	
	.menu u {
		text-decoration: none;
		font-style: italic;
		color: #34a;
	}
	.menu u::before {
		content: 'Felhasználó:';
		font-style: normal;
		color: initial;
	}
	
	.menu select {
		padding: 0;
		border: 0;
		outline: 0;
		background: transparent;
	    color: #34a;
	}



	.hide {
		display: none;
	}
	
	
	#loading {
		display: none;
		flex-direction: column;
		justify-content: center;
		align-items: center; 
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background: #fff7;
		backdrop-filter: blur( 5px );
		font-size: 22px;
		line-height: 40px;
	}
	
	#loading progress {
		height: 30px;
	}