@media screen and (max-width: 700px) {
	.row {
		gap: 32px;
	}
	h2 {
		font-size: 125%;
	}
	header nav ul a {
		font-size: 105%; 
	}
	header nav ul a > span {
		display: none;
	} 
	ul.cards {
		grid-template-columns: 1fr 1fr;
	}
	.works thead,
	.documents thead {
		display: none; 
	}
	.works table,
	.documents table,
	.works table caption,
	.documents table caption,
	.works tbody,
	.documents tbody,
	.works tr,
	.documents tr,
	.works td,
	.documents td {
		display: block;
		padding-top: 4px;
		padding-bottom: 4px; 
	}
	.works tbody tr,
	.documents tbody tr {
		position: relative;
		border-bottom: 1px solid hsl(0, 0%, 88%);
	}
	.works td::before,
	.documents td::before {
		font-weight: bold;
		font-family: 'Title', sans-serif;
		font-size: 90%;
		margin-right: 4px;
	}
	.works td:nth-child(1)::before {
		content: 'Munkaszám:';
	}
	.works td:nth-child(2)::before {
		content: 'Megrendelő:'; 
	}
	.works td:nth-child(3)::before {
		content: 'Telephely:'; 
	}
	.works td:nth-child(4)::before {
		content: 'Tárgy:';  
	}
	.works td:nth-child(5)::before {
		content: 'Létrehozva:';   
	}
	.works table:last-child td:nth-child(5)::before {
		content: 'Lezárva:';    
	}
	.works td:last-child {
		position: absolute;
		top: 16px;
		right: 0;
		font-size: 110%;  
	}
	.documents td:nth-child(1)::before {
		content: 'Telephely:';
	}
	.documents td:nth-child(2)::before {
		content: 'Megnevezés:';
	}
	.documents td:nth-child(3)::before {
		content: 'Tárgy:';
	}
	.documents td:nth-child(4)::before {
		content: 'Típus:';
	}
	.documents td:nth-child(5)::before {
		content: 'Kiállítva:';
	}
	.documents td:nth-child(6)::before {
		content: 'Lejárat:';
	}
	.documents td:nth-child(7) {
		position: absolute;
		bottom: 12px;   
		left: 144px;   
		font-size: 110%;  
	}
	.documents td:last-child {
		position: absolute;
		top: 16px;
		right: 0;
		font-size: 110%;  
	}
	.documents .actions.multiple {
		flex-direction: column;
		align-items: flex-start;
	}
	.documents .actions.multiple > a {
		order: 1; 
		align-self: flex-end;
	}
	.documents .actions.multiple > form {
		order: 2;  
	}
	.errorTicketData .withImage {
		flex-direction: column;
		gap: 16px; 
	}
	.errorTicketData .withImage > a {
		margin-left: 0;
	}
}

@media screen and (max-width: 500px) {
	.row {
		flex-direction: column;
		gap: 0 !important; 
	}
	.row > * {
		flex-basis: initial;
		width: auto;
	}
	.panel {
		padding: 24px; 
	}
	h2 {
		width: auto;
		transform: translateY(8px);  
	}
	a.back {
		top: 10px;  
		right: 16px;      
	}
	header nav {
		width: 32px;
		height: 32px;
		position: absolute;
		top: 28px; 
		right: 16px;  
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	header nav::before {
		content: '\f0c9';
		font-weight: 900;
		font-family: "Font Awesome 6 Free";
		font-size: 150%;  
	}
	header nav.open {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.75);
	}
	header nav > ul {
		background-color: #fff;
		max-width: 320px;  
		width: 75%; 
		position: fixed;
		right: 0;
		top: 0; 
		flex-direction: column; 
		justify-content: flex-start;
		align-items: flex-start; 
		padding-top: 16px; 
		visibility: hidden;
		opacity: 0;
		transform: translateX(128px);
		transition: 0.5s;
	}
	header nav.open > ul {
		visibility: visible;
		opacity: 1;
		transform: translateX(0);
	}
	header nav ul li {
		width: 100%; 
	}
	header nav a i,
	header nav ul .account ul li a i  {
		margin-right: 8px;
	}
	header nav li:not(:first-child) {
		margin-left: 0;
	}
	header nav ul a {
		color: hsl(217, 10%, 35%); 
		border-radius: 0; 
		padding: 12px 16px;  
		font-size: 105%; 
	}
	header nav ul a i {
		width: 24px !important;  
		text-align: center;
		display: inline-block !important;  
	}
	header nav ul .account {
		margin-left: 0;
		border-left: 0; 
		border-top: 1px solid rgba(0, 0, 0, 0.1);    
	}
	header nav ul .account > a {
		display: none;
	}
	header nav ul ul {
		visibility: visible;
		opacity: 1;
		position: static;
		background-color: transparent;
		box-shadow: none;
		transform: translateY(0);
	}
	header nav ul ul li {
		max-height: fit-content;
	}
	header nav ul .account ul li a {
		font-size: 100%;
		padding: 12px 16px;
	}
	header nav ul .account ul li:last-child {
		padding-top: 16px; 
	}
	header nav ul a > span {
		display: initial;
	} 
	header nav ul a {
		font-size: 100%; 
	} 
	main {
		padding: 16px; 
	}
	.panel.auth {
		flex-direction: column;
		background-image: none;
	}
	.chooser.accountRole fieldset > div {
		flex-direction: column;
	}
	.inspectorDashboard {
		display: block;
	}
	.inspectorDashboard .panel {
		margin-bottom: 32px;    
	}
	.works td:last-child,
	.documents td:last-child {
		right: -16px; 
	} 
	.documents .actions.multiple {
		align-items: center;
	}
	.documents .actions.multiple > a {
		align-self: center;
	}
	ul.cards {
        grid-template-columns: 1fr;
    }
}