:root 
{ 
	--min: 300px; 
	--max: 700px; 
	--page-pad: 16px;
	--gap: 16px;
	--modal-min: 360px;
	--modal-max: 820px;
	--default_color: #0F3D74; 
	--card: 350px;
	--default_font_color:#0F3D74; 
	--active_font_color:#ffffff; 
	--page-color:#f4f6f8; 
	}
		

	body,html 	  
		{
			margin:0px;
			padding:0px;
			width:100%;
			height:100%;   
			background:var(--default_color); 
			color:var(--default_font_color); 
			overflow-x: hidden!important;
		} 
		
	*, *::before, *::after			  
		{
			-webkit-box-sizing:border-box;
			-moz-box-sizing:border-box;
			box-sizing: border-box;
			font-family: "Tahoma", "Segoe UI", Arial, sans-serif !important;  
		} 
		
	body		  
		{	 
			overflow:hidden;
			overflow-x: hidden!important;
			font-size:16px;
			display: flex;
			flex-direction: column;
			height: 100vh; 
		} 
		
	img 
		{
			margin:0px;
			border:0px;
		}
		
	b 
		{
			font-size:100%;
			max-width:100%
		} 

	.mrc_content 
		{
			flex-grow: 1;
			--background: url('../images/logo3.png') var( --page-color) no-repeat;
			background:  var( --page-color) ;
			overflow: auto;
			padding: 20px;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			display: flex;
			flex-direction: column;
			padding-bottom:100px;
			background-position: bottom;
			background-size: 35%;
		}

	.mrc_head 
	{ 
		height: 100px;
		background-color: var(--default_color); 
		color: white;
		display: flex;
		align-items: center;      
		gap: 12px;                 
		padding: 0 10px;
	}
	
	.mrc_head > .a1_1
		{ 
			flex:0 0  150px; 
			min-width:150px;   
			max-width:150px;   
			 width:150px;   
		}
 
	.mrc_head > .a1_3
		{ 
			flex:0 0  150px; 
			min-width:150px;   
			max-width:150px;   
			 width:150px; 
  display: flex;  
  justify-content:right;
		}

 
.mrc_head > .a1_2 {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;      
  justify-content: center;   
  height: 100px;             
}

	.mrc_content_logo
	{
	justify-content: center;
    width: 100%;
    margin: 0px;
    display: grid;
; 
	} 
 	
	.mrc_footer
	{
  display: flex;
  flex-wrap: wrap;          
  align-items: center;
  --padding: 0 10px;
  height: 120px;
  max-height: 60px;

  background: var( --page-color);
  color:transparent;
 
	} 
	/*.mrc_footer > .footer_logo
	{
		flex: 0 0 100%;
		width: 100%;
		height: 80px;            
		order: 0;    
		display: flex;             
		align-items: center;      
		justify-content: center;  
	}	*/	
		
 
.mrc_footer > .fleft   { padding:0 10px;flex: 0 0 30%;order: 0; color:#fff;  background: var(--default_color); }
.mrc_footer > .fcenter { padding:0 10px;flex: 1 1 40%; text-align: center; order: 0; color:#fff;  background: var(--default_color);}
.mrc_footer > .fright  { padding:0 10px;flex: 0 0 30%; justify-content: flex-end;order: 0; color:#fff;  background: var(--default_color);text-align: end;  }

 
.mrc_footer > .fleft,
.mrc_footer > .fcenter,
.mrc_footer > .fright{
  container-type: inline-size;              
  font-size: clamp(2px, 1.125cqw, 18px);      
  line-height: 1.2;
  overflow-wrap: anywhere;
  align-content: center;
  height:60px; 
}

 
.mrc_footer, .mrc_footer *{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}	
		
		
 
.mrc_head > .a1_2 img {
  display: block;
  height: 100%;    
  width: auto;     
  max-width: 100%;    
  object-fit: contain;  
}	
				
		
 .mrc_footer > .footer_logo img  {
  display: block;
  height: 90%;    
  width: auto;     
  max-width: 90%;    
  object-fit: contain;  
}	
			
		
		
		
		
		
	
		
	.mrc_footer div.left
	{
		width:30%;
	}
	.mrc_footer div.center
	{
		width:40%;
	}
	.mrc_footer div.right
	{
		width:30%;
		font-size: clamp(5px, 2.8vw, 12px);
		overflow-wrap: anywhere;    
	}
	.head-inner 
		{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			margin: 0 auto;
			padding: 20px 20px;  
			box-sizing: border-box;
		}

	.left 
		{
			display: flex;
			align-items: center; 
			width: 400px;
		}
 

	.center 
		{
			flex: 1;
			text-align: center;
		}

	.center h1 
		{
			margin: 0; 
			color:var(--default_font_color); 
			font-size: 24px;
		}

	.right
		{
			display: flex;
			align-items: center;
			gap: 20px;
			width: 400px;
			justify-content: end;
		}
	
	
	.language-selector
		{
			
			place-content: center;
		}
		
	.language-selector .flag 
		{
			height: 24px;
			width: auto;
			cursor: pointer;
		}

	.cart 
		{
			display: flex;
			align-items: center;
			gap: 8px;
			color: white;
			font-weight: bold;
		}

	.cart-icon 
		{
			height: 24px;
		}

	.focsoportok
		{ 
			height:80px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			margin: 0 auto;
			padding: 20px 20px;  
			box-sizing: border-box;
			
 
	  
		}
			
	.focsoport
		{
			width: 100%;
			flex: 1 1 auto;
			min-width: 250px;
			max-width: 260px;
			height: 60px;
			background: #cfe5f3;
			color: #0d6eaa;
			border: 0px;
			font-weight: bold;
			font-size: clamp(0.85em, 1vw, 1em);
			border-radius: 5px;
			margin: 0px;
		}	
	.vezerlo
	{
		width:250px;
			height:60px;
			background:#cfe5f3; 
			color:var(--default_font_color); 
			border:0px;
			font-weight:bold;
			font-size:16px;
			border-radius: 5px;
			margin:5px;
	}
	
	.vezerlo:hover 
	{
		background: #0b5c8e;
		color: #fff;
	}

	.fl_left {float:left;}
	.fl_right {float:right;}
	
	.idopontok
	{
		display: grid;
		gap: var(--gap);
		align-items: stretch; 
		grid-template-columns: repeat(3, 1fr); 
		margin-top: 10px; 	
	}
	
	.idogombok
		{
			flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
			max-width:98px;
			height:30px;
			background:var(--default_font_color); 
			color:#ffffff;
			border:0px;
			font-weight:bold;
			font-size:18px;
			border-radius: 5px;
			cursor:pointer;
		}
	.active
		{
			background:var(--default_color); 
			color:#ffffff; 
			position: relative;
		}
/*
	.active::before 
		{
content: "\2713";
			left: -10px; 
			font-weight: bold;
			color: white;
			position: relative; 
		}*/
	.jaratok
		{ 
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: var(--gap); 
			max-width: calc(4 * var(--card) + 3 * var(--gap));
			margin-inline: auto;    
			width: 100%; 
		}    
 
	.jarat
		{  
			padding: 20px 20px;   
			background:#cfe5f3;
			border-radius: 20px;
			box-shadow: 0 0 10px rgba(0,0,0,0.3); 
			box-sizing: border-box;
			width: var(--card);       
			padding: 12px;  
		}
		
	.jarat img
	{
		width:100%;
	}
	.megjegyzes
		{
			width:300px;
			height:300px;
			
		}
	h3
		{
			border-bottom: 1px solid rgba(0,0,0,0.1);
			color: var(--default_color); 
			padding:10px; 
			margin:0px;
		}
	h2
		{	
			color:#aaaaaa;
			font-size:12px;	
			margin:5px;
			width:100%; 
		}	
	h1
		{	
			color:var(--default_font_color); 
			font-size:18px;
			margin:5px;
			width:100%;
		}
		
		
	h1.cim
	{
		color:var(--page-color); 
	}
	
	.info
		{
			margin:5px;
			width:300px;
		}	
	.input
	{
		font-size: 16px; 
		padding: 10px;
		width: 300px;
		border: 2px solid #d1d9e3;
		border-radius:15px;
		height: 45px;
		margin: 2px; 
		background:#ffffff;
	}
	
.view_info
{  
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: clamp(300px, 90svw, 700px);
    max-height: 90svh;
    display: none;
    flex-direction: column;
    padding: 0px;
    padding-bottom: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
	
	 
  
}
.view_info_head
{
  flex: 0 0 24px;
  height: 24px;
  display: flex;
  align-items: center;   
  gap: 8px;
  width: 100%;
	padding: 20px;
    border-bottom: 1px solid #0074b8;
}
.view_info_head .head_left
{
  flex: 1 1 auto;
  min-width: 0;                   
  overflow: hidden; 
  white-space: nowrap; 
  text-overflow: ellipsis;        
}
.view_info_head .head_right
{
  flex: 0 0 24px;
  width: 24px; height: 24px;      
  display: grid; place-items: center;
}
.view_info_cont
{
  flex: 1 1 auto; 
  min-height: 0; 
  overflow: auto; 
  width: 100%;
  padding: 20px;
}


.close_btn{
  appearance: none; 
  border: none; 
  background: transparent;
  width: 24px; 
  height: 24px; 
  line-height: 24px; 
  text-align: center; 
  cursor: pointer; 
  border-radius: 6px;
  font-size: x-large;
}
.close_btn:hover{ background: rgba(0,0,0,.06); }

.from-wrapper-center
	{
		justify-content: space-between;
	}
  .form-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 20px;
  
    }
	
.form-container-control {
  display: flex;
  justify-content: space-between; 
  max-width: 700px;
  width: 100%;
  padding: 5px;

}


  .form-container {
       display: flex;
      flex-wrap: wrap;
      gap: 20px;
      max-width: 700px;
      min-width: 350px;
      width: 100%;
      padding: 20px;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .form-group {
      flex: 0 0 calc(50% - 10px);
      display: flex;
      flex-direction: column;
    }

    label 
	{
		font-weight: bold;
		margin-bottom: 5px;
			color: var(--default_color); 
    }
	.jegyek
	{
		width:100%;
	}
	.jegy
	{
		flex-direction: row;
	}
	.jegyelem
	{
		height:70px;
		margin:5px;
		width:90px;
		align-content: center;
	}
	
	
	.jegyelem.kep	
		{
			flex:0 1  clamp(60px, 28vw, 70px); 
			min-width: 60px;     
			max-width: 70px; 
		}
	.jegyelem.megn
		{
			flex:0 1  clamp(60px, 28vw, 300px); 
			min-width: 60px;     
			max-width: 300px; 
		}
	.jegyelem.ossz
		{
			flex:0 0  85px;  
			min-width: 90px;	
			text-align:right;
		}	
	.jegyelem.vez	
		{
			flex:0 0  40px;   
		}
	

	.jegyelem.vez input.g
	{
		font-size: 32px;  
		width: 40px;
		border: 2px solid #d1d9e3;
		border-radius:5px;
		background:#184478;
		color:#ffffff; 
		height: 40px;
		margin: 2px; 
		cursor:pointer;
		padding:0px;
		font-family: sans-serif !important;
		    line-height: 40px;
	}
	.jegyelem.vez input.v
	{
		font-size: 16px;  
		width: 40px;
		border: 2px solid #d1d9e3;
		border-radius:5px;
		height: 40px;
		margin: 2px; 
		text-align: center;	
	}

	
	.disabled
	{
		background:#efefef;
		color:#888888;
	}
	
	table.cikklista
	{
		width:100%;
	}
	table.cikklista thead th
	{
		color:#0074b8;
		text-align:left;
		border-bottom:1px solid #0074b8;
		padding:2px;	
	}		
	table.cikklista td
	{
	
		padding:5px;	
	}		
	table.cikklista tr.utolso td
	{ 
		border-top:1px dotted #0074b8;
	}		
	table.cikklista tr:nth-child(odd) td
	{ 
		background:#f3f6f8;
	}	
	.kartya
	{
		margin:10px;
		display: block;
    padding: 0px;
	    min-width: 340px;
    max-width: 250px;
    width: 100%; 
	}
	  
.modal
  {
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	background: url('../images/1x1.png');
	z-index:1000000;
	width:100%;
	height:100%;  
	min-height:100%;   
	min-width:100%; 
  }
  
    
  .cikklista.lista 
  {
	  display: inline-table;
  }
  
  
  .lista_nev
  {
	  width:100% !important;
  }
  .lista_ar
  {
	 width: auto;
    display: table-cell;
    min-width: 100px;
    max-width: 100px;
}
  }
  .lista_db
  {
	  width:50px;
  }
  
  
 .cikklista tr td:first-child 
 { 
 width: 180px; 
 }
  
  
  
    
 .cikklista thead tr th
 { 
	font-size:100%;
 }

  
  /*.cikklista.lista  tr td:first-child 
  
  { 
 width: 200px; 
 }
   
  
  */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 .clock2
  {
	  height:64px; 
	  width:64px; 
	   background:   url('../images/clock.gif') top left no-repeat;	
  } 
 .clock
 {
	z-index:1000001;
	position:fixed;
	top:calc(50% - 50px);
	left:0px;
	width:100%;
	height:130px; 
	min-width:300px;
	background:#0f3d74;
	color:#ffffff;
		background:transparent; 
	font-size:120%;
	text-align:center; 
	padding:0px;  	 
 } 
 .msg_info 	  
 {
	position: fixed;
  z-index: 1000001;
  left: 0; 
  right: 0;
  height: 130px;
  min-width: 300px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  color: #fff;
  font-size: 120%;
  overflow: hidden;
  text-align: center;
 } 
 .msg_info div 
 {	
 		border: 2px solid #d1d9e3;
		
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
		border-radius:5px;
		padding-left:10px;
		padding-right:10px;
		display: inline-grid;
		background:var(--default_color); 
		vertical-align:middle; 
		align-items : center;
		height:100%; 
		width: 100%;
		max-width: 600px;
	}
	
 .msg_confirm div
 {
	
	
 }
	.msg_info div .msg_control
	 { 
		border: 0px;
		background: transparent;
		box-shadow: none;
		display: flow;
	 } 	
	.msg_info div .msg_control input
	 { 
		width:100px
	 } 
	   p {
    --text-indent: 2em;            /* első sor behúzása */
    text-align: justify;         /* sorkizárt igazítás */
    text-justify: inter-word;    /* szóközök közt ossza el */
    hyphens: auto;               /* automatikus elválasztás */
    line-height: 1.6;            /* olvashatóbb sor-magasság */
    margin: 0 0 1rem;            /* bekezdésköz */
    overflow-wrap: anywhere;     /* nagyon hosszú szavak se lógjanak ki */
  } 
  h5
  {
    font-size: 17px;
    color: #bb0000;
    display: inline;
	padding:0px 5px;
	margin:0px;
  }
    @media (max-width: 768px) 
		{
			.form-group 
				{
					flex: 0 0 100%;
				} 
			.input
				{
					width:100%;
				}
			h2
				{
					display:none;
				}
			.jegyelem.megj
				{ 
				}
				
				
					.mrc_head > .a1_1
		{ 
			flex:0 0  100px; 
			min-width:100px;   
			max-width:100px;   
			 width:100px;   
		}
 
	.mrc_head > .a1_3
		{ 
			flex:0 0  100px; 
			min-width:100px;   
			max-width:100px;   
			 width:100px; 
  display: flex;  
  justify-content:right;
		}

	
		}   
	.vegossz
	{
		font-size:15px;
	}
	
	@media (max-width: 470px) 
		{
			.jegyelem.kep	
			{
				display:none;
			}
	 .form-container
			{
				padding:5px;
			}
		} 
	@media (max-width: 800px) 
		{ 
		
	.vegossz
	{
		font-size:12px;
	}
	
			.kartyas
				{
					display: flow;
				}
			.kartya
				{
					margin: 0px;
					display: block;
					padding: 0px; 
					width: 100%; 
					max-width: 700px;
					min-width: 350px;
				} 
/*		  
  .cikklista.lista  tr td:first-child  
	{ 
		width: 100px; 
	}*/
   		
	/*		.focsoport
				{
				width: 100%;
				flex: 1 1 auto;
				min-width: 120px;
				max-width: 260px;
				height: 60px;
				background: #cfe5f3;
				color: #0d6eaa;
				border: 0px;
				font-weight: bold;
        --font-size: clamp(0.5em, 1.5vw, 0.75em);
				border-radius: 5px;
				margin: 5px;
			}*/
			.active
		{
			background:var(--default_color); 
			color:#ffffff; 
			position: relative;
		}
		}