@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@font-face{font-family:'tinymce';src:url('fonts/tinymce.eot');src:url('fonts/tinymce.eot?#iefix') format('embedded-opentype'),url('fonts/tinymce.woff') format('woff'),url('fonts/tinymce.ttf') format('truetype'),url('fonts/tinymce.svg#tinymce') format('svg');font-weight:normal;font-style:normal}
@font-face{font-family:'tinymce-small';src:url('fonts/tinymce-small.eot');src:url('fonts/tinymce-small.eot?#iefix') format('embedded-opentype'),url('fonts/tinymce-small.woff') format('woff'),url('fonts/tinymce-small.ttf') format('truetype'),url('fonts/tinymce-small.svg#tinymce') format('svg');font-weight:normal;font-style:normal}
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

@media all {
	
:root {
	--mark-pink:#DF1B73;
	--pink:#C9225A;
	--pink-light:#f48fb1;
	--pink-dark:#9F1F4A;
	--blue:#277ABD;
	--blue-light:#A0D4FF;
	--blue-dark:#105A96;
	--green:#AED581;
	--green-light:#C5E1A5;
	--green-dark:#116201;
	--red:#D63024;
	--red-light:#FF5F5D;
	--red-dark:#AE170C;
	--purple:#AB47BC;
	--purple-light:#D5A6DD;
	--purple-dark:#832A93;
	--grey-dark:#424242;
	--grey-darker:#020202;
	--grey:#888888;
	--grey-light:#ccc;
	--grey-lighter:#f1f2f6;
	--black:#000;
	--white:#fff;
	--yellow:#ff0;

	--mark:var(--blue);
	--mark-light:var(--blue-light);
	--mark-dark:var(--blue-dark);
	--mark2:var(--pink);
	--mark2-light:var(--pink-light);
	--mark2-dark:var(--pink-dark);

	--font-family-icon-google: 'Material Symbols Outlined';
	--font-family-header: 'Ubuntu', sans-serif;
	--font-family-header-light: 300;
	--font-family-header-regular: 400;
	--font-family-header-medium: 700;
	--font-family-header-bold: 700;
	--font-family-menu: 'Ubuntu Mono', monospace;
	--font-family-menu-text: 400;
	--font-family-text: 'Lato', sans-serif;
	--font-family-text-light: 300;
	--font-family-text-regular: 400;
	--font-family-text-medium: 500;
	--font-family-text-bold: 700;
	scroll-behavior: smooth;

	/* Shadow system */
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
	--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
	--shadow-lg: 0 8px 25px rgba(0,0,0,0.12);
	
	/* Border radius system */
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
}

.material-symbols-outlined {
	font-size:1rem;
	vertical-align: -.25rem;
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}

* {margin: 0px;padding: 0px;}

article, section, aside, hgroup, nav, header, footer, figure, figcaption, ul, div, form, input, select, textarea, main {
	display: block;
	margin:0;
	padding:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

input, select, textarea {
	padding:12px 16px;
	font-weight:400;
	font-family: var(--font-family-text);
	display: block;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: var(--grey-darker);
	float: left;
	border: 2px solid var(--grey-lighter);
	border-radius: var(--radius-md);
	transition: all 0.3s ease;
	background: var(--white);
	font-size: 14px;
}

input:hover, select:hover, textarea:hover {
	border-color: var(--grey-light);
	box-shadow: var(--shadow-sm);
}

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--mark);
	box-shadow: 0 0 0 3px rgba(39, 122, 189, 0.1);
}

::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, :-moz-placeholder { 
	color: var(--grey);
	font-weight: 300;
}

body {
	font-family: var(--font-family-text);
	font-size: 14px;
	font-weight: 400;
	margin: 0px;
	padding: 0px;
	color: var(--grey-darker);
	background: #f8fafc;
	height:100%;
	line-height: 1.5;
}

body.short_menu { 
	background: #f8fafc url(img/bg.jpg) repeat-y -200px 0px; 
}

.clear { 
	font-size: 0px; 
	line-height: 0px;
	margin: 0px;
	padding: 0px;
	clear: both;
	height: 0px; 
}

img{
	max-width:100%;
	height:auto;
}

p {
	margin:15px 0px; 
	text-align:justify;
	line-height:1.6;
	color: var(--grey-dark);
}

a {
	text-decoration: none;
	cursor: pointer;
	color: var(--mark);
	transition: all 0.2s ease;
}

a:hover {
	text-decoration: none;
	cursor: pointer;
	color: var(--mark-dark);
}

.high, a.high, a .high, .red, a.red, a .red {
	color: var(--red) !important;
}

a.mark {
	color: var(--mark);
}

.frame{ 
	border:solid 2px var(--grey-lighter);
	padding:1.5rem;
	display:flex;
	flex-direction:column;
	justify-content:center;
	margin:1rem 0;
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: var(--shadow-sm);
}

.green, a.green, a .green {color: var(--green-dark);}
.grey {color:var(--grey);}
mark {background:transparent;color:var(--mark);}

.fa, .fa-classic, .fa-sharp, .fas, .fa-solid, .far, .fa-regular, .fab, .fa-brands {
	margin:0 6px 0 2px;
}

pre{
	background:var(--grey-lighter);
	font-size:.9rem;
	padding:1.5rem;
	border-radius:var(--radius-lg);
	max-width:100%;
	overflow-x:auto;
	border: 1px solid var(--grey-light);
}

.left {float:left;}
.right {float:right;}

/* LAYOUT */
div#all {
	width: 100%;
    display: flex;
    flex-flow: row-reverse nowrap;
	justify-content: space-between;
	min-height: 100vh;
}

/* HEADER */
#h {
	display:flex;
	align-items:center;
	justify-content: space-between; 
	width: 100%;
	padding: 10px 24px;
	color:var(--white);
	background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
	border-bottom: none;
	box-shadow: var(--shadow-md);
	top: 0;
	z-index: 100;
}

#h .l{
	margin:0px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap: 1.5rem;
}

#h .l a {
	font-family: var(--font-family-header);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-shadow: none;
	float: left;
	margin: 0;
	transition: all 0.2s ease;
}
#h .l a img {
    display: block;
    height: 40px;
    margin: auto;
}
}

#h .l a:hover {
	opacity: 0.8;
}

#h .l span {
	display:flex;
	align-items:center;
	gap: 1rem;
}

#h .l span a {
	font-size:14px;
	font-weight: 400;
}

#h .r {
	float:right;
	margin: 0;
}

#h .r a {
	margin: 0px 12px;
	display:inline;
	padding: 8px 16px;
	border-radius: var(--radius-md);
	transition: all 0.2s ease;
	font-weight: 500;
}

#h .r a:hover {
	background: rgba(255,255,255,0.1);
}

#h a {
	color:var(--white);
}

#h a.menu {
	display:none;
}
#h a.menu .material-symbols-outlined {
	font-size:1.4rem;
}
#h .center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 20px;
}

.quick-links {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.1);
    padding: 8px 16px;
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
}

.quick-links-label {
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    font-weight: 500;
    margin-right: 8px;
}

.quick-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    text-decoration: none;
}

.quick-link:hover {
    background: rgba(255,255,255,0.2);
    color: var(--white);
    transform: translateY(-1px);
}

.quick-link i {
    font-size: 14px;
}

/* Responsive - ukryj na małych ekranach */
@media (max-width: 900px) {
    #h .center {
        display: none;
    }
}

/* MENU */
#menu {
	color:var(--grey-darker);
	background: #f8fafc;
	width:280px;
	padding:0;
	border-radius: 0;
	box-shadow: var(--shadow-md);
	border-right: 1px solid var(--grey-lighter);
	display: flex;
	flex-direction: column;
	transition: all 0.3s ease;
}

#menu.collapsed {
	width: 60px;
}

#menu.collapsed h4,
#menu.collapsed ul li .txt {
	display: none;
}

#menu.collapsed ul {
	padding: 0;
}

#menu.collapsed ul li {
	width: 40px;
	margin: 2px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#menu.collapsed ul li a {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#menu.collapsed .menu-toggle {
	padding: 12px;
}

#menu.collapsed .menu-toggle .toggle-text {
	display: none;
}

.menu-content {
	/* flex: 1; */
	overflow-y: auto;
}

.menu-toggle {
	padding: 16px 24px;
	border-top: 1px solid var(--grey-lighter);
	background: var(--grey-lighter);
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--grey-dark);
	font-size: 13px;
}

.menu-toggle:hover {
	background: var(--grey-light);
	color: var(--grey-darker);
}

.menu-toggle i {
	font-size: 16px;
	transition: transform 0.3s ease;
}

#menu.collapsed .menu-toggle i {
	transform: rotate(180deg);
}

#menu a {
	color:var(--grey-dark);
}

#menu h4 {
	display: inline-flex;
    align-items: center;
	font-family: var(--font-family-header);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.5px;
	min-height: auto;
	cursor:pointer;
	float:left;
	width:calc(100% - 20px);
	padding: 16px 12px 12px 8px;
	margin: 0 0 0px 0;
	border: none;
	color: var(--grey-darker);
	background: transparent;
	transition: all 0.2s ease;
	background: #f8fafc;
	font-weight: var(--font-family-text-medium);
}
#menu h4::before {
    content: "chevron_right"; /* nazwa ikony z Google Material Icons */
    font-family: 'Material Symbols Outlined'; /* poprawny font */
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
    margin-right: 4px; /* odstęp od tekstu */
    display: inline-block;
    color: var(--grey-darker);
}

#menu h4:hover {
	background: var(--grey-lighter);
}
#menu h4.inactive .txt a {
	color:var(--grey);
	text-decoration: line-through;
}

#menu h4 img {display:none;}

#menu h4 .txt {
	margin: 0;
	float: left;
	clear: right;
}

#menu ul {
	padding:0 12px 0 12px;
	margin:0 0 12px 0; 
	display:none;
	float:left;
	width:100%;
	background: var(--white);
}

#menu ul.active {
	display:block;
}

#menu ul li {
	display:block;
	float:left;
	width:100%;
	padding: 0;
	border: none;
	min-height: auto;
	margin: 2px 0;
	transition: all 0.2s ease;
	overflow:hidden;
	border-radius: var(--radius-md);
}

#menu ul li.active, #menu ul li:hover {
	background: var(--grey-lighter);
	box-shadow: var(--shadow-sm);
	border-radius: var(--radius-md);
	border: none;
	margin: 2px 0;
	margin-right: 24px;
}

#menu ul li.gli {
	cursor:pointer;
}

#menu ul li.none_li_active {
	background: var(--mark);
	color: var(--white) !important;
	cursor:pointer;
	border-radius: var(--radius-md);
	border: none;
	margin: 2px 0;
	box-shadow: var(--shadow-sm);
	margin-right: 24px;
}

#menu ul li a {
	display: block;
	transition: all 0.2s ease;
}


#menu ul li.red {}
#menu ul li a:hover {}

#menu ul li img {display: none;}

#menu ul li .txt {
	margin:0;
	font-size: 13px;
	font-weight: 400;
	display: block;
	padding: 12px 16px;
}

#menu .footer {display:none;}
#menu .footer img {width:100% !important;margin:0px !important;}

/* MAIN CONTENT */
#main { 
	background: #f8fafc;
	min-height: 100vh;
}

#content {
	float:right;
	width:calc(100% - 290px);
	padding: 20px;
	background: #f8fafc;
	transition: all 0.3s ease;
}

#content.small {
	width:calc(100% - 330px);
}

#content.expanded {
	width: calc(100% - 60px);
}
/* CONTENT BLOCKS */
#content .home_block {
	width:calc(50% - 20px);
	margin:16px;
	padding:24px;
	border: 2px solid var(--grey-lighter);
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: var(--shadow-sm);
	transition: all 0.2s ease;
}

#content .home_block:hover {
	box-shadow: var(--shadow-md);
	border-color: var(--grey-light);
}

/* CONTENT LISTS */
#content ul {
	float:left;
	width:100%;
	min-width:730px;
	margin: 0px;
	padding: 0px;
	background: var(--white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

#content ul li { 
	background: var(--white);
	border: none;
	border-bottom: 1px solid var(--grey-lighter);
	list-style: none;
	display: block;
	padding: 16px 20px;
	float: left;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	transition: all 0.2s ease;
}

#content ul li:last-child {
	border-bottom: none;
}

#content ul li.big, #content ul li.big span.block {
	height:auto !important;
	min-height: 50px;
	overflow:auto;
}

#content ul li:hover { 
	background: var(--grey-lighter);
}

#content ul li.first {
	font-weight: 600;
	border: none !important;
	padding: 20px;
	background: var(--mark);
	color: var(--white);
	font-size: 15px;
	font-family: var(--font-family-header);
}

#content ul li span.block {
	float:left;
	width:20%;
	min-width: max-content;
	padding-left:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: flex;
	align-items: baseline;
	gap: 4px;
}

#content ul li span.block.checkbox {
	width: max-content;
}

#content .form-checkbox-all {
	float:right;
	clear:left;
	margin:1em;
	padding: 16px;
	background: var(--white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

#content .form-checkbox-all .checkAll {
	margin-right:.8em;
}

#content .form-checkbox-all select[name=akcja] {
	margin:1em 0 0 0;
}

#content .form-checkbox-all input[type=submit] {
	float:right;
	clear:right;
}

#content ul li span.block input,#content ul li span.block select {
	padding: 8px 12px;
	width:100%;
	font-size: 13px;
}

#content ul li .link, #content ul li.link {
	cursor:pointer;
}

#content ul li.li {
	background:white;
	border-bottom:1px solid var(--grey-lighter);
}

#content ul li img, #content ul li a img {
	width: 20px;
	height: 20px;
	margin: 0px 8px 0px 0px;
	border-radius: var(--radius-sm);
}

.border1, .border2, .border3 {
	border-left: solid 4px var(--grey-lighter) !important;
}

/* Klasyczny UL - resetuje wszystkie nadpisane style */
#content ul.classic {
    float: none;
    width: auto;
    min-width: auto;
    margin: 16px 0;
    padding: 0 0 0 20px;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    list-style: disc inside;
    line-height: 1.6;
}

#content ul.classic li {
    background: transparent;
    border: none;
    border-bottom: none;
    list-style: disc;
    display: list-item;
    padding: 4px 0;
    float: none;
    width: auto;
    box-sizing: content-box;
    transition: none;
    font-size: 14px;
    color: var(--grey-dark);
}

#content ul.classic li:last-child {
    border-bottom: none;
}

#content ul.classic li:hover {
    background: transparent;
}

/* HEADINGS */
#content h1 {
	float: left;
	width: 100%;
	font-family: var(--font-family-header);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.5px;
	margin: 0 0 20px 0;
	color: var(--grey-darker);
}

#content h1 span.h, #content h2 span.h, #content h3 span.h, #content h4 span.h {
	float:right;
	margin-right:5px;
}

#content h2 {
	float: left;
	width: 100%;
	font-family: var(--font-family-header);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.25px;
	margin: 20px 0 12px 0;
	color: var(--grey-darker);
}
#content ul h2 {margin:1rem;}
#content h3 {
	float: left;
	width: 100%;
	font-family: var(--font-family-header);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0;
	margin: 16px 0 8px 0;
	color: var(--grey-darker);
}

#content h4 {
	float: left;
	width: 100%;
	font-family: var(--font-family-header);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	margin: 12px 0 6px 0;
	color: var(--grey-darker);
}

/* NAVIGATION */
#content div.nav {
	float:left;
	width:100%;
	margin:16px 0;
	padding:8px 0;
	border-top:1px solid var(--grey-lighter);
	border-bottom:1px solid var(--grey-lighter);
	background: var(--white);
	border-radius: var(--radius-md);
	position: sticky;top:0;z-index:1000;
}

#content div.nav ul {
	list-style:none;
	box-shadow: none;
	background: transparent;
}

#content div.nav ul li {
	display: block;
	float: left;
	width: auto;
	border: none;
	background:transparent;
	padding: 6px 8px;
	margin: 0 4px;
	border-radius: var(--radius-md);
	transition: all 0.2s ease;
}

#content div.nav ul li:hover {
	background: var(--grey-lighter);
}

#content div.nav ul li a {
	padding:0 3px;
	border-radius:0;
}

#content div.nav ul li.active a {
	color: var(--mark);
	font-weight: 500;
}

/* PHOTOS */
#content .photo_ue_pokaz {
	width:100%;
	display:flex;
	flex-flow:row wrap;
	gap:1.5em;
}

#content .photo_ue_pokaz_box {
	padding:20px;
	width:calc(100% / 5 - 2.4rem);
	text-align:center;
	border: 2px solid var(--grey-lighter);
	border-radius: var(--radius-lg);
	overflow:hidden;
	background: var(--white);
	transition: all 0.2s ease;
}

#content .photo_ue_pokaz_box:hover {
	border-color: var(--mark);
	box-shadow: var(--shadow-md);
}

#content .photo_ue_pokaz_box .img {
	float:left;
	width:100%;
}

#content .photo_ue_pokaz_box .img img {
	max-width:300px;
	max-height: 250px;
	border-radius: var(--radius-md);
}

#content .photo_ue_pokaz_box .option {
	float:left;
	width:100%;
	font-size:16px;
	margin-top: 12px;
}

#content .photo_ue_pokaz_box .option svg {
	margin:0px 6px;
}

#content .photo_ue_pokaz_box .admin_number {
	float:left;
	width:100%;
}

/* PAGINATION */
div.pagination {
	display: flex;
	justify-content: end;
	align-items: center;
	gap:8px;
	margin:2rem 0;
	flex-flow: row wrap;
	width:100%;
}

div.pagination a {
	padding:10px 14px;
	border: 2px solid var(--grey-lighter);
	border-radius: var(--radius-md);
	font-size: 14px;
	font-weight: 500;
	color: var(--grey-dark);
	background: var(--white);
	transition: all 0.2s ease;
}

div.pagination a:hover {
	color: var(--white);
	background: var(--mark);
	border-color: var(--mark);
}

div.pagination a.strona_active, div.pagination a.pagination_active {
	color: var(--white);
	background: var(--mark);
	border-color: var(--mark);
}

div.page {
	float:right;
	width:100%;
	text-align:right;
	clear:both;
	margin:24px 0;
	font-size: 14px;
	border-top: 1px solid var(--grey-lighter);
	border-bottom: 1px solid var(--grey-lighter);
	padding: 16px 0;
	background: var(--white);
	border-radius: var(--radius-md);
}

div.page span {
	display:block;
	float:left;
	margin:6px;
	display: inline;
	float: none;
}

div.page select {
	padding: 8px 12px;
	margin:0px 8px;
	display: inline;
	float: none;
}

div.page input {
	padding: 8px 12px;
	margin:0px 8px;
	display: inline;
	float: none;
}

/* PHOTO BOX */
.box_photo{
	float:left;
	margin:0px 16px 16px 0;
	height:175px;
	width:170px;
	text-align:center;
	overflow:hidden;
}

.box_photo a img {
	max-width:150px;
	max-height:150px;
	border: 2px solid var(--grey-lighter);
	border-radius: var(--radius-md);
	transition: all 0.2s ease;
}

.box_photo a img:hover {
	border: 2px solid var(--mark);
	box-shadow: var(--shadow-sm);
}

/* BACKGROUNDS */
.bg1 {
	float: left;
	width: 100%;
	padding:24px 0;
	background: var(--grey-lighter);
	border-radius: var(--radius-md);
}

.bg2 {
	float: left;
	width: 100%;
	padding:24px 0;
}

.forms_fv input {
	width:100%;
	height:auto;
	border: 2px solid var(--grey-lighter);
	background: var(--white);
	text-align:center;
	padding: 12px;
}

/* MESSAGES */
.panel_zgloszenia_msg {
	float:left;
	width:calc(100% - 60px);
	padding:20px;
	margin:0px 0px 24px 0px;
	border: 2px solid var(--grey-lighter);
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: var(--shadow-sm);
}

.panel_zgloszenia_msg.user {
	float:right;
}

.panel_zgloszenia_msg.main_msg {
	width:100%;
	border: 2px solid var(--mark);
}

.panel_zgloszenia_msg .head {
	float:left;
	width:100%;
	padding:0px 0px 12px 0px;
	border-bottom:1px solid var(--grey-lighter);
	font-size:13px;
	color: var(--grey-dark);
}

.panel_zgloszenia_msg .head .l {
	float:left;
}

.panel_zgloszenia_msg .head .r {
	float:right;
}

.panel_zgloszenia_msg .msg {
	float:left;
	width:100%;
	padding:16px 0px;
	line-height: 1.6;
}

.panel_zgloszenia_msg .option {
	float:left;
	width:100%;
	padding:12px 0px 0px 0px;
	text-align:right;
	font-size:13px;
	border-top:1px solid var(--grey-lighter);
}

.panel_zgloszenia_msg .option a {
	margin:0px 8px;
	padding:8px 16px;
	border-radius: var(--radius-md);
	background: var(--grey-lighter);
	transition: all 0.2s ease;
}

.panel_zgloszenia_msg .option a:hover {
	background: var(--mark);
	color: var(--white);
}

/* TABLES */
table {
	width:100%;
	border-collapse:collapse;
	background: var(--white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

table tr:first-child th {
	font-weight: 600;
	background: var(--mark);
	color: var(--white);
	font-family: var(--font-family-header);
	border-bottom: 1px solid var(--grey-lighter);
	padding:16px 20px;
	vertical-align: top;
}

table tr td {
	border: none;
	border-bottom: 1px solid var(--grey-lighter);
	padding:16px 20px;
	vertical-align: top;
}

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

table tr:hover:not(:first-child) {
	background: var(--grey-lighter);
}

table tr td.akcja {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

table.s_final.products {
	font-weight: 400;
}

table.zamowienie.produkty {
	width:100%;
	border-collapse:collapse;
	line-height: 1.5em;
}

table.zamowienie.produkty tr td:first-child {
	width:60%;
}

/* Table in table _ reset*/

table tr td table {
    background: var(--grey-lighter);
    border-radius: var(--radius-md);
    box-shadow: none;
    border: 1px solid var(--grey-light);
    margin: 8px 0;
}

table tr td table tr:first-child th {
    background: var(--grey-lighter);
    color: var(--grey-darker);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
	border-bottom: 1px solid var(--grey-light);
}
table tr td table.s_final.products tr:first-child th {
    background: var(--mark-light);
    color: var(--grey-darker);
    font-size: 13px;
    font-weight: 500;
    padding: 12px 12px;
	border-bottom: 1px solid var(--grey-light);
}

table tr td table tr td {
    padding: 8px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--grey-light);
}

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

table tr td table tr:hover {
    background: var(--white);
}


/* FORMS */
form {
	display:flex;
	flex-direction:column;
	width:100%;
}

input[type=submit], input[type=button] {
	width:auto;
	float:none;
	cursor:pointer;
	padding: 12px 24px;
	background: var(--mark);
	border: none;
	margin: 0.5em auto;
	box-shadow: var(--shadow-sm);
	color: var(--white);
	border-radius: var(--radius-md);
	transition: all 0.2s ease;
	font-weight: 500;
	font-size: 14px;
	font-family: var(--font-family-text);
}

input[type=submit].next, input[type=button].next {
	margin-left:20px;
	background: var(--green-dark);
}

input[type=submit]:hover, input[type=button]:hover {
	background: var(--mark-dark);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

form div.line input.short, form div.line_desc input.short {
	width:auto;
	min-width:200px;
}

div.line {
	float:left;
	width:100%;
	margin:8px 0;
}

div.line input[type=checkbox], div.line input[type=radio] {
	width:auto;
	margin:12px 0px;
}

div.line div.desc2 {
	float:left;
	margin:8px 16px;
}

form div.line input, form div.line select, div.line textarea {
	width:100%;
}

form div.line .input50 {
	width:49.5%;
}

form div.line .input33 {
	width:33%;
}

form div.line .input33.input_center {
	margin:0px 0.3%;
}

form label{
	display:flex;
	justify-content:flex-start;
	align-items:center;
	gap:.6rem;
}

form div.line_desc label input[type=checkbox], form div.line_desc label input[type=radio]{
	margin:unset;
}

/* LINE_DESC - New Form Style */
div.line_desc {
	display: flex;
	flex-flow:row nowrap;
	align-items:baseline;
	gap:1.5rem;
	width:100%;
	margin:0.5rem 0;
	padding: 8px 20px;
	background: var(--white);
	border-radius: var(--radius-md);
	transition: all 0.2s ease;
}

div.line_desc:hover {
	border-color: var(--grey-light);
}

div.line_desc:focus-within {
	border-color: var(--mark);
	box-shadow: 0 0 0 3px rgba(39, 122, 189, 0.1);
}

div.line_desc div.desc {
	width:25%;
	margin-top: 0.5rem;
	text-align:right;
	font-weight: 500;
	color: var(--grey-darker);
	font-size: 14px;
}

div.line_desc div.group {
	width:75%;
	display: flex;
	flex-flow:column;
	align-items:flex-start;
	gap:.5rem;
}

div.line_desc div.group div.line input, div.line_desc div.group div.line textarea, div.line_desc div.group div.line select {
	width:100%;
}

div.line_desc div.group div.line input[type=checkbox], div.line_desc div.group div.line input[type=radio] {
	width:auto;
}

div.line_desc div.group div.line {
	margin:0;
}

div.line_desc div.group div.line_desc {
	margin:0 0 .5rem;
}

div.line_desc input, div.line_desc select, div.line_desc textarea {
	width:70%;
}

div.line_desc span.lang {
	width:70%;display: flex;flex-direction: column;
}

div.line_desc span.lang input {
	width:100%;
}

div.line_desc span.lang textarea {
	width:100%;
}

div.line_desc input[type=checkbox], div.line_desc input[type=radio] {
	width:auto;
	margin:0 0 0 0;
}

div.line_desc div.desc2 {
	font-size:13px;
	line-height: 1.4;
	color: var(--grey);
}

div.line_desc input[type=date] {
	width:auto;
}

form div.info_short {
	float:right;
	clear:left;
	width:70%;
	border: 2px solid var(--blue-light);
	background: rgba(160, 212, 255, 0.1);
	padding:16px;
	margin: 16px 0;
	border-radius: var(--radius-md);
	font-size: 14px;
}

form div.info_long{
	float:left;
	width:100%;
	border: 2px solid var(--blue-light);
	background: rgba(160, 212, 255, 0.1);
	padding:16px;
	margin: 16px 0;
	border-radius: var(--radius-md);
	font-size: 14px;
}

form div.submit{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin:1rem 0;
	width: 100%;
	padding: 16px 20px;
}

#content ul li span.block form div.line_desc input, #content ul li span.block form div.line_desc select {
	width:75%;
	margin: 8px 0;
}

#content ul li span.block form div.line_desc input[type=date] {
	width:auto;
}

div.info {
	float:right;
	clear:left;
	width:100%;
	border-top: 2px solid var(--blue-light);
	border-bottom: 2px solid var(--blue-light);
	background: rgba(160, 212, 255, 0.1);
	padding:16px;
	margin: 0px 0 20px 0;
	border-radius: var(--radius-md);
	font-size: 14px;
}

.forms_option div.info{
	width:calc(70% - 1rem);
	border: none;
	background: var(--grey-lighter);
	padding:12px 18px;
	font-size:13px;
	border-radius: var(--radius-md);
}

div.info.border2 {
	padding-left:20px;
}

form {
	position:relative;
}

.forms {
	width: 100%;
	margin: 0px 0px;
	padding: 0px;
	float:left;
}

/* FORMS OPTION - Modern Card Style */
.forms_option {
	width: 100%;
	float: left;
	padding: 0px;
	margin: 0px 0px 20px 0;
	border: 2px solid var(--grey-lighter);
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	transition: all 0.2s ease;
}

.forms_option:hover {
	border-color: var(--grey-light);
	box-shadow: var(--shadow-lg);
}

.forms_option_text {
	background: linear-gradient(135deg, var(--mark) 0%, var(--mark-dark) 100%);
	float: left;
	width: 100%;
	margin: 0px;
	padding: 16px 24px;
	font-weight: 600;
	font-size: 16px;
	color: var(--white);
	font-family: var(--font-family-header);
	letter-spacing: 0.25px;
}

.form_info{
	background: var(--grey-lighter);
	padding:24px;
	border-radius: var(--radius-lg);
	margin:1.5rem 0;
	display: flex;
	flex-direction: column;
	border: 2px solid var(--grey-lighter);
}

.form_info.ok{
	background: var(--green-light);
	border-color: var(--green-dark);
	color: var(--grey-darker);
}

.form_info.error{
	background: var(--red-light);
	border-color: var(--red-dark);
	color: var(--white);
}

.forms div.checkboxy {
	width: 200px;
	float: left;
	margin: 16px 0 0 32px;
}

.forms div.checkboxy input {
	margin:0 8px 0 0;
}

/* OLD FORMS STYLE - Enhanced for backward compatibility */
.forms p {
	width: 100%;
	float: left;
	margin:0px 0px 12px 0px;
	padding:12px 20px;
	line-height:normal;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.forms .forms_option p {
	padding:12px 20px 0px 20px;
}


.forms div.textarea {
	width: 100%;
	float:left;
	padding:0 0px;
}

.forms .forms_option div.textarea {
	padding:0 20px;
}

.forms p span.left {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
	width: 25%;
	text-align: right;
	padding: 12px 2% 0px 0px;
	font-weight: 500;
	color: var(--grey-darker);
	font-size: 14px;
}

.forms p span.lang {
	float: right;
	width: 75%;
}

.forms p img, .forms p a img {
	max-height:250px;
	border-radius: var(--radius-md);
}

.forms p input {
	width: 75%;
	padding: 10px 14px;
	height: auto;
	min-height: 40px;
}

.forms p input[type=datetime-local] {
	width:auto;
}

.forms p span.lang input {
	width: 100%;
	padding: 10px 14px;
	height: auto;
	min-height: 40px;
}

.forms p input[type=file] {
	padding: 12px 16px;
	border: 2px dashed var(--grey-light);
	background: var(--grey-lighter);
}

.forms p input[type=checkbox], .forms p input[type=radio] {
	width:auto;
}

.forms textarea {
	width: 75%;
	margin-top: 8px;
	padding: 16px;
	min-height: 120px;
	font-size: 14px;
	color: var(--grey-darker);
	font-family: var(--font-family-text);
	line-height: 1.5;
	resize: vertical;
}

.forms p select {
	width: 75%;
	padding: 12px 16px;
	min-height: 48px;
}

.forms p.full {
	float:left;
	width: 100%;
}

.forms p.full span.lang {
	width: 100%;
}

.forms .send {
	text-align: center;
	width: 100%;
	float:left;
	margin:0px;
	padding: 16px 20px;
}

.forms .send input {
	width: auto;
	display:inline;
	float: none;
	cursor: pointer;
	padding: 12px 24px;
	background: var(--mark);
	border: none;
	margin: 0px 8px;
	box-shadow: var(--shadow-sm);
	color: var(--white);
	border-radius: var(--radius-md);
	transition: all 0.2s ease;
	font-weight: 500;
	font-size: 14px;
	min-width: 120px;
}

.forms .send input:hover {
	background: var(--mark-dark);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.config_dnt_records {display: flex;flex-flow:row wrap;}
.config_dnt_records .config_dnt_record {width:calc(100% / 4);}


/* DNT CREATOR */
.dnt_creator .text_creators{
	display:flex;
	flex-flow:column;
	margin:2rem 0;
	width:100%;
	gap:2rem;
}

.dnt_creator .text_creators .creator { 
	display: flex; 
	flex-flow: column; 
	gap: 0.8rem; 
	background: var(--grey-lighter); 
	position: relative; 
	padding:24px;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: all 0.2s ease;
}

.dnt_creator .text_creators .creator:hover {
	border-color: var(--grey-light);
	box-shadow: var(--shadow-md);
}

.dnt_creator .text_creators .creator input {  
	width: 120px;
	padding:.5rem .75rem;
	color: var(--grey-darker);
	font-size: 13px;
}

.dnt_creator .text_creators .creator select {  
	width: 100px;
	padding:.5rem .75rem;
	color: var(--grey-darker);
	font-size: 13px;
}

.dnt_creator .text_creators .creator .navs { 
	display: flex; 
	flex-flow: row wrap; 
	gap: 1rem; 
	justify-content: center;
	font-size: 13px;
	color: var(--grey-darker);
	background: var(--white);
	padding: 16px;
	border-radius: var(--radius-md);
}

.dnt_creator .text_creators .creator .navs .item { 
	display: flex; 
	flex-flow: row nowrap; 
	align-items: center; 
	gap: 0.75rem;
}

.dnt_creator .text_creators .creator .content { 
	display: flex; 
	flex-flow: column; 
	gap: 1.5rem;
}

.dnt_creator .text_creators .creator .content .blocks { 
	display: flex; 
	flex-flow: row nowrap; 
	width: 100%; 
	gap: 1rem;
}

.dnt_creator .text_creators .creator .content .blocks .block {
	display: flex;
	flex-direction: column;
	gap: 1rem; 
	width: 100%;
	padding:16px;
	background: var(--white); 
	border-radius: var(--radius-md);
	border: 1px solid var(--grey-light);
	position: relative;
}

.dnt_creator .text_creators .creator .content .blocks .block textarea { 
	width: 100%; 
	min-height: 120px;
}

.dnt_creator .text_creators .creator .content .blocks .block .column_items { 
	width: 100%;
	display: flex;
	flex-flow:row wrap;
	font-size:12px;
	gap:.75rem;
	color: var(--grey-dark);
}

.dnt_creator .text_creators .creator .content .blocks .block .column_items .item {  
	display: flex;
	flex-flow:row nowrap;
	align-items:center;
	gap: .5rem;
}

.dnt_creator .move-buttons { 
	position: absolute; 
	top: 6px; 
	right: 24px; 
	display: flex; 
	gap: 8px;
}

.dnt_creator .move-buttons button { 
	padding: 8px 12px;
	background: var(--white);
	border: 2px solid var(--grey-lighter);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all 0.2s ease;
	font-weight: 500;
	color: var(--grey-dark);
}

.dnt_creator .creator .move-buttons button:hover {
	background: var(--mark-dark);
	color:var(--white);
}
.dnt_creator .creator .column-buttons button:hover {
	background: var(--mark-dark);
	color:var(--white);
}

.dnt_creator .hidden { 
	display: none; 
}

.dnt_creator .block .column-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
	position: absolute;
	top:-29px;right:0;
}

.dnt_creator .block .column-buttons .column-info {
    font-size: 11px;
    color: #666;
    font-weight: bold;
}

.dnt_creator .block .column-buttons button {
    padding: 3px 8px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    border-radius: 5px;
    font-size: 12px;
    margin-right: 5px;
}
.dnt_creator .creator .move-buttons {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.dnt_creator .creator .move-buttons button {
    padding: 5px 10px;
    border: 1px solid #ccc;
    background: var(--white);
    cursor: pointer;
    border-radius: 5px;
    font-size: 12px;
}


.dnt_creator .creator .navs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 5px;
}

.dnt_creator .creator .navs .item {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.dnt_creator .creator .navs .item label {
    font-weight: bold;
    margin-bottom: 3px;
    font-size: 11px;
    color: #666;
}

.dnt_creator .creator .navs .item input,
.dnt_creator .creator .navs .item select {
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
}

.dnt_creator .creator .column_items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px;
    background: #f0f0f0;
    border-radius: 3px;
}

.dnt_creator .creator .column_items .item {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

.dnt_creator .creator .column_items .item label {
    font-size: 10px;
    margin-bottom: 2px;
    color: #777;
}

.dnt_creator .creator .column_items .item input,
.dnt_creator .creator .column_items .item select {
    padding: 3px 5px;
    font-size: 11px;
    border: 1px solid #ddd;
    border-radius: 2px;
}

.dnt_creator .creator .custom_bg_input.hidden {
    display: none;
}

.dnt_creator .another_creator { 
	display: flex; 
	background: var(--grey-lighter); 
	margin: 2rem 0; 
	width: 100%; 
	justify-content: center; 
	padding: 20px 0; 
	cursor: pointer; 
	letter-spacing: 0.5px;
	border: 2px dashed var(--grey-light);
	border-radius: var(--radius-lg);
	transition: all 0.2s ease;
	font-weight: 500;
	color: var(--grey-dark);
}

.dnt_creator .another_creator:hover {
	background: var(--mark);
	border-color: var(--mark);
	color: var(--white);
}

.media_container{width:100%;display:flex;flex-direction:column;padding:0 2rem;}
.media_item{display:flex;align-items:center;gap:1rem;margin:1rem 0;padding:1rem;border:1px solid var(--grey-light);border-radius:5px;}
.media_controls{display:flex;flex-direction:column;gap:0.5rem;}
.media_controls button{padding:3px 8px;border:1px solid #ccc;background:#fff;cursor:pointer;border-radius:5px;font-size:12px;margin-right:5px;}
.media_preview img{border-radius:3px;}
.media_info{font-size:0.9rem;color:var(--grey);}
.bulk_upload small{color:var(--grey);display:block;margin-top:0.5rem;}
.video_item{display:flex;align-items:flex-start;gap:1rem;margin:1rem 0;padding:1rem;border:1px solid var(--grey-light);border-radius:5px;}
.video_controls{display:flex;flex-direction:column;gap:0.5rem;}
.video_controls button{padding:3px 8px;border:1px solid #ccc;background:#fff;cursor:pointer;border-radius:5px;font-size:12px;margin-right:5px;}
.video_preview{flex:1;max-width:300px;}
.embed_preview{max-width:100%;overflow:hidden;}
.embed_preview iframe{max-width:100%;height:auto;}
.video_info{flex:1;min-width:200px;}
.video_info textarea{font-size:0.8rem;font-family:monospace;resize:vertical;}
.add_video small{color:var(--grey);display:block;margin-top:0.5rem;}

/* Responsive */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        height: auto;
    }
}

/* BACK TO TOP */
.back-top {
	position:fixed;
	bottom:24px;
	right:24px;
	padding: 0px;
	z-index: 1000;
}

.back-top a {
	font-size: 32px;
	color: var(--grey-dark);
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.2s ease;
}

.back-top a:hover {
	color: var(--grey-darker);
}

}

/* RESPONSIVE DESIGN */
@media (max-width: 1500px) {
	.dnt_creator .text_creators .creator .navs {
		justify-content: flex-start;
	}
}

@media (max-width: 1400px) {
	.dnt_creator .move-buttons {
		position: relative;
		right:unset;
		top:unset;
		justify-content: flex-end;
	}
}

@media (max-width: 900px) {
	#h .l span {
		display:none;
	}
	
	#h a.menu {
		display:inline;
	}
	
	#menu {
		display:none;
		width: 100%;
		float: left;
		position: absolute;
		top: 72px;
		z-index: 1000;
		box-shadow: var(--shadow-lg);
	}
	
	#content {
		width:100%;
		padding: 20px;
	}
	
	#content.small {
		width: 100%;
	}

	.forms_option {
		padding:20px;
		margin: 0 0 24px 0;
	}
	
	.forms p span.left {
		width:100%;
		padding:12px 0px;
		text-align:left;
	}
	
	.forms p input, .forms p textarea, .forms p select {
		width:100%;
	}
	
	span.lang {
		width:100%;
	}
	
	.forms .forms_option p {
		padding:0;
	}
	
	.forms p span.lang {
		width: 100%;
	}
	
	.forms div.info {
		width:100%;
		margin:16px 0px;
	}
	
	.forms_option_text {
		margin: 0px 0px 20px 0px;
		padding: 16px 20px;
		font-size: 16px;
	}

	div.line_desc {
		flex-direction: column;
		gap: 1rem;
	}
	
	div.line_desc .input33 {
		width:100%;
	}
	
	div.line_desc .input33.input_center {
		margin:0;
	}
	
	div.line_desc input, div.line_desc select, div.line_desc textarea {
		width:100%;
	}
	
	div.line_desc div.desc {
		width:100%;
		text-align:left;
		padding: 0;
		margin-top: 0;
	}
	
	div.line_desc div.group {
		width:100%;
	}
	
	form div.info_short {
		width:100%;
	}
}

@media (max-width: 650px) {
	#content .photo_ue_pokaz_box {
		width:calc(33.333% - 1rem);
	}
}

@media (max-width: 500px) {
	#h {
		flex-direction: column;
		padding: 16px 20px;
		gap: 12px;
	}
	
	#h .l {
		width:100%;
		text-align:center;
	}
	
	#h .l a {
		float:none;
	}
	
	#h .r {
		width:100%;
		text-align:center;
		margin: 0;
	}
	
	#menu {
		top: 100px;
	}
	
	#content {
		padding: 16px;
	}
}