html{scroll-behavior: smooth;}
input[type="text"]:active, input[type="text"]:focus{outline:none}
body{background-color:none; margin:0; font-size:1em;
		font-family: Helvetica, sans-serif; text-align:center; line-height:1em; color:white;  
		background-image:url('/NESA/NESA_files/slike/index-pozadina.jpg'); background-position:center; background-repeat:no-repeat; 
		background-size:cover; background-attachment:fixed; padding:0; border:0;
		/*-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;  
		-moz-user-select: none; -ms-user-select: none;  user-select: none*/}
	
	/* ovo je logo u kutu*/
	figure{background-color:none; position:fixed; top:0vw; left:0vw; padding:0; margin:0; overflow:hidden; z-index:101;
			height:calc(50vw - 35em); width:calc(50vw - 35em); max-width:20em; max-height:20em; font-size:1em; 
			-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;  
			-moz-user-select: none; -ms-user-select: none;  user-select: none*}
		figure figcaption{transform:rotate(-30deg); /*background: linear-gradient(180deg, rgba(0,255,0,1) 0%, #00B400 100%);*/
					height:190%; width:190%; display:block; /*border: .2rem solid white;*/ background-color: white;
					margin-left:-125%; margin-top:-143.5%; box-shadow:0 0 .7em inset gray; cursor:pointer}
		figure figcaption img{transform:rotate(30deg); margin-top:87%; margin-left:13%; width:15%; height:auto; padding:0;}
	
	/* header */
	header{width:100vw; height:5em; left:0; top:0; position:fixed; margin:0; z-index:100; 
			background-color:white; box-shadow:0 0 1em rgba(0,0,0,.5)}
		.header_container_za_botune {position:static; width:70em; height:6em; margin:0 auto; overflow-y:visible; overflow-x:hidden;			
			background-color:rgba(0,0,0,0); display:flex; justify-content: center; align-items: flex-start;
			box-sizing:border-box; padding-top:.5em; z-index:2; }
			.header_container_za_botune input, #header_botun_odjava{width:6em; height:6em; margin:0em;  cursor:pointer; word-wrap: break-word; white-space: normal;
					z-index:102; color:rgba(255,255,255,0); transition:ease .25s; box-shadow:none; border-radius:100vw;
					cursor:pointer; border:none; box-sizing: border-box; border:.4em solid white; 
					background-size:50%; background-position:center; background-repeat:no-repeat; 
					background-color:gray /* ovo je za svaki slučaj - ako se ne definira priko php inline stylesheeta*/}
				.header_container_za_botune input:hover, #header_botun_odjava:hover{color:rgba(255,255,255,1);background-size:0%;}
				.header_container_za_botune input:disabled {color:rgba(255,255,255,1); background-size:0%; cursor:default}
			
			#header_botun_odjava{position:absolute; top:0.5em; right:2em; background-image:url('/NESA/NESA_files/slike/ikonice-odjava.svg'); background-color:#bbb}
	
	/* INFORMATOR */	
	#informator:before{content:"x"; font-size:1em; width:1em; height:1em; position:absolute; 
						top:.5em; right:.5em; z-index:1; color:black}
	#informator{width:20em; height:auto; position:fixed; top:calc(50vh - 5em); left:calc(50vw - 7.5em); 
				background-color:white; box-shadow:0 0 1000vw 1000vw rgba(0,0,0,0.3); box-sizing:border-box; border:none;
				cursor:pointer; text-align:center; overflow:auto; font-size:1em; z-index:1000; padding:2em}	

	/* SECTIONI ----------------------------------------------------------------------------*/
	main{display:block; position:absolute; z-index:0; width:70em; top:8em; padding-top:00em/* samo za prikaz errora */; 
		left:calc(50vw - 35em); box-sizing:border-box; margin:0; height:1000vh; overflow:hidden; background-color:none; color:black; }
		section{position:absolute; left:8em; top:0; width:54em; padding:0; margin:0;  transition:0.5s;
				background-color:none; border:none; border-radius:3em; overflow:hidden;  z-index:1; float:left}		
		
		/* section MALI	*/	
			section:nth-of-type(odd){left:0em; width:6em; height:6em;}
			section:nth-of-type(even){left:64em; width:6em; height:6em;}
			section:nth-of-type(1), section:nth-of-type(2){top:0em;}
			section:nth-of-type(3), section:nth-of-type(4){top:7em;}
			section:nth-of-type(5), section:nth-of-type(6){top:14em;} 
			section:nth-of-type(7), section:nth-of-type(8){top:21em;}
			section:nth-of-type(9), section:nth-of-type(10){top:28em}
			section:nth-of-type(11), section:nth-of-type(12){top:35em}
			section:nth-of-type(13), section:nth-of-type(14){top:42em}
			section:nth-of-type(15), section:nth-of-type(16){top:49em}
			section:nth-of-type(17), section:nth-of-type(18){top:56em}
			section:nth-of-type(19), section:nth-of-type(20){top:63em} 	
			section:nth-of-type(21), section:nth-of-type(22){top:70em} 	
			
		/*section VELIKI */
			section:nth-last-of-type(1){width:54em; height:auto; left:8em; top:0em; }
			section:nth-last-of-type(1) .legend-ikonica{cursor:default}
		
		
			.legend-ikonica{position:relative; top:0; left:0; float:left; width:6em; height:6em; padding:.5em; box-sizing:border-box; z-index:10;
							word-wrap:break-word; white-space: normal; font-size:1em; text-align:center;  text-shadow:none;
							color:rgba(255,255,255,0); transition:ease .25s; background-color:gray; /* kao backup */
							background-size:50%; background-repeat:no-repeat; background-position:center;
							border-radius:3em; border:.4em solid white; cursor:pointer}	
			.legend-ikonica:hover {color:rgba(255,255,255,1); background-size:0%; }
			.legend-ikonica:disabled {color:rgba(255,255,255,1); background-size:0%; }
					
			
			fieldset{position:relative; top:-5em; left:1em; float:left; width:52em; height:calc(100% - 2em); z-index:0; background-color:white; 
					padding:0 .5em; box-sizing:border-box; border:none}
				fieldset h1{float:left; font-size:1.25em; width:100%; padding:.5em; padding-left:4em; height:4em; /* ovo je computed 5em*/ color:black; margin:0; 
						line-height:1em; overflow:hidden; text-align:left; box-sizing:border-box; text-transform: uppercase; 
						background-color:white; 
						display:flex; align-items: center; word-wrap:break-word; white-space: normal; flex-wrap: wrap; }
					fieldset h1 span{color:#960000; }
				
				/* LEGENDA - botuni navigatora i sl. */
				.legenda{width:100%; font-size:1em; height:auto; /*background-color:red*/ clear:both; display:flex;
										flex-wrap: wrap; justify-content: flex-start;  align-items: center; padding:0 .5em; 
										margin-bottom:1em; box-sizing:border-box}
					.legenda button{width:2.5em; height:2.5em; font-size:1em; margin:.15em; background-color:gray; 
									cursor:pointer; box-sizing:border-box; padding:0; border:none; border-radius:0.25em;
									background-size:50% auto; background-position:center; background-repeat:no-repeat;}	
					.legenda button:DISABLED{filter:grayscale(50%); opacity:.3; cursor:default}
					.legenda button:hover:DISABLED{background-size:50% auto;}
					.legenda button:hover{background-size:55% auto;}
					.legenda div{margin-left:.25rem; margin-right:.15rem; display:flex; align-items:center; height:2.5rem;}/*tražilica wrapper*/
				.legenda input[type="text"]{width:12em; height:2.5em; font-size:1em; margin-left:2em; padding:.5em 1em; box-sizing:border-box; 
					border:1px solid gray; }	
				input[name="trazilica_pojam"] {width:9em !important;}

				/* TIJELO MODULA - PREGLED, UREĐIVANJE, NOVI */
				form{display:block; width:100%; height:auto; background-color:white; border:none; color:black; text-align:left; padding:0 1em; 
					box-sizing:border-box}
					form h5{color:#bbb; font-size:.75em; font-weight:normal; width:100%; margin:0; padding:0}
					form h2{font-size:1.2em; width:100%; margin-bottom:.2em; margin-top:1em; color:#000080 }
					form h3{color:black; padding:0; font-size:2em; clear:both; width:100%; margin:0; margin-bottom:.5em; 
							line-height:100%; word-break: break-all;}
					form p{color:#222; font-size:1em; margin:0.35em 0; clear:both }
					/*txt*/
					.specifikacije_proizvoda{width:100%; height:auto; float:left;margin-top: 1rem; margin-bottom: 1rem; }
						.specifikacije_proizvoda table{background-color:white; text-align:left; color:#333; margin:0; 
														box-sizing:border-box; float:left; margin-bottom:1rem}
						.specifikacije_proizvoda table:first-of-type{width:100%}				
						.specifikacije_proizvoda table:last-of-type{width:100%; }				
							.specifikacije_proizvoda table input {width:100%; padding:0em; box-sizing:border-box; border:none; font-size:1em;}
							select {width:100%; padding:0rem; background-color: white; }
							.specifikacije_proizvoda table select {width:100%; padding:0rem; box-sizing:border-box; border:none; font-size:1em;}
								.specifikacije_proizvoda table select optgroup{font-weight:bold; font-style: normal;}
							.specifikacije_proizvoda table span{font-size:75%}
							.specifikacije_proizvoda table tr{border-bottom:.1em solid #ddd}
								.specifikacije_proizvoda table th{padding:.5em;padding-left:0em; border:none; border-bottom:.1em solid #ddd; 
																font-weight:normal; width:12rem}							
								.specifikacije_proizvoda table td{padding:.5em; border:none; border-bottom:.1em solid #ddd; 
																color:black}
								.specifikacije_proizvoda table tr:last-of-type th, .specifikacije_proizvoda table tr:last-of-type td{border-bottom:none;}
					/*SLIKE i PDF*/
					#slika_kolekcije{width:100%; height:20em; background-size:contain; background-repeat:no-repeat; background-position:top center; margin:1em 0 2em 0;
									padding:1em; box-sizing:border-box; background-color:#eee;}
					#slika_grupe{width:100%; height:9em; background-size:cover; background-repeat:no-repeat; background-position:bottom center; margin:0; 
								margin-bottom:1em;background-color:#eee; padding:1em; box-sizing:border-box}
					.slike_container{width:100%; height:auto; padding:0; margin:0; clear:both; }
					.slika_proizvoda, .pdf_container{width:25%; height:12rem; float:left; margin:0;
									display:flex; justify-items: space-between; justify-content: space-between;
									align-items: flex-start;
									  background-size:contain; 
									  background-repeat:no-repeat; background-position:center;
									  padding:1em; box-sizing:border-box; overflow:hidden; 
									  border:.2em solid white;
									  animation: loading .7s linear infinite alternate;
										animation-name: none; }	
						@keyframes loading {0% { opacity:.65; pointer-events: none;  filter:contrast(20%) brightness(150%);} 
											100% { opacity:.15; pointer-events: none; filter:contrast(20%) brightness(150%);}}			  
							.slika_proizvoda button, input[type="file"], .pdf_container button	
											{height:1em; width:1em; background-color:white; padding:4em 0 0 4em; overflow:hidden; font-size:.6em;
											box-sizing:border-box; cursor:pointer; background-repeat:no-repeat; border:.25em solid white; border-radius:100vw;
											background-position:center; background-size:50% auto; background-image:url('/NESA/NESA_files/slike/ikonice-upload.svg')}
						.slika_proizvoda button:hover, input[type="file"]:hover{background-size:55% auto;}									
						.slika_proizvoda button, .pdf_container button	{background-image:url('/NESA/NESA_files/slike/ikonice-brisanje.svg')}	
						.slike_container div /*isto kao .slika_proizvoda*/, .naslovna_slika{width:25%; height:9em; padding:0.5rem; 
											margin:0; 
											box-sizing:border-box; border:.2em solid white;
											background-size:contain; background-position:center; 
											background-image: url('/NESA/NESA_files/slike/ikonice-upload_slike.svg');
											color:gray; 
											background-color:#ddd; float:left;}
							.slike_container img{width:100%; height:12em; object-fit:cover; margin:0; padding:0; display:block}
						.naslovna_slika{width:50%; clear:both; float:none; height:12em; padding:1em;}
						.pdf_container{width:100%; height:auto; padding:.5rem; background-image: url('/NESA/NESA_files/slike/ikonice-upload_pdfa.svg');
										background-size:3rem auto; background-position:center;
										display:flex; justify-items:space-between; flex-wrap: wrap;
										background-color:#ddd;}
							.pdf_container embed{height:4rem; width:100%; border:none; transition: .25s; margin-top: .5rem;}	
						a:has(.slika_proizvoda):hover .slika_proizvoda{border:0.1em solid white;}	
					/* ostalo */
					form textarea{width:100%; height:3em; color:black; font-size:1em; margin:.25em 0; resize:vertical; overflow:auto;
								border:.1em dotted gray; font-family:Helvetica, sans-serif;}
					h3 input {width:100%; padding:0em; box-sizing:border-box; border:none; font-size:.8em; color:black; font-weight:bold; margin-left:0; }
					#select_za_kolekcije{width:30%; padding:0em; box-sizing:border-box; border:none; font-size:1em;}
					.botun_spremi{width:2.5em; height:2.5em; font-size:1em; margin:.5em 0; margin-bottom:1.5em;
								/*margin-left:calc(100% - 2.5em);*/ background-color:gray; background-image:url('/NESA/NESA_files/slike/ikonice-spremi.svg'); 
								cursor:pointer; box-sizing:border-box; padding:0; border:none; float:right; 
								background-size:50% auto; background-position:center; background-repeat:no-repeat; border-radius: .25rem;}
					.botun_spremi:hover{background-size:55% auto;}			
					.botun_spremi:hover:DISABLED{background-size:50% auto;}			
					.botun_spremi:DISABLED{filter:grayscale(50%); opacity:.3; cursor:default}
	section fieldset form table {margin-bottom:2em}					
	section fieldset form table tr{padding:0}					
	section fieldset form table td{padding:.15em .5em; }					
	section fieldset form table td .img{display:block; width:5em; height:3em; background-color:#eee;
											background-size:contain; background-repeat:no-repeat; background-position:center}	
	section fieldset form table td button{padding:0; background-color:white; cursor:pointer; border:none; font-family:Helvetica, sans-serif; font-size:1em }											
	section fieldset form table td button:hover{color:#960000;}
	section fieldset form table th{padding:.5em}