html{
	background: white;
	margin-left: auto;
	margin-right: auto;
}

body{
	margin: 15;
}

p{
	color: white;
	font-size: 16px;
	line-height: 1.2;
}

h3 {
	color: darkblue;
	font-size: 23px;
	font-family: sans-serif;
	font-weight: bold;
	text-align: center;
}

*{
	padding: 10;
	margin: 20;
	box-sizing: border-box;
	}

main{
	display: flex;
	width: 100%;
}

.trojka{
	margin-left: auto;
	margin-right: auto;
	max-width: 1440px;
}

.item{
	text-align: center;
	position: relative;
}

article.item{
	order: 2;
	flex: 7;
}

.sidebar-left{
	display: flex;
	order: 1;
	flex: 1;
	height: 900px;
}
.sidebar-right{
	order: 3;
	flex: 1;
	height: 900px;
}
			
/* GUMB START */


.start_btn {
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	background-color:#79bbff;
	border-radius:6px;
	border:1px solid #84bbf3;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size: 25px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	margin-top: 15px;
	margin-bottom: 15px;
}
.start_btn:hover {
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	background-color:#378de5;
}
.start_btn:active {
	position:relative;
	top:1px;
}

.start_btn:hover {
	background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
	background-color:#0688fa;
}
.start_btn:active {
	position:relative;
	top:1px;
}


/* GUMB PRINT  */

.print_btn {
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	background-color:#79bbff;
	border-radius:6px;
	border:1px solid #84bbf3;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size: 18px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	margin-top: 15px;
	margin-bottom: 15px;
}
.print_btn:hover {
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	background-color:#378de5;
}
.print_btn:active {
	position:relative;
	top:1px;
}


 #glavnoIme{
	font-size: 40px;
	
}

.header{
	width: 100%;
	height: 100%;
	color: white;
	background: linear-gradient(to right, #0076ef, #00aeef);
	font-family: "Square721 CN BT";
	justify-content: center;
	font-weight: bold;
	text-align: center;
	display: grid;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.footer{
	width: 100%;
	height: auto;
	color: white;
	background: linear-gradient(to right, #0076ef, #00aeef);
	font-family: "Square721 CN BT";
	font-size: 25px;
	font-weight: bold;
	max-width: 1440px;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}


.blok_B{
	display: inline-block;
	position: relative;
	flex: 6;
	order: 2;
	z-index: 2;
}


.blok_D{ /* POZICIJA panela */
	display: flex;
	flex-wrap: wrap;
	height: auto;
	background: linear-gradient(to top, #0076ef, #00aeef);
	width: auto;
	justify-content: space-around;
	padding-right: 5px;
	padding-left: 5px;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

.blok_E{
	display: flex;
	flex-wrap: wrap;
	width: auto;
	height: auto;
	background: linear-gradient(to top, #0076ef, #00aeef);
	width: auto;
	padding-left: 10px;
	padding-right: 5px;
		max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

.blok_F{
	margin-top: 10px;
	padding-top: 10px;
	display: grid;
	flex-wrap: wrap;
	height: 100%;
	background: linear-gradient(to bottom, #0076ef, #00aeef);
	width: 100%;
	justify-content: center;
	padding-bottom: 30px;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

.blok_gumbi{ /* gumbi preuzmi specifikaciju i učitaj pdf */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	height: auto;
	background-color: #ff0000;
	width: auto;
	padding-right: 5px;
	padding-left: 5px;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

			.opcija{
				background-color: #f4efcc;
				font-size: 16px;
				font-family: sans-serif;
				font-weight: bold;
				color: darkblue;
				margin-top: 10px;
				margin-bottom: 10px;
				padding-left: 15px;
				padding-right: 15px;
				margin-left: 15px;
				margin-right: 15px;
			}

.div_text_pozicija{  /* POZICIJA panela  */
	display: grid;
	flex-wrap: wrap;
	justify-content: space-around;
	align-self: center;   /* pozicija unutar tamnocrvenog div-a */
	align-content: center;
	width: 190px;
	height: 80px;
	color: white;
	font-weight: bold;
	font-size: 25px;
	font-family: sans-serif;
	text-align: center;
}

.div_text_PANEL_1{  /* POZICIJA 1 - BLOK 1 */
	display: grid;
	align-content: center;
	align-self: center;
	text-align: center;
	width: 100%;
	height: 40px;
	margin-right: 5px;
	margin-top: 5px;
	margin-bottom: 0px;
	color: blue;
	font-weight: bold;
	font-size: 20px;
	font-family: sans-serif;
	background-color: lightgrey;
	padding-left: 10px;
	padding-right: 10px;

}


.Dimenzije_DIV{  /* mali divovi sa imenima */
	width: 100%;
	min-height: 30px;
	font-family: sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: darkblue;
	text-align: center;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	align-items: center;
	margin-left: 0px;
	margin-right: 5px;
	margin-top: 0px;
	margin-bottom: 5px;
	background-color: yellow;
}

.opcijePozicija, .gumbi_opcija{   /* zadnji SIVI div opcija 1 od panela */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: auto;  /* širina zadnje diva */
	margin-right: 5px;
	margin-left: 0px;
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: #546775;
	flex-grow: 1;
	align-content: center;
	background-color: grey;
	color: white;
	font-family: sans-serif;
	font-weight: bold;
}

.napomena_crveno{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: auto;  /* širina zadnje diva */
	margin-right: 5px;
	margin-left: 0px;
	margin-top: 5px;
	margin-bottom: 5px;
	flex-grow: 1;
	align-content: center;
	color: white;
	font-family: sans-serif;
	font-weight: bold;
}

.V_vanjski, .V_unutarnji, .V_dovratnik, .gumb_vanjski_lim_panela, .divPolje_OZLOZD{
	width: 210px;
	height: auto;
	display: flex;
	align-self: center;
	align-items: center;
	}

.naziv_specifikacija{
	width: auto;
	height: 40px;
	margin-top: 15px;
	font-family: sans-serif;
	font-size: 28px;
	font-weight: bold;
	color: darkblue;
	text-align: center;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	align-items: center;
	margin-left: 15px;
	margin-right: 15px;
	background-color: lightgrey;
}


.pozicija_btn{		/* divovi 14 komada */
	display: grid;
	justify-content: space-around;
	align-self: center;   /* pozicija unutar tamnocrvenog div-a */
	align-content: center;
	width: 60px;
	height: 80px;
	margin: 5px 5px;
	background: linear-gradient(to bottom, #0076ef, #00aeef);
	flex-grow: 1;
}

.pozicija_btn_K{   /* zadnji siroki div za konstrukciju */
	display: grid;
	justify-content: space-around;
	align-self: center;   /* pozicija unutar tamnocrvenog div-a */
	align-content: center;
	text-align: center;
	width: 180px;
	height: 80px;
	margin: 5px 5px;
	flex-grow: 1;
	background: linear-gradient(to bottom, #0076ef, #00aeef);
}

.pozicija_broj{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	font-family: sans-serif;
	width: 30px;
	height: 30px;
	color: white;
	margin: 3px;
	padding: 3px;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	font-weight: bold;
	font-size: 15px;
}
.pozicija_broj_K{  /* naziv KONSTRUKCIJA KOD POZICIJE PANELA - opcije */
	display: flex;
	justify-content: space-around;
	font-family: sans-serif;
	align-self: center;
	align-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	color: white;
	margin: 3px;
	padding: 3px;
	font-weight: bold;
	text-align: center;
	font-size: 14px;
}

.broj_RAL_konst{   /* RAL button od boje */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	font-family: sans-serif;
	width: 30px;
	height: 30px;
	color: darkblue;
	margin: 3px;
	padding: 3px;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	font-weight: bold;
	font-size: 15px;
}


			.kartica-vrsta-panela-pozicija-SVE{	
				background: linear-gradient(to left, #0076ef, #00aeef);	
				width: 190px;
				height: 100%;
				align-self: center;
				display: flex;
				flex-flow: wrap;
				align-items: center;
				justify-content: space-around;
				right: 0;
				top: 0;
			}

			#kartica-vrsta-panela-pozicija-5{
				height: 100%;
			}

			.PANELI-slicice{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				align-content: center;
				font-family: sans-serif;
				background: linear-gradient(to top, #0076ef, #00aeef);
				width: 80px;
				height: 85px;
				border-radius: 5px;
				font-weight: bold;
				font-size: 15px;
			}


#my_iframe {
	background-color: white;
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
} 

.iframe_link{
	background-color: grey;
	border: 0px solid yellow;
}

.RAL{    /* mali divovi svake boje */
	display: flex;
	flex-wrap: wrap;
	font-family: sans-serif;
	width:200px;
	height: 34px;
	color: white;
	background: linear-gradient(to left, #0076ef, #00aeef);
	align-items: center;
	font-weight: bold;
	text-align: left;
	font-size: 15px;
	margin-top: -3px;
	margin-bottom: 2px;
}

.RAL-ime{
	width: 20px;
	height: 20px;
	border-radius: 30px;
	margin-left: 10px;
}


.ral_brojBoje{
	margin-left: 10px;
}


#kartica-ral-tabela-konstrukcije,
#kartica-ral-tabela-pozicija-1-vanjska,
#kartica-ral-tabela-vrata_lim_1,
#kartica-ral-tabela-vrata_lim_2,
#kartica-ral-tabela-vrata_dovratnik
{ 
	width: 190px;
	height: 100%;
	align-self: center;
	display: flex;
	flex-flow: wrap;
	align-items: center;
	justify-content: center;
	right: 0;
	top: 0;
	position: relative;
	background: linear-gradient(to left, #0076ef, #00aeef);
}

/*plavi naziv i bijeli text */
.imena-kartica{
	display: grid;
	flex-flow: : wrap;
	width: 190px;
	height: auto;
	background: linear-gradient(to left, #0076ef, #00aeef);
	font-family: sans-serif;
	justify-content: space-around;
	text-align: center;
	font-weight: bold;
	margin-bottom: 5px;
}


.PANELI-slicice:hover{
	transform: scale(1.2);
	cursor: pointer;
	box-shadow: 
	  0 5px 5px #fff, /*bottom external highlight*/
	  0 -1px 1px #666, /*top external shadow*/  
}

/******* GUMBI OD POZICIJA ****** */

/* The container */
.container {
  display: grid;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-top: 10px;
}

/* Hide the browser's default radio button */
.container input {
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {

  display:flex;
  height: 40px;
  width: 40px;
  background-color: white;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: grey;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: yellow;
}



/******* GUMBI OD OPCIJE 1 ****** */

/* The container */
.container2 {
  display: block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-left: auto;
  margin-right: auto;
}

/* Hide the browser's default radio button */
.container2 input {
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark2 {
  display: block;
  height: 30px;
  width: 30px;
  background-color: white;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container2:hover input ~ .checkmark2 {
  background-color: grey;
}

/* When the radio button is checked, add a blue background */
.container2 input:checked ~ .checkmark2 {
  background-color: yellow;
}


/******* GUMBI OD OPCIJA DODATNO ****** */

/* The container */
.container3 {
  display: flex;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-left: 15px;
  margin-right: 15px;
}

/* Hide the browser's default radio button */
.container3 input {
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark3 {
  display: block;
  height: 20px;
  width: 20px;
  background-color: white;
  border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.container3:hover input ~ .checkmark3 {
  background-color: grey;
}

/* When the radio button is checked, add a color background */
.container3 input:checked ~ .checkmark3 {
  background-color: yellow; /* zuta */
}



/******* GUMBI OD RAL BOJA - ****** */


/* The container */
.container4 {
  display: flex;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-left: auto;
  margin-right: auto;
}

/* Hide the browser's default radio button */
.container4 input {
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark4 {
  display: block;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  position: absolute;
}

.container4:hover input ~ .checkmark4 {
  background-color: grey;
  transform: scale(1.5);
}

.container4 input:checked ~ .checkmark4{
  background-color: yellow;
  box-shadow: 5px;
  transform: scale(1.3);
}


/* tablice pri dnu - ODABIR */


.red_POZICIJA {
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;
	background-color: #f4f4f4;
	color: darkblue;  /* boja texta u tablicama */
	font-family: sans-serif;
	font-weight: bold;
	width: auto;
	min-height: 40px;
	font-size: 10px;
	align-items: center;
	text-align: left;
	padding: 5px;
	margin: 5px;
}

				.red_POZICIJA_ime {
					margin-left: 15px;
					margin-right: 15px;
					padding-bottom: 15px;
					min-height: 30px;
					width: 100%;
					display: flex;
					flex-wrap: wrap;
				}

				.imeIPrezime_tvrtka {   /* IME I PREZIME ili IME TVRTKE, email-adresa */
					color: darkblue;
					font-family: sans-serif;
					font-weight: bold;
					font-size: 12px;
					width: auto;
					height: 20px;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #c2ebff;
					padding-left: 15px;
					padding-right: 15px;
				}
				.odabrano_tvrtka { 
					color: darkblue;
					font-family: sans-serif;
					font-weight: bold;
					font-size: 12px;
					width: auto;
					height: 20px;
					display: flex;
				  justify-content: center;
				  align-items: center;
				  padding-left: 15px;
					padding-right: 15px;
					margin-bottom: 20px; 
				}
				.odabrano_napomena {
					color: darkblue;  /* boja texta u tablicama */
					font-family: sans-serif;
					font-weight: bold;
					height: auto;
					width: 250px;
					font-size: 12px;
					margin-left: 10px;
					margin-right: 10px;
					margin-top: 4px;
					display: flex;
					resize:none;
					word-break:break-word;
				}


.tabl_poz {   /* imena plavih naziva u specifikaciji */
	color: darkblue;
	font-family: sans-serif;
	font-weight: bold;
	font-size: 10px;
	min-width: 100px;
	margin-left: 15px;
	display: flex;
	text-align: left;
	align-items: center;
	padding-right: 15px;
}

.odabrano {  
	color: darkblue;  /* boja texta u tablicama */
	font-family: sans-serif;
	font-weight: bold;
	min-width: 100%;
	min-height: 10px;
	font-size: 10px;
	background-color: #c2ebff;
	display: flex;
	align-items: center;
	text-align: left;
	padding-left: 15px;
	resize: vertical;
}

.odabranoOZLOZD, .vec_odabrano {
	color: darkblue;  /* boja texta u tablicama */
	font-family: sans-serif;
	font-weight: bold;
	width: 100%;
	font-size: 10px;
	background-color: #c2ebff;
	display: flex;
	align-items: center;
	text-align: left;
	border-radius: 5px;
	padding-left: 15px;
	margin-top: 5px;

}

.slika_Zaglavlje{
	display: flex;
	justify-content: space-around;
	align-self: center;
	margin-left: auto;
	margin-right: auto;
	padding-top: 15px;
	padding-bottom: 15px;
	width: 100%;
}
.slika_header{
	justify-content: space-around;
	align-self: center;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-bottom: 10px;
	background-color: white;
}

/* GUMB HELP */

.header .help_btn {
  position: absolute;
  top: 20%;
  margin-left: 95%;
  margin-right: auto;
  transform: translate(-50%, -50%); 
  -ms-transform: translate(-50%, -50%);
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 5px 5px;
  border: none;
  cursor: pointer;
  border-radius: 0px;
  text-align: center;
  width: 80px;
}

.help_btn:hover {
  background-color: yellow;
  color: blue;
}
.help_btn:active {
  background-color: blue;
}




::placeholder {
  color: red;
  opacity: 1; /* Firefox */
  text-decoration: italic;
}



/*==================
    Base Styles
===================*/

.container_slide {
	width: 100%;
	height: 100%;
	color: white;
	background: linear-gradient(to right, #0076ef, #00aeef);
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

/* backgrounds */

.slide_1 {
    color: white;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
}

/*  UNUTAR SLIDE-ova  */

		.corel_1{
			width: auto;
			height: auto;
			background-color: white;
			color: #393185;
			font-family: Varela Round;
			font-size: 40px;
			font-weight: bold;
			margin-left: 5%;
			margin-right: 5%;
			margin-top: 20px;

		}

		.polje_broja{
			width: 200px;
			height: 70px;
			background-color: #dcdcdc;
			font-size: 30px;
			font-weight: bold;
			font-family: sans-serif;
			text-align: center;
			margin-top: 20px;
			margin-bottom: 20px;
			margin-left: auto;
			margin-right: auto;
			border-radius: 10px;
			color: darkblue;
		}
			input{
				  border-top-style: hidden;
				  border-right-style: hidden;
				  border-left-style: hidden;
				  border-bottom-style: hidden;
				  background-color: #eee;
				}

			/* Chrome, Safari, Edge, Opera */
			input::-webkit-outer-spin-button,
			input::-webkit-inner-spin-button {
				  -webkit-appearance: none;
				  margin: 0;
				}

			.Dobrodosli{
				font-size: 80px;
				font-family: Varela Round;
				font-weight: bold;	
				margin-top: 35px;
				margin-bottom: -15px;
			}
				
			
				@media screen and (max-width:650px){
					main{
					flex-direction: column;
					}
					.Dobrodosli{
						font-size: 40px;	
					}
					.help_btn{		
					  margin-top: 20px;
					  left: -50px;
					}
					.odabrano input[type=submit] {
						width: 100%;
    					margin-top: 0;
					}	
					.naziv_specifikacija{
						font-size: 18px;
						height: auto;
					}
					.RAL{
						width: 80px;
						height: 60px;
						display: flex;
						text-align: center;
						font-size: 13px;
					}
					.trojka{
						width: auto;
					}
					#my_iframe{
						width: 100%;
						height: 300px;
						margin-bottom: 0px; 
						margin-top: 5px;
					}
					.imena-kartica{
						width: 100%;
					}
					.kartica-vrsta-panela-pozicija-SVE{
						height: auto;
						width: auto;
						flex: 1;
						flex-wrap: wrap;
						margin-top: 5px;
					}
					#kartica-ral-tabela-konstrukcije,
					#kartica-ral-tabela-pozicija-1-vanjska,
					#kartica-ral-tabela-vrata_lim_1,
					#kartica-ral-tabela-vrata_lim_2,
					#kartica-ral-tabela-vrata_dovratnik
					{
						height: auto;
						width: 200px;
						flex: 1;
						flex-wrap: wrap;
						margin-bottom: 5px;
					}
					.sidebar-left, .sidebar-right{
						height: 100%;
					}
					.slika_Zaglavlje{
						width: 100%;
					}
					.polje_screen{
						background-size: 300px 220px;
					}
					.red_polje_screen{
						width: 300px;
						height: 210px;
					}
					.vas_odabir_div_naziv{
						width: auto;
						margin: 3%;
						height: auto;
					}
					.div_to_PDF{
						width: auto;
						margin-left: 3%;
						height: auto;
					}
					.footer{
						font-size: 20px;
						}
					}
			

			.uputa_slajda_1{  /* Molimo da u rubriku upišete... */
				font-size: 30px;
				font-family: sans-serif;
				margin-top: 50px;
				font-weight: bold;
			}
			.uputa_slajda_2{
				font-size: 30px;
				font-family: sans-serif;
				margin-top: 10px;
			}

			.gumbi_prev_nxt{   /* div sa gumbima */
				display: flex;
				margin-top: 20px;
				}

			.gumb_dalje {
				box-shadow:inset 0px 1px 0px 0px #bbdaf7;
				background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
				background-color:#79bbff;
				border-radius:10px;
				border:1px solid #84bbf3;
				cursor:pointer;
				color:#ffffff;
				font-family: sans-serif;
				font-size: 25px;
				font-weight:bold;
				padding:6px 24px;
				text-decoration:none;
				text-shadow:0px 1px 0px #528ecc;
				margin-left: auto;
				margin-right: auto;
				display: flex;
				margin-top: 15px;
				margin-bottom: 15px;
			}
			.gumb_dalje:hover {
				background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
				background-color:#378de5;
			}
			.gumb_dalje:active {
				position:relative;
				top:2px;
			}

.corel_1a{   /* opcije za upis */
			width: auto;
			height: auto;
			background-color: white;
			color: #393185;
			font-family: Varela Round;
			font-size: 20px;
			padding-left: 3%;
			padding-right: 3%;
			padding-top: 2%;
			padding-bottom: 2%;
			font-weight: bold;
			margin-left: 5%;
			margin-right: 5%;
			margin-top: 20px;
}


/*  SLAJD 2 */

.odabir_dimenzije_kontejnera{
			width: auto;
			height: auto;
			background-color: white;
			padding-left: 3%;
			padding-right: 3%;
			padding-top: 2%;
			padding-bottom: 2%;
			margin-left: 5%;
			margin-right: 5%;
			margin-top: 40px;
}

.siva_traka_gumba{
	color: darkblue;
	font-family: sans-serif;
	font-size: 25px;
	font-weight: bold;
	text-align: left;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	align-self: center;
	display: flex;
	margin-top: 100px;
	margin-bottom: 100px;
	background-color: lightgrey;
	border-radius: 15px;
	padding-top: 20px;
	padding-bottom: 20px;
}



.siva_traka_gumba_korisnik{
	color: darkblue;
	font-family: sans-serif;
	font-size: 18px;
	font-weight: bold;
	height: auto;
	display: inline-flex;
	width: 100%;
	background-color: lightgrey;
	border-radius: 7px;
	justify-content: space-around;
	margin-bottom: 10px;
}
.siva_trakica_umetak{
	width: 100%;
	height: auto;
	margin: 10px;
}

.siva_trakica_napomena{
	width: 100%;
	margin: 10px;
}

			.naziv_inputa_korisnik{
				font-family: sans-serif;
				font-size: 18px;
				font-weight: bold;
				text-align: right;
			}
			.input_korisnik{
				background-color: white;
				height: 100%;
				width: 100%;
				text-align: left;
				color: darkblue;
				font-family: sans-serif;
				font-size: 20px;
				font-weight: bold;
				padding-left: 10px;
			}
			.input_napomena{
				background-color: white;
				min-height: 50px;
				width: 100%;
				text-align: left;
				color: darkblue;
				font-family: sans-serif;
				font-size: 18px;
				font-style: italic;
				padding-left: 10px;
				resize:none;
			}



/******* GUMBI OD ODABIRA KONSTRUKCIJE ****** */

.container6 {
  display: flex;
  cursor: pointer;
  user-select: none;
  margin-right: auto;
  table-layout: fixed;
  width: 950px; 
  align-self: center;
  margin-left: 80px;
}

/* Hide the browser's default radio button */
.container6 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


/* Create a custom radio button */
.checkmark6 {
  position: absolute;
  height: 30px;
  width: 30px;
  background-color: white;
  border-radius: 50%;
  margin-top: -2px;
  margin-left: -50px;


}

/* Create the checkmark/circle (hidden when not checked) */
.checkmark6:after {
 content: "";
 position: absolute;
 display: none;

}
 
/* On mouse-over, add a grey background color */
.container6:hover input ~ .checkmark6 {
  background-color: grey;
}

/* When the radio button is checked, add a blue background */
.container6 input:checked ~ .checkmark6 {
  background-color: blue;
}


/* SLAJD 3 */

.skica_i_opis{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

	.skica_el{
		background-color: white;
		align-self: center;
	}

	.opis_el{
		width: auto;
		height: auto;
		padding-right: 15px;
		font-size: 17px;
		font-family: sans-serif;
		text-align: left;
		padding-left: 10px;
		color: darkblue;
		font-weight: bold;
	}

	.skica_el_slika{
		width: 80%;
		max-width: 400px;
		height: auto;
	}


.bijeli_div_menua{
			width: auto;
			height: auto;
			background-color: white;
			padding-left: 3%;
			padding-right: 3%;
			padding-top: 2%;
			padding-bottom: 2%;
			margin-left: 5%;
			margin-right: 5%;
			margin-top: 40px;
}

			.siva_traka_gumba_EL{
				color: darkblue;
				font-family: sans-serif;
				font-size: 25px;
				font-weight: bold;
				text-align: left;
				height: auto;
				margin-left: auto;
				margin-right: auto;
				align-self: center;
				display: flex;
				margin-top: 10px;
				margin-bottom: 30px;
				background-color: lightgrey;
				border-radius: 15px;
				padding-top: 20px;
				padding-bottom: 20px;
			}


/* SLJAD  4 */	


.red_izolacija{
	width: auto;
	display: flex;
	flex-flow: wrap;
	background: linear-gradient(to right, #0076ef, #00aeef);
	height: auto;
	margin-top: 10px;
	justify-content: center;


}


		.izolacija_btn{	  //* prvi red POLIURETAN */
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-self: center;   /* pozicija unutar tamnocrvenog div-a */
			align-content: center;
			width: 250px;
			height: auto;
			color: white;
			font-weight: bold;
			font-size: 20px;
			font-family: sans-serif;
			text-align: center;
			padding-top: 5px;
			padding-bottom: 5px;
		}

		.izolacija_mm{  /* GUMBOVI MM */
				background-color: white;
				color: darkblue;
				width: 160px;
				height: 40px;
				font-family: sans-serif;
				font-weight: bold;
				justify-content: space-around;
				text-align: center;
				display: grid;
				flex-wrap: wrap;
				align-content: center;
				align-self: center;
				margin: 10px;
				border-radius: 10px;
			}	


/******* GUMBI OD izolacija - DEBLJINE ****** */

/* The container */
.container5 {
  display: grid;
  position: relative;
  cursor: pointer;
  user-select: none;
  margin-left: 20px;
  margin-right: auto;
  table-layout: fixed;
  width: 150px;
  font-size: 20px;

}

/* Hide the browser's default radio button */
.container5 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;

}

/* Create a custom radio button */
.checkmark5 {
  position: absolute;
  height: 20px;
  width: 20px;
  background-color: lightblue;
  border-radius: 50%;
  margin-top: 0px;
  margin-left: 10px;
}

/* Create the checkmark/circle (hidden when not checked) */
.checkmark5:after {
 content: "";
 position: absolute;
 display: none;

}
 
/* On mouse-over, add a grey background color */
.container5:hover input ~ .checkmark5 {
  background-color: grey;
}

/* When the radio button is checked, add a blue background */
.container5 input:checked ~ .checkmark5 {
  background-color: blue;
}	



/*  SJAJD 6 */

		.odabir_nacina_isporuke{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}

		.div_sastavljen{
			color: white;
			font-family: sans-serif;
			font-size: 23px;
			font-weight: bold;
			text-align: center;
			margin-top: 10px;
			margin-bottom: 10px;
			background: linear-gradient(to right, #0076ef, #00aeef);
			border-radius: 15px;
			padding-top: 35px;
			padding-bottom: 5px;
			width: auto; 
			padding-right: 10px;
			padding-left: 10px;
		}


/******* GUMBI OD ODABIRA NAČINA ISPORUKE ****** */

.container7 {
  display: flex;
  cursor: pointer;
  user-select: none;
  margin-right: auto;
  table-layout: fixed;
  width: auto; 
  align-self: center;
  margin-left: 90px;
  margin-top: 20px;
}

/* Hide the browser's default radio button */
.container7 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


/* Create a custom radio button */
.checkmark7 {
  position: absolute;
  height: 30px;
  width: 30px;
  background-color: white;
  border-radius: 50%;
  margin-top: -2px;
  margin-left: -45px;

}

/* Create the checkmark/circle (hidden when not checked) */
.checkmark7:after {
 content: "";
 position: absolute;
 display: none;

}
 
/* On mouse-over, add a grey background color */
.container7:hover input ~ .checkmark7 {
  background-color: grey;
}

/* When the radio button is checked, add a blue background */
.container7 input:checked ~ .checkmark7 {
  background-color: blue;
}


/******* GUMBI OD PANELA SLICICA ****** */

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  background-color: yellow;
  border-radius: 5px;
}


.blok_zavrsi {
	width: 100%;
	max-width: 1440px;
	height: auto;
	background: linear-gradient(to bottom, #0076ef, #00aeef);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding-right: 5px;
	padding-left: 5px;
	margin-left: auto;
	margin-right: auto;
}


/* GUMB ZAVRSI  */

.zavrsi_btn {
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background:linear-gradient(to bottom, green 5%, lightgreen 100%);
	background-color:#79bbff;
	border-radius:6px;
	border:1px solid #84bbf3;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size: 23px;
	font-weight:bold;
	padding: 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	margin-top: 15px;
	margin-bottom: 15px;
	width: 200px;
	justify-content: center;
}
.zavrsi_btn:hover {
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	background-color:#378de5;
}
.zavrsi_btn:active {
	position:relative;
	top:1px;
}

/* BUTTON SCREEN */

.screen_btn {
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background:linear-gradient(to bottom, grey 5%, grey 100%);
	background-color:#79bbff;
	border-radius:6px;
	border:1px solid #84bbf3;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size: 18px;
	font-weight:bold;
	padding: 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	margin-top: 15px;
	margin-bottom: 15px;
	width: 220px;
	justify-content: center;
	text-align: center;
}
.screen_btn:hover {
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	background-color:#378de5;
}
.screen_btn:active {
	position:relative;
	top:1px;
}




.polje_screen{
	display: flex;
	align-self: center;
	margin-left: 15px;
	margin-right: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
	border-style: solid 2px yellow;
	width: 100%;
	height: 630px;
	margin: 15px;
	background-color: #c2ebff;
	cursor: pointer;
	background-repeat: no-repeat;
	background-size: contain;
}

			.red_polje_screen {
				display: flex;
				flex-grow: 1;
				flex-wrap: wrap;
				background-color: #f4f4f4;
				color: darkblue;  /* boja texta u tablicama */
				font-family: sans-serif;
				font-weight: bold;
				width: auto;
				height: auto;
				font-size: 10px;
				align-items: center;
				text-align: left;
				padding: 5px;
				margin: 5px;
			}

.oba_screena {
	display: flex;
	width: auto;
	height: 220;
	background-color: #DEDEDE;
	justify-content: space-around;
	margin: 3px;
	align-items: center;
	padding: 5px;
	border-radius: 5px;
}

.unos_podataka{
	height: auto;
}


/* div to PDF */

.div_to_PDF {
	height: auto;
	max-width: 1440px;
	background-color: white;
}


/* mali checkbox u specifikaciji */

.check_specif{
	display: block;
	margin-right: 10px;
	width: 10px;
}

.opcija{
	display: flex;
	flex-wrap: wrap;
	background-color: #f4efcc;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: bold;
	color: darkblue;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
	align-items: center;
}