body

{
	padding: 12px;
	color: rgb(29, 15, 42);
	background-color: rgb(176, 157, 115);
	display: grid;
	/*align-self: center;*/
  justify-content: center; 
  
  }
  .title 
  {
	  color: #194b0f;
  }
  h2 {
	color: white;
	font-family: courier;
	font-size: 150%;
  }
  #ct {
	font-size: 24px;
	font-weight: bold;
  }
  #cd {
	/*font-size: 18px;
	/*font-weight: bold;*/
	color: blue;
  }

  p {
	text-decoration:none ;
	font-family: Arial, Helvetica, sans-serif;
   } 

  .no-break {
    white-space: nowrap; /* Mivel ez nem törheti a sort */
  }



  .highlight {
	font-weight: bold;
	color: white; /* Kiemelt szó szín */
	padding: 15px;
	
}

.yellow {
	background-color: yellow; /* Sárga háttér */
}

.image-hover {
	width: 120px; /* Kis kép mérete */
	transition: transform 0.3s; /* Zökkenőmenetes nagyítás animáció */
	border-radius :5px ;
	margin-left: 15px;
}

.image-hover:hover {
	transform: scale(2.5); /* Kép nagyítása hover esetén */
	z-index: 10; /* Z-index a képen */
	position: relative; /* Pozicionálás hover esetén */
	border-radius :5px ;
}

.separator {
	border: 1px solid rgba(247, 247, 245, 0.64); /* Vízszintes vonal színe */
	margin: 10px 0; /* Margó a vízszintes vonal körül */
	
}






.front_frame {
  border: 4px solid rgb(47, 88, 145);
  padding:4px;
  border-radius: 8px; 
  /*width: auto;*/
  /*display: inline-block;*/
  width:1000px;
  
 
}  

  .frontframe {
	
	border: 4px solid rgb(47, 88, 145);
  padding:4px;
  border-radius: 8px; 
  margin-bottom: 10px;
  overflow-y: auto;
  max-height:600px;
  
}

/*  konfiguráció                   */

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

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}




/*   order grid  \/*/

.proj_inp {
	text-align: left;
	align-self: center;
	background-color:rgba(255, 255, 0, 0.667);
	width :250px;
	border: 1px solid black;
	padding: 4px;
  font-size: 16px;
  
  margin-left: 6px;
 
  width :auto;
	
  }
.proj-container {
	display: grid;
	grid-template-columns: 120px 250px;
	grid-gap: 0px;
	padding: 0px;
	font-family: Arial;
	/*height: 0px; */
  }


.order-container {
  display: grid;
  grid-template-columns: 95px 70px 145px 70px 100px 100px 250px;
  grid-gap: 0px;
  padding: 0px;
  font-family: Arial;
  /*height: 0px; */
}

/*.order-container > div {
  background-color: rgba(234, 208, 127, 0.882);
  text-align: left;
  padding: 4px;
  font-size: 16px;
  border: 1px solid rgb(47, 88, 145);
  
}*/
.item {
	padding: 4px;
	background-color: rgb(243, 208, 143,0.5);
	border: 1px solid black;
	text-decoration: none;
	color: black;
}

.title_container {
	display: grid;
	grid-template-columns: 330px 50px 100px 100px 250px;
	gap: 0px;
	font-family: Arial;
	
}
/*.title_container > div {
	background-color: rgba(125, 117, 184, 0.982);
	text-align: left;
	padding: 4px;
	font-size: 16px;
	border: 1px solid rgb(47, 88, 145);
	
  }*/

  .item_title {
	padding: 4px;
	/*background-color: rgba(136, 134, 156, 0.982);*/
	background-color: rgba(243, 208, 143, 0.99);
	text-align: left;
	border: 1px solid black;
	text-decoration: none;
	color: black;
}
.cust_container {
	display: grid;
	grid-template-columns: 30px 150px 100px 100px 100px;
	gap: 0px;
	font-family: Arial;
	
}


/*  order grid    /\*/










/*  radio button egyedi                  */


.custom-radio {
    position: relative;
    padding: 5px; /* A címke baloldali távolságának beállítása */
	align-self: center;
	margin-bottom: 10px;
	margin-top: 12px;
}

.custom-radio input[type="radio"] {
    display: none; /* A natív rádiógomb elrejtése */
}

.custom-radio label {
    cursor: pointer;
}

.custom-radio label::before {
    content: "";
    position: absolute;
    left: 0;
    /*top: 50%;*/
    transform: translateY(-50%);
    width: 15px; 
    height: 15px; 
    border-radius: 50%; /* Kerek forma */
    border: 2px solid #ccc; /* Határszín alapértelmezett állapotban */
	
}

/* Amikor a rádiógomb be van jelölve */
.custom-radio input[type="radio"]:checked + label::before {
   background-color: #f50808; /* Szín amikor kiválasztva van (pl. zöld) */
   border-color: #4CAF50; /* Határszín kiválasztáskor (pl. zöld) */
}



/* header */

  .headerinp {
	text-align: left;
	align-self: center;
	background-color:rgb(182, 182, 151);
	width :90px;
  }
	 
.headbut {
	width :100px;
	margin-bottom: 1px;
	margin-top: 1px; /* Pozitív margóval feljebb tolás */
	background-color:rgb(178, 178, 68);
	border-radius: 6px;
	margin-right: 6px;
	font-size: 16px;
}	

.headertag {
	display: flex;
	align-items: center;
	padding: 15px;
}


.logotext {
	text-decoration:none ;
	font-family: Nunito;
	color: white;
	font-size: 26px;
	font-weight: bold;
	padding: 10px;
   } 




	 .item1 { grid-area: speace;width :180px; }
	 .logo  { grid-area: logo; }
	 .cust { grid-area: cust; }
	 .item4 { grid-area: textup; }
	 .item5 { grid-area: textdown; }
	 .usname { grid-area: usname; }
	 .pass { grid-area: pass; }
	 .login { grid-area: login; }
	 .item9 { grid-area: textlog; }
	 .order { grid-area: order; }

	 .grid-container {
		display: grid;
		grid:
		'logo speace speace speace speace speace speace cust cust textlog textup usname'
		'logo speace speace speace speace speace speace order order login textdown pass ';
		grid-gap: 5px;
		background-color: rgb(47, 88, 145);
		padding: 8px;
		margin-bottom: 0px;
		border-radius: 3px;
		/*width: 800px;*/
		/*min-width: 800px;*/
		width: auto;
		height:60px;
		font-family: Arial, Helvetica, sans-serif;
		align-items: center;
		text-align: right;
	  }
	  
	  .grid-container > div {
		
		text-align: right;
		color:white;
		padding: 1px;
		font-size: 14px;
		height:25px;
		align-items: center;
		display: flex;
	  }

	  .grid-container > input {
		width :40px;
		
	  }	  

/* config */

.freshbut {
	width :180px;
	margin-bottom: 1px;
	margin-top: 6px; /* Pozitív margóval feljebb tolás */
	background-color:rgba(255, 255, 0, 0.667);
	border-radius: 6px;
	min-height: 32px;
	margin-right: 6px;
	font-size: 16px;

    }	

.configframe {
  	border: 4px solid rgb(47, 88, 145);
	padding:4px;
	border-radius: 8px; 
	width: auto;
  }


.configbox {
	background-color: rgb(47, 88, 145); /* Világoskék háttér */
	border-radius: 6px; /* Lekerekített sarkok */
	padding: 8px; /* Belső margó */
	text-align: center; /* Szöveg középre igazítva */
	/*width: 120px; /* Méret beállítása */
	line-height: 1.6;
	/*min-width :120px;*/
	display: flex;
	flex-direction: column; /* Függőleges irány */
	/*justify-content: space-between; /* Térköz létrehozása */
	margin-top: 6px;
	margin-bottom: 2px;
	width :auto;
	
	}


.footbox {
	background-color: rgb(47, 88, 145); /* Világoskék háttér */
	border-radius: 2px; /* Lekerekített sarkok */
	display: flex;
	flex-direction: column; /* Függőleges irány */
	width:auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color:white ; 
	}	

.footlogo {
	display: flex;
	justify-content: space-between;
	}
.footertag {
	display: flex;
	align-items: center;
	padding: 5px;
	margin-left: 16px;
	}
		
.footertext {
			
	font-size: 24px;
	padding: 5px;
	margin-left: 16px;
	color:white ; 
   }

.foottext {
	color:white ; 
	margin:-14px;
	padding: 0px;
	align-items: right;
	
  }

.footmenu {
	width:20%;
	height:auto;	
}	
			


	
.configtext {
	color:white ; 	 
	/*border-radius :5px ;/* Kép sarkainak lekerekítése*/
	width :auto;
	margin-bottom: -1px;
	margin-top: -2px; /* Pozitív margóval feljebb tolás */
	/*font-size: 18px;
	/*min-height: 150px;*/
	
	
	 }	
.configinp {
	
		width :30px;
		margin-bottom: 0px;
		margin-top: 5px; /* Pozitív margóval feljebb tolás */
		text-align: right;
		align-self: center;
		background-color:rgba(255, 255, 0, 0.667);
		
		/*align-items: center;*/
		
		/*font-size: 18px;
		/*min-height: 150px;*/
		
		 }		 
.confignote {
	
		width :auto;
		margin-bottom: 0px;
		margin-top: 5px; /* Pozitív margóval feljebb tolás */
		text-align: left;
		align-self: center;
		background-color:rgba(255, 255, 0, 0.667);
	
			/*align-items: center;*/
			
			/*font-size: 18px;
			/*min-height: 150px;*/
			
			 }		

		 

		 
.img_row {
	
		width :40px;
		margin-bottom: 10px;
		margin-top: 8px; /* Pozitív margóval feljebb tolás */
		/*text-align: right;*/
		align-self: center;
		
			 }		 

  /* Menüoszlop bal sáv  */

.menucontainer {
	display: flex;
	flex-direction: row;
	gap: 10px; /* Térköz a mezők között */
	
	}

.breadcontainer {
	display: flex;
	flex-direction: row;
	gap: 2px; /* Térköz a mezők között */
	margin-top: -14px;
	margin-bottom: 6px;
	margin-top: 8px;
	}
	  
.breadbox {
	background-color: rgb(47, 88, 145); /* Világoskék háttér */
	border-radius: 2px; /* Lekerekített sarkok */
	padding: 5px; /* Belső margó */
	text-align: center; /* Szöveg középre igazítva */
	line-height:1.2;
	height: 20px;
	}
		 
  
.menubox {
	background-color: rgb(47, 88, 145); /* Világoskék háttér */
	border-radius: 6px; /* Lekerekített sarkok */
	padding: 8px; /* Belső margó */
	text-align: center; /* Szöveg középre igazítva */
	width: 120px; /* Méret beállítása */
	line-height:1.29;
	min-width :120px;
	display: flex;
	flex-direction: column; /* Függőleges irány */
	justify-content: space-between; /* Térköz létrehozása */
	
		   
	}
.menubox img {
	border-radius :5px ;/* Kép sarkainak lekerekítése*/
	width :120px;
	margin-bottom: -1px;
	margin-top: 10px;
	min-height: 150px;
   }

  
a {
   text-decoration:none ;
   /*color:white ;   /* Szöveg színe fehér*/
   /*display: block;*/
  }
.sidebox {
	background-color: rgb(47, 88, 145); /* Világoskék háttér */
	border-radius: 6px; /* Lekerekített sarkok */
	padding: 15px; /* Belső margó */
	text-align: left; /* Szöveg középre igazítva */
	overflow-y: auto; /* Függőleges görgetés engedélyezése */
	font-size:16px;
	line-height:1.5;
	/*max-width: 1000px;*/
	/*max-width: 800px;*/
	/*width: auto;*/
	
	width:100%;
	display:run-in;
	
  }
.menucul {
	display: flex;
	flex-direction: column; /* Vertikális elrendezés */
	gap: 10px; /* Távolság a flex elemek között */
	
  }
.menutext {
	margin-top: -2px; /* Pozitív margóval feljebb tolás */
	color:white ; 
	font-size: 18px;
	display:inline;
	margin-bottom: 5px;
  }
.breadtext {
	margin-top: 1px; /* Pozitív margóval feljebb tolás */
	color:white ; 
	font-size: 16px;

  }
  .sidetext {
	margin-top: -2px; /* jobb sávi */
	color:white ; 
	font-size: 17px;
	display:inline;
	
  }

.guidetext {
	margin-top: -5px; /* Pozitív margóval feljebb tolás */
	padding: 15px
  }  
.guidebox {
	background-color: rgb(47, 88, 145); /* Világoskék háttér */
	border-radius: 6px; /* Lekerekített sarkok */
	padding: 0px; /* Belső margó */
	text-align: left; /* Szöveg középre igazítva */
	color:white ; 
	font-size: 17px;
	line-height: 1.2;
	/*display: flex;
	flex-direction: column; /* Függőleges irány */
	width :auto;
	font-family: Arial, Helvetica, sans-serif;
	height:100%;
	}


.imagebox {
	color:white ; 	 
	/*border-radius :5px ;/* Kép sarkainak lekerekítése*/
	width :auto;
	margin-bottom: -1px;
	margin-top: -2px; /* Pozitív margóval feljebb tolás */
	margin-left: -15px;
	padding: 10px;
	font-size: 17px;
	display: flex;
	flex-direction: row; 
	align-items: flex-start; /* Balra igazítás */
	/*min-height: 150px;*/
  }
.imagetext {
	margin-top: -5px; /* Pozitív margóval feljebb tolás */
	padding: 0px;
	margin-left: 20px;
  } 
  .load_ul {
	margin-top: -15px; /* Pozitív margóval feljebb tolás */
	/*padding: 15px;*/
	line-height: 2.2;
  }     
  
@media (max-width: 800px) {
	/*.menucontainer {
	 /* flex-direction: column;
	 
	}*/

	.sidebox {
	  background-color: rgb(47, 88, 145); /* Világoskék háttér */
	  overflow-y: auto; /* Függőleges görgetés engedélyezése */
	  line-height:1;
	  max-height:200px;
	  
	}

	body

	{
		padding: 12px;
		color: rgb(29, 15, 42);
		background-color: rgb(176, 157, 115);
		display: grid;
		/*align-self: center;*/
	  justify-content: left; 
	  
	  }

  }
/*  *************************************/