@font-face {
	font-family: 'gf';
		src: url('/static/font/x7GvHg.eot');
	    src: url('/static/font/x7GvHg.eot') format('embedded-opentype'),
		url('/static/font/x7GvHg.woff2') format('woff2'),
    	url('/static/font/x7GvHg.woff') format('woff'),
		url('/static/font/x7GvHg.ttf') format('truetype'),
		url('/static/font/x7GvHg.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/**/
*{box-sizing:border-box}
html,body {height:100%;font-size:13px}
body {font-family: sans-serif;margin:0;background:#eaeaea}
.page-overlay {position: fixed;left:0px;top:0px;width:100%;height:100%;background: rgba(0, 0, 0, .1);}
/**/

style, script {display: none !important} /* .v>* meg hasonlók felülírnák, ha nem lenne !important */

table {margin-top:0px;margin-bottom:0px;border-spacing:0px}
table,tr,td,div {padding:0}

/**/
FIELDSET { border: 1px solid silver; padding: 8px;   border-radius: 4px; }
LEGEND { padding: 2px; font-weight: bold}
canvas {display: inline-block}

fieldset>.fillHeight {height: calc(100% - 1em - 12px)} /* legend ne számítson bele */
.fieldsetContainer::after{content:"";height: 1em} /* margin nem jó fieldset-nél: https://stackoverflow.com/questions/10792791/fieldset-height-100-of-its-parent */
/**/

/* ha csinálunk egy olyan class-t, ami beállít display:inline-block-ot egy tetszőleges elemnek,
   akkor azt vezessük át a lenti flexbox classokba is (.Fh/.Fv) */

.hm {white-space: nowrap}  /* minimális szélességű hbox */
.hm>*{white-space:normal}
.Hm {display:inline-block; vertical-align: middle; height: 100%; } /* minimális szélességű hbox-ban lévő nem alignolt elem */
.hv:before {content:" ";display:inline-block;vertical-align: middle; width: 0px;min-height:100%; } /* min hbox, alignChildren = vcenter */
.hV:before {content:" ";display:inline-block;vertical-align: bottom; width: 0px;min-height:100%;} /* min hbox, alignChildren = vbottom */

.H {display:table-cell;vertical-align: middle;} /* nem-minimális szélességű hboxban element */
.Ho {display:table-cell;vertical-align:unset;}

.h>*{height:100%} /* FF bug, enélkül headerben signin gomb felcsúszik, ha nincs mellette más gomb */

img.F{height:auto}
.W{width:100%}
.f, .fp > * {width:100%;height:100%} /* fp: full size elem parentje, DOMEnv.show használja */
.F {height:100%}
/* minden inline-block-hoz beírtam vertical-align:middle-t, mert különben descendernek helyet hagyna ki alul*/
/* 2022-01-25: átírtam middle-ről top-ra, mert searchresult progressbarnak kicsúszott vmiért a middle-től */
.fi {width:100%;height:100%;display:inline-block;vertical-align:top}
.Fi {height:100%;display:inline-block;vertical-align:top}
.i {display:inline} .B {display:block} .b{display:inline-block;vertical-align:middle}
table {border-collapse: collapse}
.T {display:table; border-spacing: 0px} /* ha nem lenne itt a border-spacing, öröklődne ha egy táblázatba van berakva valami */
.t, .E>* {display:table-row}
.t1 {display:table-row; height: 1em; }
.t>*, .E>*>*, .e{display:table-cell; }
.V:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
form {height:100%}

@media screen and (min-width:0) and (min-resolution: .001dpcm) {  .e{height:100%  \0/IE9} } /* IE9 */

.w, .l, .c, .r {white-space:nowrap}
pre.w, pre.l, pre.c, pre.r {white-space:pre}
.l, .L {text-align:left}
.c, .C {text-align:center}
.r, .R {text-align:right}
.position-absolute{position:absolute}
.p, .position-relative, .O, .O:not(.WH) > *:not(.P):not(.overlay-passive):not(.Pv) {position:relative} /* "O": overlay container */
.P, .overlay-passive, .PS > * {position:absolute;left:0px;right:0px;top:0px;bottom:0px;width:100%;height:100%}
.Pz { z-index: -1; } /* hogy lehessen P classt használni háttérhez */
*:not(.PQ) > .PS { position: relative; } /* PS: PassiveSize container */
.Pv {position:absolute;left:0px;right:0px;width:100%}
.fl > * { display: inline-block }
.fl > .fl, .fl > .tw { display: inline }
.gP, .gQ { display: grid } /* symmetric overlay parent vagy tényleges grid. gQ csak symmetric overlay parent lehet */
.gQ { grid-template-columns: 100%; grid-template-rows: 100%; } /* különben a child mérete túlcsordulhat */
.fl > .gQ { display: inline-grid}
.gO, .gQ>* { grid-column: 1; grid-row: 1; } /* symmetric overlay element */
.gQ > * { z-index: 0; /* nem a konkrét érték a lényeg, hanem csak hogy ne auto legyen, mert akkor elkavarodik */ }
/* .gO elavult, valszeg ki lehetne törölni */
.oH { overflow: hidden }
.oS { overflow: auto }
.tw { word-wrap: break-word; }
a {text-decoration:none} /* leszármazottak nem tudnák törölni */
.vt, .Vt {vertical-align:top} /* .Vt, .Vm, .Vb-re csak azért kell beállítani, mert időnként nem megy ha valignolt vboxot rakunk a hboxba, de nem értem hogy miért */
.vm, .Vm {vertical-align:middle}
.vb, .Vb {vertical-align:bottom}
/* .Vt és .Vb nem biztos h kell, meg kell nézni h anélkül is megy-e valign. ha megy, ki kell szedni kódból is */
.Vt:before{content:"";display:inline-block;height:100%;width:0px;vertical-align: top}
.Vm:before{content:"";display:inline-block;height:100%;width:0px;vertical-align: middle}
.Vb:before{content:"";display:inline-block;height:100%;width:0px;vertical-align: bottom}
.mL{margin-right:auto}
.mC{margin-left:auto;margin-right:auto}
.mR{margin-left:auto}
.mt,.mm{margin-bottom:auto}
.mb,.mm{margin-top:auto}
.gf {font-family:gf}
.pt {pointer-events: none}
.PT {pointer-events: all}
.pE:not(.PT) {pointer-events: none} /* lehet hogy korlátozni kéne hogy csak a nem-pseudo elemekre vonatkozik */
.pE>*:not(.pE):not(.pt) {pointer-events: all}
.Pt, .Pt * { /* pointer transparent, user által kérve */
    pointer-events: none !important; /* .pE>*:not(.pE):not(.pt) felülírná, ezért kellett !important */
}
.px {image-rendering: pixelated}
.wh{width:auto;height:100%;display:inline-block} /* same width as height */
.WH{position:relative; width: auto}
.Wh:not(.wh):not(.Pv){position:absolute;left:0px;right:0px;top:0px;bottom:0px;width:100%;height:100%} /* passive width child */
.pc{position:relative}
.pL,.pH,.pR{position:absolute;top:0px;width:auto;height:auto}
.pL{left:0px}
.pH{left:50%;transform:translateX(-50%)}
.pR{right:0px}
.ms:hover>.m1, .ms:active>.m1,
.ms:not(:hover)>.m2, .ms:active>.m2,
.ms:not(:active)>.m3 {display:none}
.cN {cursor:default}
.cL {cursor:pointer}
.cT {cursor:text}
.cO {cursor:not-allowed}
.el {max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden }
.lf {table-layout:fixed}
.ro { /* Responsive layout egy elemjének Outer divje */
    /* Chrome-ban nem kell ez a height:100%, de FF-ben középre igazodik időnként a tartalom (pl. új játéklapon az oszlopok),
       ezért beraktam, remélem hogy mást nem ront el. meg kéne nézni majd egyszer, hogy melyik a szabványos működik.  */
    height:100%;
}

/* flexbox */
.Fh {display:flex;flex-direction:row}
.Fv {display:flex;flex-direction:column}
.Fr {display:flex}
.Fv, .Fh {align-items: stretch}
.Hm.Fh, .Hm.Fv, .fi.Fh, .fi.Fv, .Fi.Fh, .Fi.Fv, .b.Fh, .b.Fv,
.fl > .Fh, .fl > .Fv, .fl > .Fr {display:inline-flex}
.Fg, .FG>* {flex-grow:1}
.F0 {flex:0}
.FR {flex:10000 1 auto}
.Fv>.mC {margin-left:unset;margin-right:unset;align-self: center}
.Fh>*, .Fv>*, .Fr>* { flex-shrink: 1 }
.fs {justify-content: flex-start}
.fc {justify-content: center}
.fe {justify-content: flex-end} /* ha ez flex-end helyett end, akkor pl. playerinfón popupmenu gomb balra igazítódik jobbra helyett */
.Fs {align-items: start}
.Fc {align-items: center}
.Fe {align-items: end}
.FS {align-content: start}
.FC {align-content: center}
.FE {align-content: end}
.g1 {gap: 1em}
.we:not(td) {display: flex;} /* wrapper element */
.we:not(td)>*{flex-grow:1;}
td.we>* {width:100%;height:100%;}
.Fa>*{flex-grow:1;} /* "a" = "all grow 1" */
.sm > * {max-width: 100%; max-height: 100%; }

.Hm.gP, .fi.gP, .Fi.gP, .b.gP, .b.gP, .fl > .gP {display:inline-grid}

/**/
button.hb, input.hb {  /* hidden button vagy input type=file, ld. LayoutElement::onClickFormAction */
	background-color: transparent;
	position: absolute;
	left: -10000px; /* -1000px nem elég, mert lehet hogy position:relative-ban vagyunk */
	height: 1px;
	width: 1px;
	overflow: hidden;
}

input { background: white; border: 1px solid #ccc;
				padding:calc(0.2em + 3px) calc(0.5em + 3px);/* 4px lenne, de Chrome inkonzisztensen kerekít */
				outline: transparent; }

.et { background: transparent; border: none; outline: none; box-shadow: none;}
textarea:not(.b):not(.fi):not(.Fi) { width:100% /* textarea hiába block, még nem tölti ki a sort */}
/**/

.o {max-height:0px;overflow-y:hidden;transition:max-height .3s ease} /* c_o_llapsed */
.s {max-width:100%;max-height:100%;overflow:auto} /* scrollable */
.S, .gf {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}




.ws {border-radius: 0.2em;box-shadow: 0.4em 0.4em 0.8em #23343D}

@media only screen and (max-width: 479px) {
	html[data-responsive] { font-size: 14px; }
}
@media only screen and (min-width: 480px) {
	html[data-responsive] { font-size: 16px; }
}
@media only screen and (min-width: 640px) {
	html[data-responsive] {font-size: 18px; }
}
@media only screen and (min-width: 1240px) {	/* 720p 135% */
	html[data-responsive] { font-size: 22px; }
}
@media only screen and (min-width: 1880px) {	/* 1080p 200% */
	html[data-responsive] { font-size: 28px; }
}

/**/



pre {font-family: sans-serif; margin: 0px; white-space: pre-wrap; word-break: break-word; }

.bn, .bh, .bp, .bc {display:none}
input:not(:checked) + label:not(:hover) > .bn,
input:not(:checked) + label:hover:not(:active) > .bh,
label:active > .bp,
input:checked + label:not(:active) > .bc
{display:block}

.a, style {display:none}





body[data-included="true"] {background:#f7f7f7}
body[data-included="false"]:not([data-s="homepage"]):not([data-s="homepage_newheader"]):not([data-s="new_design"])
{background:#71a7c4}

.Wt {
    color: #0e6ba9;
}
.WC {
    font-size: 1.8em;
}


.wi {
   /*border-radius: 4px;*/
    box-shadow: 0.4em 0.4em 0.8em #23343DAA;
    border: 0.2em solid #0C5A8D;
    background: #FFFFFF;
}

.WC {
   	border-bottom: 0.1em solid #94B2C2;
 	box-shadow: 0 0 0.2em #9DB7C5 inset;
    background: #C2E1F3;
    height: 2.2em;
    width: 30em;
    font-weight: bold;
}


.dp-center {font-size: 1.2em}

@media screen and (max-width: 639px) {
    .dp-center>div {margin: .5em}
}
@media screen and (min-width: 640px) {
    .WC {
        width: 20em;
        font-size: 26px;
    }
}

.window-caption-bar .fr {font-size: 2.5em; padding: .2em; color: #0e6ba9;}
.window-caption-bar .fs {font-size: 2em; padding: .3em; color: #0e6ba9;}
.window-title {
	color: #0e6ba9;
	font-size: 1.5em;
}
.window-close-button{
	cursor: pointer;
	width:3.5em; /* h+2(mx-my) */
	font:inherit;
	transition: background linear 50ms;
	background: transparent;
	border: none;
	padding:1.5em 0px 0px 0px;
}
html:not([data-d="1"]) ._closeWindow:hover {
	background: #acd;
}
.window-close-button:active {
	background: #9bc;
}
.window-close-button:before{
	/*margin-top:1.5em; /* h/2 */
	right:0.689em; /* mx+(h-2my)(1-sqrt(2))/2 */
	width:2.121em; /* (h-2*my)*sqrt(2) */
	content:"";
	position:absolute;
	border-top:3px solid #888;
	transform: rotate(45deg);
	transform-origin: 50% 50%;
}
.window-close-button:after{
	/*margin-top:1.5em; /* h/2 */
	right:0.689em; /* p+(h-2p)(1-sqrt(2))/2 */
	width:2.121em; /* (h-2*p)*sqrt(2) */
	content:"";
	position:absolute;
	border-top:3px solid #888;
	transform: rotate(-45deg);
	transform-origin: 50% 50%;
}

.window > .s, .window>*:nth-child(2):not(.s)>.e>.s {width:35em;max-height: none !important}
.window { padding-left: .5px; padding-right: .4px; } /* Chrome kerekítés... */
.window-title {font-weight:bold}
.WC {
    position:relative;
}
.WC:after {
	content:"";
	background: url('/image/css/images/logo128.png') no-repeat;
	background-position: right;
	background-size: contain;
	position:absolute;
	z-index: 2; left:0; height:95%; top:25%; right:0.2em;
}

.w-bb {
    margin-top: 0.5em;
    height: 5em;
    border-top: 1px solid #94B2C2;
    font-size: 1.05em;
}
html:not([data-responsive]) .w-bb { height: 4.5em}
.w-bb .gf {font-size:1.2em; margin-bottom: .3em;margin-top: .15em}
.w-bb > * {
	background: transparent;
	border: none;
	color: #0C5A8D;
	cursor: pointer;
}
.w-bb > *:hover { background: #c2e2f3; }
.w-bb > *:active { background: #b0d0e1; }
.form-default-button-hack { position:fixed; left:-200%}

body:not([data-s=homepage_newheader]):not([data-s=new_design]) .form-field-label {padding-right: 1em;}
body:not([data-s=homepage_newheader]):not([data-s=new_design]) .f-t, body:not([data-s=homepage_newheader]):not([data-s=new_design]) .f-s, body:not([data-s=homepage_newheader]):not([data-s=new_design]) .form-field-fixed {
	font-size: 1.2em;
	width: 10em;
	height: 2.2em;
	overflow: hidden;
	color: #0C5A8D;
}
body:not([data-s=homepage_newheader]):not([data-s=new_design]) .f-t, body:not([data-s=homepage_newheader]):not([data-s=new_design]) .f-s, body:not([data-s=homepage_newheader]):not([data-s=new_design]) .form-text-area {
	background-color: white;
	box-shadow: 1px 1px 2px #496c80 inset;
	border-radius: 0.1em;
	border: 1px solid #94B2C2;
}
body:not([data-s=homepage_newheader]):not([data-s=new_design]) .f-t {padding: .5em}
body:not([data-s=homepage_newheader]):not([data-s=new_design]) .f-s { padding: .3em}


body[data-s=homepage_newheader] .form-field-label {
    padding-right: 1em;
    vertical-align: top;
    padding-top: .6em; /* középre igazítás */
}
body[data-s=homepage_newheader] .f-t, body[data-s=homepage_newheader] .f-s, body[data-s=homepage_newheader] .form-field-fixed {
	font-size: 1.1em;
	width: 10em;
	height: 2.7em;
	overflow: hidden;
	color: #0C5A8D;
}
body[data-s=homepage_newheader] .f-t::placeholder { color: #888 }
body[data-s=homepage_newheader] .f-t, body[data-s=homepage_newheader] .f-s, body[data-s=homepage_newheader] .form-text-area {
	background-color: white;
	border: 1px solid #BBC;
	border-radius: .5em;
}
body[data-s=homepage_newheader] .f-t, body[data-s=homepage_newheader] .f-s {padding: 0 .8em}


.form-field-fixed { text-align: left; }
.form-field-inline-label-container { text-align: left; }
.ffm { margin-top: 0.5em; margin-bottom: 0.5em; }


.form-text-area {height:5em; font-family: inherit; font-size: 1.2em; padding: .5em}
.fta-margins {margin-top:1em;margin-bottom:.5em}
.form-field-label-inline,.form-field-fixed-inline  {font-size: 1.2em;color: #0C5A8D;}
.form-field-inline-label-container { padding-top: 0.5em; padding-bottom: 0.5em;}
.form-field-label, .form-text-area-label { font-size:17px; color: #0C5A8D; }
.form-field-label-invalid { color: red }

.form-field-validation-error-spacer { height: .2em }
.form-field-validation-error { color: red }

.form-field-textarea-container .form-field-validation-error-spacer { height: .3em }
.form-field-textarea-container .form-field-validation-error {
    color: red; font-size: .8em; /* margin-top: -.9em */
}

.graybox-outer { padding-top: 1.5em; padding-bottom: 0.5em; }
.graybox-inner { padding: 1em 1em 1em 1em; background-color: #f0f0f0; }

.form-fields-table { border-spacing: 1em; border-collapse: separate; margin: -1em auto; }
.form-field-wideOnDesktop { width: 100% !important; } /* mobilra ez nincs hatással, mert ott amúgy sincs korlátozva a méretük */

/* ezek nem animálnak semmit, csak JS-nek üzenünk, hogy a select első childjét szedje ki/rakja vissza */
@keyframes combobox-show-label-option {
	from { clip: rect(-1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}
@keyframes combobox-hide-label-option  {
	from { clip: rect(-1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}

@media only screen and (max-width: 479px) {
	html[data-responsive] .form-field-label-hide-on-mobile { display: none }
	html[data-responsive] .form-field-label-inline { display: inline-block !important; padding-right: .3em }
	html[data-responsive] .form-field-inline-label-container { text-align: center }
	html[data-responsive] .window-caption-bar {font-size: .8em}

	/* mezők szélessége ne fixen 12em legyen mint desktopon, hanem arányos dialógus szélességével */
	html[data-responsive] .form-field-label-hide-on-mobile + td input,
	html[data-responsive] .form-field-label-hide-on-mobile + td select,
	html[data-responsive] .form-field-fixed { width: 100% }
	html[data-responsive] .form-fields-table { width: 100% }
	html[data-responsive] .hpdlg-wrap { width: 100% } /* alapból hcenterben lenne */


	html[data-responsive] .form-field-label-hide-on-mobile + td > input::placeholder { color: #999 }
	html[data-responsive] .form-field-label + td > input { text-align: center }
	html[data-responsive] .f-s {
		text-align-last: center;
		color: #999;
		animation-duration: 0.001s;
		animation-name: combobox-show-label-option;
	}
	html[data-responsive] .f-s option:first-child[disabled] { display: none }
	html[data-responsive] .f-s option:not([disabled]),
	html[data-responsive] .f-s optgroup { color: #0C5A8D}
}


@media only screen and (min-width: 480px) {
	html[data-responsive] .form-field-label { font-size: 1.2em}
	html[data-responsive] .form-field-label-inline { display: none }
	.form-field-label-hide-on-mobile + td input::placeholder { color: transparent !important }

	html[data-responsive] .f-s {
		animation-duration: 0.001s;
		animation-name: combobox-hide-label-option;
	}
}

@media only screen and (min-width: 640px) {
    .window > .s {width: 640px }
	html[data-responsive] .form-field-label { font-size: 1.2em}
	html[data-responsive] .form-field-label-inline { display: none }
	html[data-responsive] .form-field-label-hide-on-mobile + td > input::placeholder { color: transparent !important }

	html[data-responsive] .f-s {
		animation-duration: 0.001s;
		animation-name: combobox-hide-label-option;
	}
}

@media (pointer: coarse) {
	html[data-responsive] > body:not([data-s=new_design]) .form-field-label + td > input,
	html[data-responsive] > body:not([data-s=new_design]) .f-s,
	html[data-responsive] > body:not([data-s=new_design]) .form-field-fixed { height: 2.8em; font-size: 1.6em;
    border-radius: .2em;}
}
@media (pointer: fine) {
}

@media only screen and (max-width: 340px) {
    .WC {font-size: 1.2em}
    .dp-center { font-size: 1em }
}
@media only screen and (max-width: 400px) {
    .WC {font-size: 1.4em}
    html[data-responsive] .f-s { font-size: 1.2em}
}

html:not([data-responsive]) .form-field-label-hide-on-mobile + td > input::placeholder { color: transparent}
html:not([data-responsive]) .form-field-label-inline { display: none }
html:not([data-responsive]) .f-s {
	animation-duration: 0.001s;
	animation-name: combobox-hide-label-option;
}



.backButton, .forwardButton, .orangeButton, .redButton, .greenButton {
    border-radius: .3em;
    color: #555;
    padding: .8em 1.6em;
    font-size: 1.2em;
    transition: background-color .15s, border-color .15s;
    cursor: pointer;
    user-select: none;
}

.backButton { background: #ffca96; border: 1px solid #e5903a; }
.backButton .gf { padding-right: .6em;  transform: translateX(-.4em); }
.backButton:hover { background: #edbb89 }
.backButton:active { background: #e1a56c; border-color: #aa6a28}

.forwardButton { background: #c4ed87; border: 1px solid #72bf00; }
.forwardButton .gf { padding-left: .7em; margin-right: -.4em; }
.forwardButton:hover { background: #b7da83; }
.forwardButton:active {  background: #a0c36c; border-color: #64a700}

.redButton { background: #ffca96; border: 1px solid #e5903a; }
.redButton:hover { background: #edbb89 }
.redButton:active { background: #e1a56c; border-color: #aa6a28}

.greenButton { background: #c4ed87; border: 1px solid #72bf00; }
.greenButton:hover { background: #b7da83; }
.greenButton:active {  background: #a0c36c; border-color: #64a700}

.orangeButton { background: #FFD761 /* hsl(45deg 100% 69%) */; border: 1px solid #E6B000 /* hsl(46deg 100% 45%) */; }
.orangeButton:hover { background: #EDC95E /* hsl(45deg 80% 65%)*/ }
.orangeButton:active { background: #D7B242 /*hsl(45deg 65% 55%)*/ }
.orangeButton .gf:first-child { padding-right: .6em;  transform: translateX(-.4em); }
.orangeButton .gf:last-child { padding-left: .7em; margin-right: -.4em;  }

.item {
    background: white;
    border: #aaa solid 1px;
    border-radius: 0.3em;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.item:hover { background: #efefef }
.item:active { background: #bbb }
.selectedItem { background: #e3e3e3; border-color: #888 }
.selectedItem:hover { background: #cfcfcf }



.sheet { background:white;box-shadow:#0005 0px 1px 5px }

@media screen and (max-width: 400px) {
    .backButton, .forwardButton, .orangeButton, .redButton, .greenButton { font-size: 1em }
}


.pi-w { /* profilkép wrappere */
	position:relative;
	width:9em;height:9em;
	margin:1em;
}
.pi-k { /* profilkép külső kerete */
    transform:scale(1.1);
    background:rgba(0,0,0,.2);
}
.pi-b { /* profilkép belső kerete */
    transform:scale(1.08);
    background:#f9f9f9;
}
.pi-hb { /* hitbox */
    transform:scale(1.15);
}
.pi-f { /* fade (sötétítő mouse hoverhez) */
    transition: background-color ease .1s;
    background-color: #0000;
}
.pi-f:has(+ .pi-hb:hover) {
    background-color: #0001;
}
.pi-f:has(+ .pi-hb:active) {
    background-color: #0002;
}
.pi-k, .pi-b, .pi-i, .pi-hb, .pi-f {
	clip-path: polygon(100% 50%, 100% 56.6%, 100% 59.3%, 100% 61.4%, 99.9% 63.2%, 99.9% 64.8%, 99.9% 66.2%, 99.8% 67.5%, 99.8% 68.7%, 99.7% 69.8%, 99.6% 70.8%, 99.5% 71.8%, 99.5% 72.8%, 99.4% 73.7%, 99.3% 74.6%, 99.1% 75.4%, 99% 76.3%, 98.9% 77%, 98.8% 77.8%, 98.6% 78.5%, 98.5% 79.2%, 98.3% 79.9%, 98.1% 80.6%, 98% 81.3%, 97.8% 81.9%, 97.6% 82.5%, 97.4% 83.1%, 97.2% 83.7%, 97% 84.3%, 96.8% 84.8%, 96.5% 85.4%, 96.3% 85.9%, 96% 86.4%, 95.8% 86.9%, 95.5% 87.4%, 95.3% 87.9%, 95% 88.3%, 94.7% 88.8%, 94.4% 89.2%, 94.1% 89.7%, 93.8% 90.1%, 93.4% 90.5%, 93.1% 90.9%, 92.8% 91.3%, 92.4% 91.7%, 92% 92%, 91.7% 92.4%, 91.3% 92.8%, 90.9% 93.1%, 90.5% 93.4%, 90.1% 93.8%, 89.7% 94.1%, 89.2% 94.4%, 88.8% 94.7%, 88.3% 95%, 87.9% 95.3%, 87.4% 95.5%, 86.9% 95.8%, 86.4% 96%, 85.9% 96.3%, 85.4% 96.5%, 84.8% 96.8%, 84.3% 97%, 83.7% 97.2%, 83.1% 97.4%, 82.5% 97.6%, 81.9% 97.8%, 81.3% 98%, 80.6% 98.1%, 79.9% 98.3%, 79.2% 98.5%, 78.5% 98.6%, 77.8% 98.8%, 77% 98.9%, 76.3% 99%, 75.4% 99.1%, 74.6% 99.3%, 73.7% 99.4%, 72.8% 99.5%, 71.8% 99.5%, 70.8% 99.6%, 69.8% 99.7%, 68.7% 99.8%, 67.5% 99.8%, 66.2% 99.9%, 64.8% 99.9%, 63.2% 99.9%, 61.4% 100%, 59.3% 100%, 56.6% 100%, 50% 100%, 43.4% 100%, 40.7% 100%, 38.6% 100%, 36.8% 99.9%, 35.2% 99.9%, 33.8% 99.9%, 32.5% 99.8%, 31.3% 99.8%, 30.2% 99.7%, 29.2% 99.6%, 28.2% 99.5%, 27.2% 99.5%, 26.3% 99.4%, 25.4% 99.3%, 24.6% 99.1%, 23.7% 99%, 23% 98.9%, 22.2% 98.8%, 21.5% 98.6%, 20.8% 98.5%, 20.1% 98.3%, 19.4% 98.1%, 18.7% 98%, 18.1% 97.8%, 17.5% 97.6%, 16.9% 97.4%, 16.3% 97.2%, 15.7% 97%, 15.2% 96.8%, 14.6% 96.5%, 14.1% 96.3%, 13.6% 96%, 13.1% 95.8%, 12.6% 95.5%, 12.1% 95.3%, 11.7% 95%, 11.2% 94.7%, 10.8% 94.4%, 10.3% 94.1%, 9.9% 93.8%, 9.5% 93.4%, 9.1% 93.1%, 8.7% 92.8%, 8.3% 92.4%, 8% 92%, 7.6% 91.7%, 7.2% 91.3%, 6.9% 90.9%, 6.6% 90.5%, 6.2% 90.1%, 5.9% 89.7%, 5.6% 89.2%, 5.3% 88.8%, 5% 88.3%, 4.7% 87.9%, 4.5% 87.4%, 4.2% 86.9%, 4% 86.4%, 3.7% 85.9%, 3.5% 85.4%, 3.2% 84.8%, 3% 84.3%, 2.8% 83.7%, 2.6% 83.1%, 2.4% 82.5%, 2.2% 81.9%, 2% 81.3%, 1.9% 80.6%, 1.7% 79.9%, 1.5% 79.2%, 1.4% 78.5%, 1.2% 77.8%, 1.1% 77%, 1% 76.3%, 0.9% 75.4%, 0.7% 74.6%, 0.6% 73.7%, 0.5% 72.8%, 0.5% 71.8%, 0.4% 70.8%, 0.3% 69.8%, 0.2% 68.7%, 0.2% 67.5%, 0.1% 66.2%, 0.1% 64.8%, 0.1% 63.2%, 0% 61.4%, 0% 59.3%, 0% 56.6%, 0% 50%, 0% 43.4%, 0% 40.7%, 0% 38.6%, 0.1% 36.8%, 0.1% 35.2%, 0.1% 33.8%, 0.2% 32.5%, 0.2% 31.3%, 0.3% 30.2%, 0.4% 29.2%, 0.5% 28.2%, 0.5% 27.2%, 0.6% 26.3%, 0.7% 25.4%, 0.9% 24.6%, 1% 23.7%, 1.1% 23%, 1.2% 22.2%, 1.4% 21.5%, 1.5% 20.8%, 1.7% 20.1%, 1.9% 19.4%, 2% 18.7%, 2.2% 18.1%, 2.4% 17.5%, 2.6% 16.9%, 2.8% 16.3%, 3% 15.7%, 3.2% 15.2%, 3.5% 14.6%, 3.7% 14.1%, 4% 13.6%, 4.2% 13.1%, 4.5% 12.6%, 4.7% 12.1%, 5% 11.7%, 5.3% 11.2%, 5.6% 10.8%, 5.9% 10.3%, 6.2% 9.9%, 6.6% 9.5%, 6.9% 9.1%, 7.2% 8.7%, 7.6% 8.3%, 8% 8%, 8.3% 7.6%, 8.7% 7.2%, 9.1% 6.9%, 9.5% 6.6%, 9.9% 6.2%, 10.3% 5.9%, 10.8% 5.6%, 11.2% 5.3%, 11.7% 5%, 12.1% 4.7%, 12.6% 4.5%, 13.1% 4.2%, 13.6% 4%, 14.1% 3.7%, 14.6% 3.5%, 15.2% 3.2%, 15.7% 3%, 16.3% 2.8%, 16.9% 2.6%, 17.5% 2.4%, 18.1% 2.2%, 18.7% 2%, 19.4% 1.9%, 20.1% 1.7%, 20.8% 1.5%, 21.5% 1.4%, 22.2% 1.2%, 23% 1.1%, 23.7% 1%, 24.6% 0.9%, 25.4% 0.7%, 26.3% 0.6%, 27.2% 0.5%, 28.2% 0.5%, 29.2% 0.4%, 30.2% 0.3%, 31.3% 0.2%, 32.5% 0.2%, 33.8% 0.1%, 35.2% 0.1%, 36.8% 0.1%, 38.6% 0%, 40.7% 0%, 43.4% 0%, 50% 0%, 56.6% 0%, 59.3% 0%, 61.4% 0%, 63.2% 0.1%, 64.8% 0.1%, 66.2% 0.1%, 67.5% 0.2%, 68.7% 0.2%, 69.8% 0.3%, 70.8% 0.4%, 71.8% 0.5%, 72.8% 0.5%, 73.7% 0.6%, 74.6% 0.7%, 75.4% 0.9%, 76.3% 1%, 77% 1.1%, 77.8% 1.2%, 78.5% 1.4%, 79.2% 1.5%, 79.9% 1.7%, 80.6% 1.9%, 81.3% 2%, 81.9% 2.2%, 82.5% 2.4%, 83.1% 2.6%, 83.7% 2.8%, 84.3% 3%, 84.8% 3.2%, 85.4% 3.5%, 85.9% 3.7%, 86.4% 4%, 86.9% 4.2%, 87.4% 4.5%, 87.9% 4.7%, 88.3% 5%, 88.8% 5.3%, 89.2% 5.6%, 89.7% 5.9%, 90.1% 6.2%, 90.5% 6.6%, 90.9% 6.9%, 91.3% 7.2%, 91.7% 7.6%, 92% 8%, 92.4% 8.3%, 92.8% 8.7%, 93.1% 9.1%, 93.4% 9.5%, 93.8% 9.9%, 94.1% 10.3%, 94.4% 10.8%, 94.7% 11.2%, 95% 11.7%, 95.3% 12.1%, 95.5% 12.6%, 95.8% 13.1%, 96% 13.6%, 96.3% 14.1%, 96.5% 14.6%, 96.8% 15.2%, 97% 15.7%, 97.2% 16.3%, 97.4% 16.9%, 97.6% 17.5%, 97.8% 18.1%, 98% 18.7%, 98.1% 19.4%, 98.3% 20.1%, 98.5% 20.8%, 98.6% 21.5%, 98.8% 22.2%, 98.9% 23%, 99% 23.7%, 99.1% 24.6%, 99.3% 25.4%, 99.4% 26.3%, 99.5% 27.2%, 99.5% 28.2%, 99.6% 29.2%, 99.7% 30.2%, 99.8% 31.3%, 99.8% 32.5%, 99.9% 33.8%, 99.9% 35.2%, 99.9% 36.8%, 100% 38.6%, 100% 40.7%, 100% 43.4%);
	position:absolute;left:0px;top:0px;right:0px;bottom:0px;
	width:100%;height:100%;

	/* itt az important azért kell, mert az elem background CSS property-t kap, nem background-image-et */
	/* majd meg kéne csinálni, hogy background-image-et kapjon, és akkor nem kéne ide az !important */
	background-position:center !important;background-size:cover !important;
}


#csContent { position: relative; }

/* StartPage2 */
#dialogTitle { font-size: 1.2em; white-space: nowrap; font-weight: bold; }
.dialogOKButton { font-size: 1.2em; background: green; color: white; padding: .5em 1em; border-radius: .3em;
                  transition: background-color .1s linear; cursor: pointer; }
.dialogOKButton:hover { background: #0a0; }
.dialogOKButton:active { background: #070;}
.dialog { background: white; padding: 1em; border-radius: .5em; box-shadow: #0004 0px 1px 4px 1px; }
#dialogWrapper { background: #0004; opacity: 0; pointer-events: none; transition: opacity .1s linear; }
#dialogWrapper.shown { opacity: 1; pointer-events: all; }
.startButtons {width: 70%}

.bigButton, .signInWithGoogleButton, .signInWithFacebookButton {
    transition: background-color 0.05s ease-in-out,box-shadow 0.05s ease-in-out;
    cursor: pointer;
}

.bigButton {border-radius: .3em; padding: 1em 1em 1.1em 1em; }
.bigButton .gf {padding-right: .3em; font-size: 1.2em}
.bigButton .caption {color: white; font-size: 1.3em}
.signInWithGoogleButton, .signInWithFacebookButton {color: white; font-size: 1.1em}
.bigButton .desc {font-size:.9em; text-align: center; }

.startGameButton, .signInButton { background-color: #E8951F; }
.startGameButton:hover, .signInButton:hover { background-color: #cc821b; }
.startGameButton:active, .signInButton:active { background-color: #cb720b; }
.startGameButton .desc, .signInButton .desc { color: #FFDCA8; }
.playAsGuestButton { background-color: #b5b300; }
.playAsGuestButton:hover { background-color: #a7a500; }
.playAsGuestButton .desc { color: #efee78; }
.playAsGuestButton .gf {transform: translateY(-0.05em)}
.practiceButton { background-color: #3373bb; }
.practiceButton:hover { background-color: #2b62a1; }
.practiceButton .desc { color: #59a9e4; }

.signInWithGoogleButton, .signInWithFacebookButton {padding: 3px; border-radius: .3em}
.signInWithGoogleButton { background-color: #4285F4; }
.signInWithGoogleButton:hover { background-color: #3770cc; }
.signInWithFacebookButton { background-color: #4267b2; }
.signInWithFacebookButton:hover { background-color: #395999; }

.cookiesNotWorkingContainer, .demeritWarning {
    background-color: #ffc;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-radius: 1em;
    color: #0C5A8D;
    font-size: .9em;
}
.demeritWarning {
    margin: 2em 2em 0 2em;
    width: calc(100% - 4em);
    border: 1px solid #dda;
    padding: 1em;
}
.warningIcon { font-size: 2em; color: #e8a446; padding: 1em }
/* most demeritnél fent van a warning jelzés, cookiewarningnál meg lent.
   ez értelmetlen, el kéne dönteni hogy hol legyen (egységesen). */
.demeritWarning .warningIcon { padding: .1em .4em 0 0; }
.cookiesRequiredTitle { font-weight: bold; text-align: left; padding-bottom: .5em }
.enableCookiesLink > pre { text-decoration: underline; }

.cookieIcon { color: #e19b05; font-size: 2em; transform: translateY(-.09em); }
.cookieText { color: #b0490b; text-decoration: underline; font-weight: bold; }
.cookieTextContainer {padding-top: .5em}
.respectUA {height:20px; font-weight:500; color:white;text-shadow: 1px 1px #000; text-align:center; font-size:120%; background: rgb(0,87,183);
                       background: linear-gradient(rgba(0,87,183,1) 0%, rgba(0,87,183,1) 49%, rgba(255,215,0,1) 50%, rgba(255,215,0,1) 100%);}

textarea[name=replyContentField] { height: 14em }

/* Frame */
.navHeader, .newHeader {
    border-bottom: 2px solid #000;
    background: linear-gradient(180deg, rgba(232, 240, 253, 0.40) 0%, rgba(149, 184, 233, 0.40) 4.5%, rgba(99, 118, 156, 0.40) 9.5%, rgba(86, 112, 147, 0.40) 74.5%, rgba(29, 38, 49, 0.40) 100%), #9C2B2B;
}
.navHeader > * { position: relative;}
.navHeader > :first-child { z-index: 2; }

.navHeaderTopBar {
  height: 5.5em;
}
.navPath { color: white; }
.navPath a {color: inherit; text-decoration: underline; }

.pathAndTitle { padding: .8em 1em .8em 2.2em; }
.pageTitle { font-size: 1.55em; color: white; font-weight: bold; padding-top: .5em }

.navHeaderExtra { z-index: 0;}

.navQuickLinks {
    color: white;
    margin-bottom: .8em;
    font: sans-serif 13px;
    margin-right: -3em;
}
.navQuickLinks > a {
    color: white;
}

.newHeader { border-bottom: 1px solid #aaa; color: #F8EBEB;}
.ndHeaderPi { padding: 0 .8em 0 1.4em }
.ndHeaderPi .pi-w { margin: 0}
.newHeader .pi-w { width: 2em; height: 2em; }

@media screen and (min-width: 600px) {
    .newHeader .pi-w { width: 3em; height: 3em; }
    .ndHeaderPi { padding: 0 .8em 0 1.4em }
}

.fodLogo-0 {
    background:url(//www.flyordie.com/images/logo01.png);
    background-size: 90%;
    background-position: 70% 70%;
    background-repeat: no-repeat;
    width: 200px;
}
.fodLogo-1, .fodLogo-3 { padding-left: 1em; width: 200px; margin-right: 2em;  pointer-events: none;  }
.fodLogo-2 { padding-left: 1em; width: 200px; pointer-events: none; }

@media screen and (max-width: 839.98px) {
    .fodLogo-0, .fodLogo-1, .fodLogo-2, .fodLogo-3 { width: 150px; padding-left: 0; margin-left: 0.3em;}
    .fodLogo-1, .fodLogo-2, .fodLogo-3 { height: 53px; /* Safariban nem működik object-en height:100% (2024-11) */ }
    .fodLogo-1 { transform: translateY(-2px);}
}
@media screen and (min-width: 840px) {
    .fodLogo-1, .fodLogo-2, .fodLogo-3 { height: 71px; /* Safariban nem működik object-en height:100% (2024-11) */ }
}

.flag2 {margin: .6em }

.headerSignInButton {
    border-radius: 5px;
    border: 1px solid #000;
    background: linear-gradient(0deg, rgba(138, 185, 219, 0.23) 0%, rgba(138, 185, 219, 0.23) 100%), linear-gradient(180deg, #FFF 0%, #BDBDBD 100%);

    color: #000;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    font-family: "Roboto Condensed";
    /*font-size: 1.14286rem;*/
    font-style: normal;
    font-weight: 500;
    padding: .4em .5em;
    min-width: 90px;

    font-size: 16px;
    text-align: center;
    margin-right: 18px;
}


/*
.siteLogin-picture {width: 2em; height: 2em}
.siteLogin-container {margin-right: 1em}
.siteLogin-username {color: white; padding-left: .7em}
*/

.searchPlayerTextField {
    border-radius: 30px;
    background: #E4CDCD;
    color: #734;
    padding: 5px .3em 4px calc(2.5em + 5px);
    height: auto;
    border-radius: 2em;
    font-size: 1.2em;
    font-weight: bold;
}
.searchPlayerTextFieldSpacer { width: 10%; }
@media screen and (min-width: 840px) and (max-width: 940px) { .searchPlayerTextFieldSpacer { width: 0%; } }
.searchFieldWrapper {
    padding: .5em .5em;
    width: 85%;
    max-width: 20em;
}
.searchIcon {
    padding-left: 1em;
    color: #824856;
    opacity: 0.5;
    font-size: 1.4em;
}
.searchPlayerTextField::placeholder {
    color: #844857;
    text-align: left;
    font-family: "Roboto Condensed";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 110% */
}


.footer { border-top: 2px solid #741E1E; padding-top: 1.25em }
.footerLinks a { padding: 0 .5em }
.copyrightText { padding-top: 1.25em; }
.footer a { text-decoration: underline }


#navDrawer .flag2 {
    width: 1.5em !important;
    height: 1em !important;
    margin: 0;
    margin-right: -.3em;
    transform: translateX(-.2em);
}

#languageSelector {
    position: fixed;
    display: none;
    background: #502C4C;
    pointer-events: all;
    z-index: 3;
    bottom: auto;
    min-height: 100%;
}
@media screen and (min-width: 600px) {
    #languageSelector {
        background: rgba(0, 0, 0, .4);
        /* figma szerint alpha .25, de az szerintem kevés, mert sötét lett a nyelvválasztó */
    }
    .languageSelectorDialog{
        border-radius: 20px;
        background: #2C5274;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

        width:50%;
    }
    .languageSelectorHCenter { height: 50% }
}
#languageSelector.languageSelectorOpen { display: block !important; }
#languageSelector .navDrawerClose { color: white }
.languageSelectorRow { table-layout: fixed; padding: 0 .5em; border-spacing: 1em 0; }
.languageTile {color: #E5CFE2; padding: .5em; cursor: pointer;}
.languageSelectorHeading { color: white; padding: 1em; font-size: 1.3em}
.languageTile-langInItself { font-weight: bold }
.languageTile-selected {
    border-radius: 0.35714rem;
    border: 1px solid #D2BBCF;
    background: rgba(255, 255, 255, 0.05);
    padding: .7em;
}
.languageTile:hover {background:rgba(255, 255, 255, 0.03)}
.languageTile:active {background:rgba(255, 255, 255, 0.07)}

.navDrawerItem { padding: 0 1em; height: 36px; line-height: 36px; color: #000; }
.navDrawerItem[href], .navDrawerItem[onclick] { cursor: pointer; }
#navDrawer .navDrawerItem { text-transform: uppercase;}
.navDrawerClose { padding: 1em; font-size: 1.3em; }
/*#languageSelector navDrawerClose { padding: 1.5em }*/
.navDrawerItem[href]:hover, .navDrawerItem[onclick]:hover { background: #0001 }
.navDrawerItem[href]:active, .navDrawerItem[onclick]:active { background: #0003 }
.navDrawerItemText { padding-left: 1em; }

.languageSelectorDivider {
    padding-top: 1em;
    border-bottom: 1px solid #D2BBCF;
    margin-left: 1.5em;
    margin-right: -4em;
    margin-bottom: .5em;
    width: calc(100% - 3em);
}

.header-nick, .header-rating {
    text-align: right;
    transform: translateX(.7em);
    padding-left: .2em;
}
.header-nick { font-style: italic; }
.header-fullscreen-btn { font-size: 1.7em; padding-left: .5em }
.newHeader:not(.newHeader-game) .header-fullscreen-btn { display: none }
.newHeader:not(.newHeader-game) .fodTitle-onlyOnGame { display: none }
.newHeader-game .fodTitle-normal { display: none }

.newHeader .popup-menu { text-shadow: none; transform: translateX(.6em)}
@media screen and (min-width: 600px) {
    .newHeader .popup-menu { text-shadow: none; transform: translate(.5em, -.2em)}
}
.profileMenu-nickname {
    font-weight: bold;
    font-size: 1.2em;
    color: black;
    text-align: center;
    padding: .5em .3em .3em .3em;
}


/* 839.99 lett volna, de Chrome azt felfelé kerekíti és 800-nak értelmezi, ezért egyszerre használta volna a 840px-re
   vonatkozó rule-okat és ezeket */
@media screen and (max-width: 839.98px) {
	.navQuickLinks, .navPath {display:none}
	.sheet { width: 100%; /*margin-bottom: 8em; 2024-04 előtt volt bottombar, ahhoz kellett */}
	.navHeaderTopBar {height: 5em;}
    .fodLogo { background-size: 15.75em; width: 13.5em; height: 4.5em; margin: .3em 0 0 0; }
    .siteLogin-signInLink{color:white; font-size: 1.6em;}
    .hf-rightbtn .flag2 { display:none}
    .pageTitle { padding: 0; vertical-align: center}
    .pathAndTitle { padding: 0 0 0 1em }
    .hamburger { color: white; padding: 0 1.5em; }
    .hamburger:hover { color: white; padding: 0 1.5em; background: #0001 }
    .hamburger:active { color: white; padding: 0 1.5em; background: #0003 }
    .footer { border-top: 2px solid #663829;background: #9C6451;color: white;padding: 1em 1em 1.2em 1em; font-size: .9em}
    .footer a { color: white}
    .copyrightLine1 {display:block;margin-bottom:.2em}
    .navHeader {border-bottom: none;box-shadow:0 0 1em rgb(0 0 0 / 50%); position: fixed; z-index: 1;  background: #50a8f7;}
    .fodLogo {
        margin-left: 1em;
    }
    .hf-vtopOnDesktop { height: 100%; }

    .searchFieldWrapper {  width: 100%; margin-left: .5em; }

    .hf-tabs/*, .hf-formbuttons */{
        position: fixed;
        bottom: 0px;
        left: 0px;
        right: 0px;
        width:100%;
        height: 6em;
    }
    /*
    .hf-formbuttons { top: 5em; height: calc(100% - 11em); padding: 2em; } /* kéne valami árnyék, ha a tartalom alálóg */
    .hf-tabs { background: white; box-shadow:0 0 1em rgb(0 0 0 / 30%); }
    .hf-tabbtn {
        color: white;
        line-height: 2.66em;
        padding: 0 .4em;
        text-align: center;
        color: #aaa;
        font-size: 1.2em;
    }
    .hf-tabbtn .pi-w { margin-top: .4em; margin-bottom: .6em; }

    /* széleken lévő gombok úgy tűnnek, mintha nem lenne egyenlő a méretük a többivel, ezt ellensúlyozzuk egy kicsit */
    .hf-tabbtn:first-child { padding: 0 .3em 0 .9em;}
    .hf-tabbtn:last-child { padding: 0 .9em 0 .3em;}

    .hf-tabbtn-active { color: #333; }
    .hf-tabbtn .gf {font-size: 1.4em; margin-top: .2em; }
    .hf-tabbtn-text {margin-top: -1em}
    .hpdlg-title { font-size: 1.5em; padding-top: 1.5em; padding-bottom: .5em;  font-weight: bold }
    .hpdlg-title-wide { text-align: center; }

    .hf-tabs { display: none; /* Ix-ék ápr16 körül elvetették az alsó navigációs sort */ }
    .newHeader {
        position: fixed;
        z-index: 3;
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: linear-gradient(180deg, rgba(232, 240, 253, 0.40) 0%, rgba(149, 184, 233, 0.40) 4.5%, rgba(99, 118,
        156, 0.40) 9.5%, rgba(86, 112, 147, 0.40) 74.5%, rgba(29, 38, 49, 0.40) 100%), hsl(211deg, 100%, 36%);
        background-color: #9C2B2B;
        height: 3.5em;
        font-size: 1.2em;
    }

    html[data-is-safari] .ndHeaderPi { transform: translateY(3px); }

    /*
    .hf-tabs { table-layout: fixed; }
    .headerButton { padding: 0 1.5em; color: #95B8E9;}
    */
    .headerButton { cursor: pointer }
    .headerButton:not(a):active {
        background: #0003;
    }

    .fodTitle { font-weight: 700; color: inherit}
    #navDrawerWrapper {
        z-index: 3 /* különben header eltakarná a tetejét */;

        position: fixed;
        left: 0;right:0;top:0;bottom:0;
        pointer-events: none;
        transition: background-color .1s linear;
        display: block;
    }
    .body-navDrawerOpen { overflow: hidden }
    #navDrawer {
        background: #B9D1F2;
        padding: .5em 0;
        transition: transform .2s ease;
        transform: translateX(-100%);
    }
    #navDrawerWrapper.navDrawerWrapperOpen { opacity: 1; pointer-events: all; background-color: #0007;}
    .navDrawerWrapperOpen #navDrawer {
        transform: translateX(0);
        box-shadow: 0 0 5px 0 #0005;
    }

    .hf-tabbtn {
        border: 1px solid rgba(0, 0, 0, 0.20);
        /*background: linear-gradient(180deg, rgba(232, 240, 253, 0.40) 0%, rgba(149, 184, 233, 0.40) 4.5%, rgba(99,
        118, 156, 0.40) 9.5%, rgba(64, 80, 102, 0.40) 74.5%, rgba(29, 38, 49, 0.40) 100%), #3C4960;*/
    }
    .newHeader .fodLogo { display:none }
}
@media screen and (min-width: 600px) and (max-width: 839.98px) {
    .newHeader .searchFieldWrapper { font-size: .6em; }
    .newHeader .searchPlayerTextField { color: black }
    .newHeader .searchPlayerTextField::placeholder { font-size: 15px }
}
@media screen and (max-width: 599.98px) {
    .newHeader .searchFieldWrapper { display: none }
}
@media screen and (max-width: 399.99px) {
    .hf-tabs { font-size: .8em; height: 7em !important; }
}
@media screen and (min-width: 840px) {
    .copyrightLine1 {margin-right:.3em}
    .sheet {margin-bottom: 2em}
    .sheet-nobottommargin { margin-bottom: 0 }

    .hf-tabbtn-active { background: #1113; }
    .hf-tabbtn:not(.hf-tabbtn-active):hover, .hf-rightbtn:hover { background: #0000001D;}
    .hf-tabbtn:active, .hf-tabbtn:not(.hf-tabbtn-active):active { background: #0004;}
    .hf-tabbtn .gf { color: #F8EBEB; font-size: 22px; }
    .hf-tabbtn { color: #F8EBEB; padding: .5em 1em; min-width: 5em }
    .hf-tabbtn-text {
        padding-top: 0;

        color: #F8EBEB;
        text-align: center;
        font-family: "Roboto Condensed";
        font-size: 15px; /* 16.995px volt Figma szerint, de legyen kicsit kisebb, mert túl nagynak látszódik */
        font-style: normal;
        font-weight: 400;
        line-height: 18.651px; /* 110% */
    }
    .newHeader .pi-c { padding: 0;}
    .newHeader .pi-w { margin: 0; margin-top: -.2em !important }
    .hf-rightbtn .flag2 { margin: 0; width: 45px; height: 30px;}
    .hf-rightbtn .gf { font-size: 1.9em; color: #ddf}
    .hf-rightbtn { padding: 0 1.1em }
    .hf-rightbtn:last-child { padding-right: 1.3em }
    .fodLogo { transform: translateX(1em); } /* árnyék miatt */

    .copyrightLine1 {margin-right:.3em}
    body[data-s="homepage_newheader"] .sheet {margin-bottom: 2em}
    body[data-s="homepage_newheader"] .sheet-nobottommargin { margin-bottom: 0 }
    .hpdlg {
        /*border: 1px solid #ccd;*/
        /*box-shadow: 0 0 4px #0002;*/
        /*margin-top: 6em; margin-bottom: 4em; border-radius: 5px;
        background: #fff;*/
        margin-top: 1em;
    }
    .hpdlg-title {
        font-size: 1.5em;
        padding-top: 1em;
        padding-bottom: .5em;
        color: #222;
        /*border-bottom: 1px solid #ccd;*/
        font-weight: bold ;
    }
    .hpdlg-title-wide { text-align: center; border-bottom: 1px solid #ccc; /* kicsit halványabb, mint felül */}

    .hf-formbuttons { padding: 0 1em; /* hogy kiegyensúlyozzuk a form táblázat border-spacingjét */ }

    #navDrawerWrapper:not(.navDrawerWrapper-navDrawerInPage), #languageSelector { display: none; }

    .footer { background: #814856; padding-bottom: 2em; padding-top: 2em}
    .footerLinks a, .copyrightText, .copyrightText a {
        color: #D3D3D3;
        text-align: center;
        font-family: "Roboto Condensed";
        /*font-size: 19px;*/
        font-style: normal;
        font-weight: 500;
        line-height: normal;

        font-size: 16px;
    }
    .footerLinks a {text-decoration-line: underline; }
}

.topButton {
    font-size: 1.5em;
    color: white;
    line-height: 2.66em;
    padding: 0 .85em;
    text-align: center;
}
.hf-tabbtn:active {background: #0002}
.screenshots *:nth-child(3)>img {display:none}


.topButton  img {
    background: white;
    padding: .1em;
    width: 1.2em;
}

.tbimg {
    width: 1.4em;
    height: 1.4em;
    border-radius: .2em;
}
.tbimg-wrapper {
    background: white;
    padding: 2px 1px 2px 2px;
    border-radius: .2em;
}

.tab-headers-TOP > .tab-header {
    background: #C4AA77 !important; /* TODO szedjük ki a default kéket a kódból, és akkor nem kell ide az !important */
    border: 1px solid #887249;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border-bottom: none;
}
.tab-headers-TOP { gap: 1em;}
.tabbed-pane-content {
    background: #FFFFFF7F;
}
.tabbed-pane-content:not(.tabbed-pane-content-BOTTOM) {
    border-radius: 0 0 1em 1em;
}

.elevatedButton {
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.20);
    background: linear-gradient(180deg, rgba(232, 240, 253, 0.20) 0%, rgba(149, 184, 233, 0.20) 4.5%, rgba(99, 118, 156, 0.20) 9.5%, rgba(64, 80, 102, 0.20) 74.5%, rgba(29, 38, 49, 0.20) 100%), #AB76E1;
    padding: 8px 13px;
    cursor: pointer;
}
.elevatedButton:hover {
    background: linear-gradient(to bottom, #FFFFFF15, #FFFFFF15),
                linear-gradient(180deg, rgba(232, 240, 253, 0.20) 0%, rgba(149, 184, 233, 0.20) 4.5%, rgba(99, 118, 156, 0.20) 9.5%, rgba(64, 80, 102, 0.20) 74.5%, rgba(29, 38, 49, 0.20) 100%), #AB76E1;
}
.elevatedButton:active {
    background: linear-gradient(to bottom, #0002, #0002),
                linear-gradient(0deg, rgba(232, 240, 253, 0.10) 0%, rgba(149, 184, 233, 0.10) 4.5%, rgba(99, 118, 156, 0.10) 9.5%, rgba(64, 80, 102, 0.10) 74.5%, rgba(29, 38, 49, 0.10) 100%), #AB76E1;
}
.elevatedButtonText {
    color: #FFF;
    font-family: "Roboto Condensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 150% */
}

.oldtimer-sub-icon {
    width: 3.5em;
    /* settingsben van scale is beállítva rá */
}


.latestforumtopics-caption {
    color: #974A2F;
    font-family: "Roboto Condensed";
    font-size: 20px;
    padding-bottom: 12px;
}
.latestforumtopics-title {
    transform: translate(10px, -2px);
    font-weight: 500;
}
html[dir=RTL] .latestforumtopics-title {
    transform: translate(-10px, -2px);
}
.latestforumtopics-item {
    padding-left: 24px;
    line-height: 32px;
    cursor: pointer;
    color: #000;
}
.latestforumtopics-item:not(.latestforumtopics-item-last) {
    border-bottom: 1px dashed #B5ADAD;
}
.latestforumtopics-item:hover { background: #0001 }
.latestforumtopics-item:active { background: #00000026; }
.latestforumtopics-viewforum {
    color: #0D63C9;
    font-family: "Roboto Condensed";
    font-size: 16px;
    text-align: center;
    padding-top: 16px;
    text-decoration: underline;
}
.adPlaceholder { background: url(/image/noise.png); width: 300px; height: 600px; background-size: cover; }
.adPlaceholder728x90 { background: url(/image/noise.png); width: 728px; height: 90px; background-size: cover; }
.removeAdsButton {
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.20);
    background: linear-gradient(180deg, rgba(232, 240, 253, 0.20) 0%, rgba(149, 184, 233, 0.20) 4.5%, rgba(99, 118, 156, 0.20) 9.5%, rgba(64, 80, 102, 0.20) 74.5%, rgba(29, 38, 49, 0.20) 100%), #01AFFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 10px 11px;

    color: #FFFDFF;
    text-align: center;
    font-family: "Roboto Condensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}
.advertisementLabel {
    color: #707070;
    text-align: center;
    font-family: "Roboto Condensed";
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px; /* 215.385% */
    letter-spacing: 2.6px;
}