@charset "UTF-8";
@font-face {
  font-family: 'fontello';
	src: url('./font/fontello.eot?55810303');
    src: url('./font/fontello.eot?55810303#iefix') format('embedded-opentype'),
         url('./font/fontello.woff?55810303') format('woff'),
         url('./font/fontello.ttf?55810303') format('truetype'),
         url('./font/fontello.svg?55810303#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?31431614#fontello') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-user:before { content: '\e800'; } /* '' */
.icon-user-plus:before { content: '\f234'; } /* '' */
* {
	box-sizing:border-box;
	padding:0;
	margin:0;
}
@media screen and (max-width: 992px) {
	#user{
		display: block;
        position: absolute;
        top: 1%;
        right: 2%;
        cursor: pointer;
        font-size: 30px;
        background-color: darkgray;
        color: ghostwhite;
        border-radius: 45%;
        border: 2px solid transparent;
        border-color: darkorchid;
		z-index:10;
}
#user input{
	content:"";
	height:35px;
	width:42px;
	position:absolute;
	top:1%;
	right:2%;
	appearance: none;
	outline: none;
	pointer-events: none;	
}
#user:has(input:checked) + #fejlec {
  display: block;
   z-index: 9;
   position: absolute;
   top: 0;
   right: 0;
  /* padding-top: 42px; */
   width:clamp(15rem, 50%, 20rem);
}	
#fejlec,#td-fejlec-bal,#td-fejlec-kozep{
	display:none;
}
#kontener, #tartalom{
	width:100%;
	height:100vh;
	display:block;
	position: absolute;
	top:0;
}
#menudiv{
		background-color: #FEFCBC;
		font-family:arial;
		display:none;
		 position: absolute;
		padding: 0.5rem 1rem;
		padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
		top:0;
		left:0;
		width:50%;
		max-width: 300px;
		min-height: 100vh;
		z-index:10;
		min-width:200px;
		}
/* Hamburger menü*/
:root {
  --bar-width: 40px;
  --bar-height: 6px;
  --hamburger-gap: 6px;
  --foreground: darkgray;
  --background: White;
  --hamburger-margin: 8px;
  --animation-timing: 200ms ease-in-out;
  --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}

.hamburger-menu {
  --x-width: calc(var(--hamburger-height) * 1.41421356237);

  display: flex;
  flex-direction: column;
  gap: var(--hamburger-gap);
  width: max-content;
  position: absolute;
  top: var(--hamburger-margin);
  left: var(--hamburger-margin);
  z-index: 20;
  cursor: pointer;
}

.hamburger-menu:has(input:checked) {
  --foreground: darkgray;
  --background: #333;
}

.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible {
  border: 1px solid var(--background);
  box-shadow: 0 0 0 1px var(--foreground);
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
  content: "";
  width: var(--bar-width);
  height: var(--bar-height);
  background-color: var(--foreground);
  border-radius: 9999px;
  transform-origin: left center;
  transition: opacity var(--animation-timing), width var(--animation-timing),
    rotate var(--animation-timing), translate var(--animation-timing),
    background-color var(--animation-timing);
}

.hamburger-menu input {
  appearance: none;
  padding: 0;
  margin: 0;
  outline: none;
  pointer-events: none;
}

.hamburger-menu:has(input:checked)::before {
  rotate: 45deg;
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / -2);
}

.hamburger-menu:has(input:checked)::after {
  rotate: -45deg;
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / 2);
}

.hamburger-menu input:checked {
  opacity: 0;
  width: 0;
}
.hamburger-menu:has(input:checked) + #menudiv {
  display: block;
}	
	
}

@media screen and (min-width: 991px) {
.hamburger-menu{
	display:none;
}
#user{
	display:none;
}
#fejlec {
		margin: 0;
		padding: 0;
		border: 0;
		width: 100%;
		}
#kontener{
	display:grid;
	grid-template-columns:1fr 4.5fr;
	height:84vh;
}
#menudiv{
		background-color: #FEFCBC;
		font-family:arial;
		}
#tartalom {
			width: 100%;
			height: 100%;
			overflow:auto;
			/*! padding-left:8; */
			margin-left: .2rem;
			}
}

A.hunderline {
	text-decoration: none;
	color: #003366; }

A.hunderline:hover {
	text-decoration: none;
	color: #c90000; }
	
	A.hunderline:active{
	color:#C90000;
}


P.menulink {
	border-width: 1px;
	border-color: #56A4C9;
	border-style: solid;
	border-right:none;
	border-top-style: none;
	font-weight: bold;
	font-size: 13px;
	color: #003366;
	margin-left: 0;
	margin-bottom: 0px;
	padding-bottom: 1px;
	padding-top:4px;
	margin-top: 0px;
	padding-left: 3%;
	width: 90%;
}

P.submenulink {
	border-left-style: solid;
	border-right-style: solid;
	border-bottom-style: none;
	border-right:none;
	border-width: 1px;
	border-color: rgb(102,151,184);
	font-size: 11px;
	color: black;
	margin-left: 0;
	margin-top: 0;
	margin-bottom: 0px;
	padding-bottom: 4px;
	padding-top:4px;
	padding-left: 6%;
	background-color: rgb(255,255,255);
	}

P.menuseparator {
	font-weight: normal;
	font-size: 11px;
	color: black;
	margin-left: 2px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 4px;
	padding-top:4px;
	background-color: rgb(233,241,244) }

P.lastsubmenulink {
	font-size: 11px;
	color: black;
	margin-left: 2px;
	margin-top: 0px;
	margin-bottom: 2px;
	padding-bottom: 4px;
	padding-top:4px;
	background-color: rgb(233,241,244) }

P.headerdata {
	font-size: 11px;
	color: #003366;
	margin-left: 0px;
	margin-bottom: 0px;
	font-weight: normal; }



#menudiv P.text {
	color: black;
	margin-top: 1px;
	margin-bottom: 1px; }

A.hunderlinebstatus {
	color: #C90000;
	text-decoration:none; }

A.hunderlinebstatus:hover {
	text-decoration: underline; }



P.popupheader {
	filter:alpha(opacity=80);
	opacity: .8;
	-moz-opacity: .8;	
	color: #FFFFFF;
	font-weight: bold;
}
/* Fejléc */
#table-fejlec{
	background-color: #76B5D3;
	border:0;
	width:100%;
}
#td-fejlec-bal div{
	display: flex;
	align-items: center;
	font-size: clamp(1rem, 4.5vw, 1.5rem);
}
#td-fejlec-bal, #td-fejlec-jobb{
	width:25%;
}
#logo{
	height: 6vw;
	min-height:100px;
	margin-right: .2em;
}
#td-fejlec-kozep{
	width:50%;
	text-align: center;
	vertical-align: middle;
	background-color:#56A4C9;
}
#td-fejlec-jobb+div{
	display:grid;
	grid-template-columns: auto auto;
	width:100%;
}
#td-fejlec-kozep h1{
	 font-size:clamp(1.1rem, 5vw, 1.9rem);
}
#td-fejlec-kozep h3{
	 font-size:clamp(.7rem, 4vw, 1.4rem);
}
#nincsbelepve{
	color: red;
	font-size: clamp(1rem, 4vw, 2.2rem);
	text-align: center;
	padding-top: 10%;
}
#belep{
	text-decoration:underline;
	text-transform:uppercase;
	width: 100%;
	
}
div.cimke{
	width: 35%;
	position:relative;
	float: left;
	padding-top: 6px;
}
div.bevitel{
	width:60%;
	position:relative;
	right: 0;
	float: right;
	padding-top: 6px;
	
}