@font-face {
	font-family: 'gf';
		src: url('/static/font/ut8iiw.eot');
	    src: url('/static/font/ut8iiw.eot') format('embedded-opentype'),
		url('/static/font/ut8iiw.woff2') format('woff2'),
    	url('/static/font/ut8iiw.woff') format('woff'),
		url('/static/font/ut8iiw.ttf') format('truetype'),
		url('/static/font/ut8iiw.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;
}
body:not(.b2):not([data-s="iframe_include"]):not([data-s="iframe_include_lo"]), /* b2: body fill height */
body.F:not(.b2):not([data-s="iframe_include"]):not([data-s="iframe_include_lo"]) {
    /* hogy AdSense paddingja body-n működjön.
       ha height:100%, akkor kilóg a tartalom a body-ból, ha nagyobb mint az ablak magassága. */
    height: auto;
    min-height: 100%;
}
.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: 0; } /* hogy lehessen P classt használni háttérhez */
*:not(.PS) > .PS { position: relative; } /* PS: PassiveSize container */
*:not(.FG) > .xo { min-width: -webkit-max-content; min-width: max-content;  } /* .xo: Expand Outside konténer */
.FG > .xo, .Fs > .xo, .Fc > .xo, .Fe > .xo { min-height: -webkit-max-content; min-height: max-content; }
.Pv {position:absolute;left:0px;right:0px;width:100%}
.fl > * { display: inline-block }
.fl > .fl, .fl > .Ta { display: inline }
.gP, .gQ { display: grid } /* symmetric overlay parent vagy tényleges grid. gQ csak symmetric overlay parent lehet */
.gP { align-items: stretch; justify-items: stretch; }
.gQ:not(.oS) { grid-template-columns: 100%; grid-template-rows: 100%; } /* különben a child mérete túlcsordulhat */
/* .oS-nél túlcsordulhat, mert annak épp az a lényege hogy túlcsordul a tartalom.
   de majd meg kell csinálni hogy csak egyik irányban csordulhasson túl, ha csak egyik irányban van scrollozhatónak
   szánva a tartalom. */
.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>*, .wI, foreignObject.we>* {width:100%;height:100%;}
/* .wI = img in wrapper element. arra jó hogy lehessen Box-szal állítani kép szélességét/magasságát.
   .we>*-t próbáltam, de Align-t elrontja. .wi>img-nek meg túl nagy a specificitása.
   :where selector kéne, de az néhány régi böngészőn nincs.
   .wi már foglalt newFrame.css-ben, valszeg István-féle dialógusoknak valamelyik része, majd törölni kell. */

/* UA stylesheet valamiért overflow:hiddent állítbe */
foreignObject { overflow: visible }

.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:not([type=range]) {
    background: white;
    border: 1px solid #ccc;
	padding:calc(0.2em + 3px) calc(0.5em + 3px);/* 4px lenne, de Chrome inkonzisztensen kerekít */
	outline: transparent;
}

input.et {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;

    /* különben erőszakkal kiszélesíti a parentet, pl. csetben send-message-fieldben */
    min-width: 0;
}
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; }
}

.wc {
	position: fixed;
	left:0px; top:0px;
	width:100%;height:100%;
	z-index: 20; /* fod logó 10 */
}
.window-shade {
	left:0px; top:0px;
	width:100%;height:100%;
	transition: .4s ease opacity;
	opacity: 0;
	background-color: rgba(0,0,0,0.5);
}
.wc .window {transition: .4s ease opacity}
.loading-label {width:35em;height:10em}
.window {box-sizing:border-box}
.window * {box-sizing:border-box}



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"]):not([data-s="iframe_include"]):not([data-s="iframe_include_lo"])
{background:#71a7c4}

body[data-s="iframe_include"]:not(.fscl), body[data-s="iframe_include_lo"]:not(.fscl) {
    background: transparent;
}

.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: #7D354A;
}
.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;

    position: fixed;
    z-index: 3;
    border: 1px solid rgba(0, 0, 0, 0.20);
    box-shadow: 0px 1px 5px 0px #0006;
}
.f.newHeader {
    height: auto !important; /* position:fixed-del összekavarodik */
}
.header-profile-button-outer { padding-left: 4px; }
.header-profile-button-inner { padding: 0 8px 0 8px; }
.header-profile-button-inner .pi-w { margin: 0}
.newHeader .pi-w { width: 2em; height: 2em; }
.header-profile-button-inner:hover, .header-fullscreen-btn:hover { background: #0002 }
.header-profile-button-inner:active, .header-fullscreen-btn:active { background: #0004 }

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

.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;
}
.headerSignInButton:hover { background: linear-gradient(180deg, #FFF 0%, #BDBDBD 100%); }
.headerSignInButton:active {
    background: linear-gradient(0deg, rgba(138, 185, 219, 0.36) 0%, rgba(138, 185, 219, 0.36) 100%),
                linear-gradient(180deg, #FFF 30.33%, #BDBDBD 100%);
}


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

input.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 }
.footerLink { padding: 0 .5em; }
.copyrightText { padding-top: 16px; }
.footerFindUsOnSocialMedia { padding-top: 16px; }
.footerFindUsOnSocialMedia > * { vertical-align: middle; }
.footerFindUsOnSocialMediaLabel { padding-right: .5em; }
.footer a:not(.footerSocialMediaIcon):not(.footerLink) { text-decoration: underline }
.footer { background: #814856; padding-bottom: 24px; padding-top: 24px; }
.footerLink,
.copyrightText,
.copyrightText a,
.footerFindUsOnSocialMediaLabel {
    color: #D3D3D3;
    text-align: center;
    font-family: "Roboto Condensed";
    /*font-size: 19px;*/
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    font-size: 16px;
}
.copyrightText *:not(a[href]) > pre,
.copyrightText:not(a[href]) > pre {
    /* TODO ui4.css átállítja pre elemek fontfamily-jeit */
    font-family: "Roboto" !important;
}
.copyrightText a[href] > pre {
    font-family: "Roboto Condensed" !important;
    text-decoration: underline;
}

.footerLink {text-decoration: none; }
.footerLink:hover:not(.languageFooterLink) {text-decoration: underline; }
.languageFooterLink {
    cursor: pointer;
}
.languageFooterLinkText {
    padding-left: .3em;
    text-transform: uppercase;
}
.languageFooterLink:hover .languageFooterLinkText {
    text-decoration: underline;
}
.footerSocialMediaIcon {
    color: #D3D3D3;
    font-size: 24px;
    vertical-align: middle;
}
.copyrightText a[href] {
    text-decoration: none;
}
.footerLink:hover,
.copyrightText a[href]:hover {
    color: #EEE;
}
.footerSocialMediaIcon:hover {
    /* kicsit erősebb effekt mint sima lineknél, mert aláhúzás itt nem lehetséges,
       és kisebb terület */
    transform: scale(1.05);
    color: #F0F0F0;
}
.footerLink:active,
.footerSocialMediaIcon:active,
.copyrightText a[href]:active {
    color: #DFDFDF;
}

#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% }
}
@media screen and (max-width: 598.98px) {
    .languageSelectorVCenter > * { height: 100% }
    .languageSelectorHCenter > * { width: 100% }
}
#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;
    padding-right: 8px;
}
.header-nick { font-style: italic; }
.header-fullscreen-btn { font-size: 1.7em; padding: 0 8px; cursor: pointer; }
.newHeader:not(.newHeader-game) .header-fullscreen-btn,
.newHeader:not(.newHeader-game) .fodTitle-onlyOnGame,
.newHeader:not(.newHeader-game) .presenceIcon { display: none }
.newHeader-game .fodTitle-normal, .newHeader-game .searchFieldWrapper,
.newHeader-game .fodLogo-1, .newHeader-game .fodLogo-2, .newHeader-game .fodLogo-3 { display: none }

.presenceIcon { transform: translate(-5px, 0px); }

.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;
}

.presenceNotSelected svg { filter: brightness(0) invert(1) brightness(0.6); }
.profileMenu-myStatusMenuItem-icon {
    margin-right: -4px; /* szélesebb az ikon a többinél, ezért kevesebb hely kell az ikon és a szöveg között */
}






    html[data-isNDStyleWithoutNavigation] .navQuickLinks, html[data-isNDStyleWithoutNavigation] .navPath {display:none}
	html[data-isNDStyleWithoutNavigation] .sheet { width: 100%; /*margin-bottom: 8em; 2024-04 előtt volt bottombar, ahhoz kellett */}
	html[data-isNDStyleWithoutNavigation] .navHeaderTopBar {height: 5em;}
    html[data-isNDStyleWithoutNavigation] .fodLogo { background-size: 15.75em; width: 13.5em; height: 4.5em; margin: .3em 0 0 0; }
    html[data-isNDStyleWithoutNavigation] .siteLogin-signInLink{color:white; font-size: 1.6em;}
    html[data-isNDStyleWithoutNavigation] .pageTitle { padding: 0; vertical-align: center}
    html[data-isNDStyleWithoutNavigation] .pathAndTitle { padding: 0 0 0 1em }
    html[data-isNDStyleWithoutNavigation] .hamburger { color: white; padding: 0 1.5em; }
    html[data-isNDStyleWithoutNavigation] .hamburger:hover { color: white; padding: 0 1.5em; background: #0001 }
    html[data-isNDStyleWithoutNavigation] .hamburger:active { color: white; padding: 0 1.5em; background: #0003 }
    html[data-isNDStyleWithoutNavigation] .footer { border-top: 2px solid #663829;background: #9C6451;color: white;padding: 1em 1em 1.2em 1em; font-size: .9em}
    html[data-isNDStyleWithoutNavigation] .copyrightLine1 {display:block;margin-bottom:.2em}
    html[data-isNDStyleWithoutNavigation] .navHeader {border-bottom: none;box-shadow:0 0 1em rgb(0 0 0 / 50%); position: fixed; z-index: 1;  background: #50a8f7;}
    html[data-isNDStyleWithoutNavigation] .fodLogo {
        margin-left: 1em;
    }
    html[data-isNDStyleWithoutNavigation] .hf-vtopOnDesktop { height: 100%; }

    html[data-isNDStyleWithoutNavigation] .searchFieldWrapper {  width: 100%; margin-left: .5em; }

    html[data-isNDStyleWithoutNavigation] .hf-tabs/*, html[data-isNDStyleWithoutNavigation] .hf-formbuttons */{
        position: fixed;
        bottom: 0px;
        left: 0px;
        right: 0px;
        width:100%;
        height: 6em;
    }
    /*
    html[data-isNDStyleWithoutNavigation] .hf-formbuttons { top: 5em; height: calc(100% - 11em); padding: 2em; } /* kéne valami árnyék, ha a tartalom alálóg */
    html[data-isNDStyleWithoutNavigation] .hf-tabs { background: white; box-shadow:0 0 1em rgb(0 0 0 / 30%); }
    html[data-isNDStyleWithoutNavigation] .hf-tabbtn {
        color: white;
        line-height: 2.66em;
        padding: 0 .4em;
        text-align: center;
        color: #aaa;
        font-size: 1.2em;
    }
    html[data-isNDStyleWithoutNavigation] .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 */
    html[data-isNDStyleWithoutNavigation] .hf-tabbtn:first-child { padding: 0 .3em 0 .9em;}
    html[data-isNDStyleWithoutNavigation] .hf-tabbtn:last-child { padding: 0 .9em 0 .3em;}

    html[data-isNDStyleWithoutNavigation] .hf-tabbtn-active { color: #333; }
    html[data-isNDStyleWithoutNavigation] .hf-tabbtn .gf {font-size: 1.4em; margin-top: .2em; }
    html[data-isNDStyleWithoutNavigation] .hf-tabbtn-text {margin-top: -1em}

    html[data-isNDStyleWithoutNavigation] .hf-tabs { display: none; /* Ix-ék ápr16 körül elvetették az alsó navigációs sort */ }
    html[data-isNDStyleWithoutNavigation] .newHeader {
        height: 3.5em;
        font-size: 1.2em;
    }
    html[data-isNDStyleWithoutNavigation] .f.newHeader {
        height: 3.5em !important;
    }
    html[data-isNDStyleWithoutNavigation] .header2Size {
        height: 3.5em;
    }

    
    html[data-isNDStyleWithoutNavigation][data-is-safari] .header-profile-button-outer { transform: translateY(3px); }
    
    


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

    html[data-isNDStyleWithoutNavigation] .fodTitle { font-weight: 700; color: inherit}
    html[data-isNDStyleWithoutNavigation] #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;
    }
    html[data-isNDStyleWithoutNavigation] .body-navDrawerOpen { overflow: hidden }
    html[data-isNDStyleWithoutNavigation] #navDrawer {
        background: #B9D1F2;
        padding: .5em 0 32px 0; /* reklám miatt kell alulra több hely */
        transition: transform .2s ease;
        transform: translateX(-100%);
    }
    html[data-isNDStyleWithoutNavigation] #navDrawerWrapper.navDrawerWrapperOpen { opacity: 1; pointer-events: all; background-color: #0007;}
    html[data-isNDStyleWithoutNavigation] .navDrawerWrapperOpen #navDrawer {
        transform: translateX(0);
        box-shadow: 0 0 5px 0 #0005;
    }

    html[data-isNDStyleWithoutNavigation] .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;*/
    }
    html[data-isNDStyleWithoutNavigation] .newHeader .fodLogo { display:none }

    html[data-isNDStyleWithoutNavigation] .newHeader .fodTitle { font-size: 1.2em; }
    html[data-isNDStyleWithoutNavigation] .headerButton { padding: 0 .9em; color: inherit; font-size: 1.2em;}

    /* tableten ne legyen keresés, ha nincs hamburgermenü */
    html[data-isNDStyleWithoutNavigation] .newHeader-backButtonOnHeader .searchFieldWrapper { display: none }


/* 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;}
     .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}
     .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}

     .hf-tabs { display: none; /* Ix-ék ápr16 körül elvetették az alsó navigációs sort */ }
     .newHeader {
        height: 3.5em;
        font-size: 1.2em;
    }
     .f.newHeader {
        height: 3.5em !important;
    }
     .header2Size {
        height: 3.5em;
    }

    
    
    html[data-is-safari] .header-profile-button-outer { 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 32px 0; /* reklám miatt kell alulra több hely */
        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 }

     .newHeader .fodTitle { font-size: 1.2em; }
     .headerButton { padding: 0 .9em; color: inherit; font-size: 1.2em;}

    /* tableten ne legyen keresés, ha nincs hamburgermenü */
     .newHeader-backButtonOnHeader .searchFieldWrapper { display: none }


     .hpdlg-title { font-size: 20px; padding-top: 8px; padding-bottom: 8px;  font-weight: bold }
     .hpdlg-title-wide { text-align: center; }
}
@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) {
    html:not([data-isNDStyleWithoutNavigation]) .copyrightLine1 {margin-right:.3em}
    html:not([data-isNDStyleWithoutNavigation]) .sheet {margin-bottom: 2em}
    html:not([data-isNDStyleWithoutNavigation]) .sheet-nobottommargin { margin-bottom: 0 }

    html:not([data-isNDStyleWithoutNavigation]) .hf-tabbtn-active { background: #1113; }
    html:not([data-isNDStyleWithoutNavigation]) .hf-tabbtn:not(.hf-tabbtn-active):hover,
    html:not([data-isNDStyleWithoutNavigation]) .hf-tabbtn:active,
    html:not([data-isNDStyleWithoutNavigation]) .hf-tabbtn:not(.hf-tabbtn-active):active { background: #0004;}
    html:not([data-isNDStyleWithoutNavigation]) .hf-tabbtn .gf { color: #F8EBEB; font-size: 22px; }
    html:not([data-isNDStyleWithoutNavigation]) .hf-tabbtn { color: #F8EBEB; padding: calc(.5em + 2px) 1em .5em 1em; min-width: 5em }
    html:not([data-isNDStyleWithoutNavigation]) .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% */
    }
    html:not([data-isNDStyleWithoutNavigation]) .newHeader .pi-c { padding: 0;}
    html:not([data-isNDStyleWithoutNavigation]) .newHeader .pi-w { margin: 0; margin-top: -.2em !important }
    html:not([data-isNDStyleWithoutNavigation]) .fodLogo { transform: translateX(1em); } /* árnyék miatt */

    html:not([data-isNDStyleWithoutNavigation]) .fodTitle { /* csak játék header esetén */
        color: #F8EBEB;
        text-align: center;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        font-family: "Roboto Condensed";
        font-size: 32px;
        font-style: normal;
        font-weight: 700;

        padding-left: 13px;
        padding-right: 5px;
    }
    html:not([data-isNDStyleWithoutNavigation]) .dragonInGameHeader { width: 44px; margin-right: 5em}

    html:not([data-isNDStyleWithoutNavigation]) .copyrightLine1 {margin-right:.3em}
    html:not([data-isNDStyleWithoutNavigation]) body[data-s="homepage_newheader"] .sheet {margin-bottom: 2em}
    html:not([data-isNDStyleWithoutNavigation]) body[data-s="homepage_newheader"] .sheet-nobottommargin { margin-bottom: 0 }

    /* hpdlg-knél szándékosan nincs desktopHeaderRulePrefix, mert azok nem a headerre vonatkoznak */
    .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 */}

    html:not([data-isNDStyleWithoutNavigation]) .hf-formbuttons { padding: 0 1em; /* hogy kiegyensúlyozzuk a form táblázat border-spacingjét */ }

    html:not([data-isNDStyleWithoutNavigation]) #navDrawerWrapper:not(.navDrawerWrapper-navDrawerInPage),
    html:not([data-isNDStyleWithoutNavigation]) #languageSelector { display: none; }

}
@media screen and (min-width: 600px) and (max-width: 839.98px) {
    .newHeader-game { height: 62px; }
    .newHeader-game .header2Size { height: 62px; }
    .newHeader-game .fodTitle {
        padding-right: 4px;
        font-size: 28px;
        font-weight: 500;

        color: #ACC9F2;
        text-align: center;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        font-family: "Roboto Condensed";
        font-style: normal;
    }
    .dragonInGameHeader { transform: translate(4px, 2px); }
    .newHeader-game .headerButton { font-size: 24px; color: #ACC9F2 !important; }
}

.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: 4px;
    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: 24px;
    letter-spacing: 2.6px;
}

.rci { transform: translateY(-1px); margin-left: 5px;} /* rating category icon */

.signOutSuccess-message {
    color: #000;
    text-align: center;
    font-family: "Roboto Condensed";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}
.signOutSuccess-readyToGetBack {
    color: #000;
    text-align: center;
    font-family: "Roboto Condensed";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
}


div, span {color:inherit;font-size:inherit}



html.nhp .headerWrapper {
    box-shadow: 0 0 1em rgba(0,0,0,0.5);
}



html:not(.nhp) .headerWrapper,
body[data-s="iframe_include"]) .headerWrapper,
body[data-s="iframe_include_lo"]) .headerWrapper { padding: 0 2em 0 1em; }

.nickname {
	height: 1.5em;
	line-height: 1.5em;
	font-size: 2em;
}

.amp { /* assistant moderator panel */
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-top: 1px solid #94B2C2;
    border-bottom: 1px solid #94B2C2;
    font-size: 0.85em;
}

.headerMainCell {white-space:nowrap}

.header .lastLoginLabel {padding-left:1em}
.calendarIcon, .oldtimerIcon, .header_lastLoginLabel {padding-right:.4em}
.calendarIcon {color:#bbb;font-size: 1.15em;padding-left:2px; padding-right: .5em}
.header_lastLoginLabel, .header_lastLogin {white-space:nowrap}
.g-ic {font-size:1.5em;padding-left:.3em;padding-right:.1em;color:#999}  /* gender icon */
.pi-closeIcon { color: white; font-size: 2.5em; padding-left: .2em /*padding: .7em 1em .7em 1em;*/ }
.player-online-icon{ color:#71e871 !important; padding-right: .3em;}
.online-panel{padding: .3em; width: auto; }
.currently-online-caption{color: #666; padding-right:.4em;}
.current-room-caption{color: #666; font-size: 80%; background: #ffdaa1; padding: .4em; cursor: pointer; }
.current-room-caption::after { content: " ▶";}
.current-room-caption:hover { background: #f2d2a2; }
.current-room-caption:active { background: #e3c393; }
.last-seen-panel{color:#666; width: auto; }
.tabSwitcher-buttons {table-layout:fixed}
.t-b { /* tab button */
    
    text-transform: uppercase; padding-top: 1em; padding-bottom: 1em; font-size: 1.1em
    }
.atm { /* active tab marker */
    
    
    background: hsl(200deg, 80%, 90%);
    height: 100%;
    z-index: -1;
    
    
    vertical-align: bottom; /* ez a bottom nem kéne ide. bug? */
    transition: margin-left .3s ease;
}
.atm-2 { width: 50%; margin-left: 50% }
.atm-3 { width: 33.333%; margin-left: 33.333% }
.permIcon {margin-left: .8em}
.assistantModeratorPermIcon { font-size: 1.5em; margin-left: .4em; transform: translateY(-.1em); }
.forumModeratorPermIcon { font-size: 1.5em; margin-left: .4em; transform: translateY(-.1em); }
.ph-flag{width:24px; height:18px; border: 0.5px solid black; margin: 0 8px;}
.ot-p { /* oldtimer progressbar desktopon */
    border: #AAAAAA 1px solid;
    border-radius: .2em;
    transform: translateY(.6em);
    -ms-transform: translateY(.6em);
    -webkit-transform: translateY(.6em); /* #2798: progress bar megjelenítési hiba imac/safari */
    -moz-transform: translateY(.6em);
    -o-transform: translateY(.6em);
}
.ot-P { /* oldtimer progressbar desktopon, dobókocka nélkül */
    border: #AAAAAA 1px solid;
    border-radius: .2em;
    width: 3em;
    height: .65em;
    margin-left: .5em;
}
.ot-c { /* oldtimer dice és progress bar konténere */
    transform: translate(-.1em, -.1em);
    -ms-transform: translate(-.1em, -.1em);
    -webkit-transform: translate(-.1em, -.1em); /* #2798: progress bar megjelenítési hiba imac/safari */
    -moz-transform: translate(-.1em, -.1em);
    -o-transform: translate(-.1em, -.1em);
}

.bl {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    }

@media screen and (max-width: 699px) {
	.headerWrapper {
        
		
		/*background-color: hsl(208deg 87% 97%);*/
		background-color: white;
		box-shadow: 0 0 .7em rgba(0,0,0,0.5) !important;
		
		
		padding-bottom: 0px;
	    position: fixed;
	    z-index: 2;
	    height: unset;
	    width: 100%;
	}
	
	
	.sheetContent {margin-top: 12.5em}
	
	.headerWrapper .button-bar {color: white; font-size: 2em; text-align: right}
    .headerWrapper .pi-w { /* keret navigációs sávjára nem szabad vonatkoznia, mert akkor mobilon elcsúszik */
        width:6.5em;height:6.5em; margin: 1.5em 2em 1em .4em;
	    transition: width .3s ease, height .3s ease, margin .3s ease;
    }
    .pi-w.collapsed {
        width: 3em; height: 3em;
        margin: 1em 1em 1em 0em;
    }
    .m-piw {transition: max-height .3s ease; max-height: 2.5em}
    .m-piw.collapsed {max-height: 0em; overflow: hidden}
    
	.oldtimerLabel { color: #0c4476; padding-left: .5em}
    .m-pi {margin-bottom: .8em; padding-right: 1em}
    .atl {font-size:140%; padding-top:.8em}

	
	.sheet { box-shadow: none !important;}
    .tabSwitcher-buttons { z-index: 1; }
    .headerWrapper { background-color: hsl(200deg, 50%, 95%) !important;}
    .bbb { color: #444 !important; }
    .pi-closeIcon { color: #224; padding: .3em .5em; }
	
	.current-room-caption{font-size:100%;font-weight:600;}
    .popup-menu {
        font-size:.8em !important;
        transform: translateX(-.5em);
    }
}
@media screen and (min-width: 700px) {
  .ph-flag {margin-left:1em;margin-right:.6em}
  
  
  html.nhp .headerWrapper {    margin-bottom: 2em; background: white; padding-bottom: 1em}
  
  
  .pi-c {padding-top:.8em} /* player image container */
  .headerWithoutTabSwitcher {padding-top: .5em}
  .d-ot {margin-right: .3em} /* desktop oldtimer img */
  .button-bar {margin-top:0}

  .pi-c {	padding-right: 1.2em; } /* player image container */
  .introductionWrapper { padding-top: .4em; }
  .l-dl {white-space: nowrap; color: #666}
  .l-ol {padding-top:1em} /* landscape oldtimer label */
  .popupMenuButton {font-size:1.5em;color:#000;margin:0;padding:0;margin-left:-1em;margin-right:auto;width:4em}
  .m-pi {display:none} /* mobile personal info */
  .c-l {padding-right: 2em} /* country label */

  .oldtimerIcon, .registrationAt, .country {padding-right:1em}
  .l-lsl {padding-left: 1.5em}

  .sheet .headerWrapper { box-shadow: none !important; padding: 1em 1.5em 1em .4em; }
  .sheet .sheetContent { padding: 1em 2em 3em 0em }

    #addFriendButton>.bbb {
        color: hsl(160deg, 75%, 25%);
        background: hsl(160deg, 85%, 90%);
        border: 1px solid hsl(160deg, 50%, 70%);
        cursor: pointer;
    }
    #addFriendButton>.bbb:hover {background: hsl(160deg, 70%, 85%);}
    #addFriendButton>.bbb:active {background: hsl(160deg, 60%, 80%);}
}
@media screen and (min-width: 930px) {
  .sheet .headerWrapper { padding: 1em 2em 1em 1.3em; }
  .sheet .sheetContent { padding: 1em 3em 3em 0em }
}

.popup-menu {
    background: #fff;
    border-radius: 0.7em;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.20), 0px 0px 4px 0px rgba(0, 0, 0, 0.20), 0px 0px 8px 0px rgba(0, 0, 0, 0.20), 0px 0px 16px 0px rgba(0, 0, 0, 0.20);
    border-spacing: 0px;
    font-size: 1.2em;
}
.popup-menu:not(.popup-menu-open) {
/*
    ez nem jó, mert ha nincs megnyitva, akkor is kihagyódik hely a lap alján és scrollbar lesz belőle (#4789)
    opacity: 0;
    pointer-events: none;
*/
    display: none;
}
.popup-menu-open.pt { pointer-events:all /* valamiért pointer-events:none-ra állítódik néha */ }
.popup-menu .pR {
    transform: translateX(-1px); /* menügomb border */
}
.popup-menu .menu-item {
    padding: .5em 1em;
    text-align: left;
}
.popup-menu .menu-item:hover {
    background: #ddd;
}


@media screen and (max-width: 699px) {
    .popup-menu {
        background: white !important;
        box-shadow: #55555577 0px 1px 6px 4px !important;
    }
	.bbb {padding: .5em; color: white; }
}

@media screen and (min-width: 700px) {
  .button-bar { border-spacing: .7em 0em }
  .bbb {
    color: #444;
    border: 1px solid #d1d1d1;
    padding: .5em;
    /* box-shadow: #ccc 1px 1px 4px; */
    background: #f2f2f2;
    border-radius: 2px;
    cursor: pointer;
    transition: .05s linear background-color;
  }
  .bbb:hover { background: #ddd; }
  .bbb:active { background: #ccc; }
}



/*
.winsCol, .drawsCol, .lossesCol { padding: 0.125em 0.25em; }
.winsCol { border-right: 0.1em solid #888; }
.lossesCol { border-left: 0.1em solid #888; }
*/

.winRatioCol, .matchCountCol { padding: 0.125em 0.25em; }
.matchCountCol {
    /*border-right: 0.1em solid #bbb;*/
    padding-right: .7em;
}
.resultCountsByCategory {
    border-left: 0.1em solid #bbb;
    padding-left: .7em;
}
.rp-largepadding .resultCountsByCategory {
    padding: 0 .7em;
}
.series-date{font-size:75%}
.matchCountLine {padding-bottom: .6em}
.resultCountsByCategory td { padding: .1em; color: #444;  }
.matchCount {color: #68d !important; font-size: 1.5em; padding-right: .2em }
.winRatio {color: #3b3 !important; font-size: 1.5em; padding-right: .2em; }
.winCount {color: #191 !important; font-size: 1em; padding-left: .3em; }
.averageOpponentRating {color: #971 !important; font-size: 1.5em; padding-right: .2em; }
.opponent-rating {color: #827a01;font-size:80%; padding-bottom:.2em;}

/* https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e */
.pie {background:#ddd; width: 3em; height: 3em; border-radius: 1.5em; position: relative; overflow: hidden }
.pieSegmentOuter {
    overflow: hidden;
    position:absolute; left:0; top:0; width:100%; height: 100%;
    /*transform: translate(50%, 0) rotate(30deg) !important;*/
    transform-origin: 0% 50%;
}
.pieSegmentInner {
    background: rgba(0,0,255,0.5);
    position:absolute; left:0; top:0; width:100%; height: 100%;

    /*transform: translate(-100%, 0) rotate(180deg) !important;*/
    transform-origin: 100% 50%;
}
.winsItem { background: #4c4 }
.drawsItem { background: #bbb }
.lossesItem { background: #f66 }

.rp-gameicon {
    width: 5em;
    height: 5em;
    margin: 1em .1em 1em 0;
    background-position-y: 40% !important;
}

.ratingCol {margin-left:1em;margin-right:1em}

.amendRatingButton:last-child {
    /* mivel az amend rating szimbóluma a rendelkezésre álló téglalap csak egy kis részét tölti ki,
    ezért ha az az utolsó a ratingtől jobbra, akkor úgy tűnik, mintha túl agy lenne a távolság közte és a
    tőle jobbra lévő függőleges elválasztóvonal között */
    margin-right: 0;
}

.crown { width: 2em !important; transform: translate(.3em, -.15em) }

/*.amendRatingLink { font-size:.8em; padding-top: 0.5em; text-decoration: underline;} */
.amendRatingButton {
    color: #999;
    font-size: 1.4em;
    padding: .25em;
    margin: 0 .2em;
}
.amendRatingButton:hover { color: #777; background: #eee; }
.amendRatingButton:active { color: #555; background: #ddd; }

.resultCategoryPieChart { margin-left: 1.1em; }

.o-t>thead>tr, .resultsByTime>thead>tr {
	background-color: #e7dbc3;
	color: #480302;
	height: 2.25em;
	line-height: 1.5em;
	border-bottom: 1px solid #ccc;
	position: relative;
}

.introduction {
	border: 1px solid #e0e0e0;	padding: .5em .3em;
	word-break: break-all;	white-space: normal;
}
.panel, .resultsPanel {
    border: 1px solid hsl(60deg 50% 50%); /* lightness itt 60% helyett 55%, mert nem fehér a háttér hanem szürke */
    /*background: hsl(60deg, 100%, 97%);*/
    border-radius: .5em;
    overflow: hidden;
}
.p-c, .resultsCaption {
    background: hsl(60deg 90% 75%);
    color: #533;
    text-transform: uppercase;
    border-bottom: 1px solid hsl(60deg 50% 60%);
    text-align: center;
    font-weight: bold;
}
/*
.tourStatPanel { background: hsl(200deg, 100%, 98%) !important; border: 1px solid hsl(200deg, 40%, 80%) !important; }
.tourStatPanel .p-c { background: hsl(200deg, 100%, 86%); }
.tourStatPanel .resultsByTime>thead>tr { border-top: 1px solid hsl(200deg, 40%, 85%); background: hsl(200deg, 90%, 94%); }
*/
.wonPrizesPanel { background: hsl(190deg 77% 97%) !important; border: 1px solid hsl(190deg 40% 80%) !important;}
.wonPrizesPanel .p-c { background: transparent; border: none; }

.r-i {                                  /* result icons */
    background-color: hsl(30deg, 50%, 70%);
    background-image: linear-gradient(0deg, hsl(30deg, 70%, 45%), hsl(30deg, 70%, 45%));
    /* ez a kettő felül van írva .collapsible-panelben */

    background-size: 50% 100%;
    background-repeat: no-repeat;
    border-radius: 2em;
    padding: 0 0.2em;
    transition: background-position ease .1s;
}
.r-i .gf {font-size: 1.3em; color: white; padding: 0.1em 0.5em 0.1em 0.5em;} /* result icons */
.r-ti.r-i-inactive {color:white}
.r-oi.r-i-inactive {color:white}
.r-i-mouseArea { cursor: pointer }
.r-i-mouseArea:active .r-i {
    background-color: hsl(30deg, 50%, 50%);
    background-image: linear-gradient(0deg, hsl(30deg, 70%, 30%), hsl(30deg, 70%, 30%));
}

/* zöld lenne a páros result sor, de desktopon a gamelist már zöld, ezért ott legyen inkább kék a páros result sor */
/* de kék sem lehet, mert akkor mobilon a headerre hasonlít, desktopon pedig a won prizes-ra.*/

.o-t>tbody>tr>td, tr.resultsByTime, table.resultsByTime .reasonRow {background:hsl(45deg,40%,99%)}
.dateRow > td{border-top:1px solid #ccc}
tr.resultsByTime {border-top:1px solid #ccc;height:1.8em;}
tr.o-t td,
.resultsByTime td, .resultsByTime .o-n {padding-left: 1em; padding-right: 1em}
tr.resultsByTime.odd, tr.resultsByTime.even { border: none; }
tr.resultsByTime.odd>td {background: hsl(45deg,40%,99%); border: none;}
tr.resultsByTime.even>td {background: hsl(45deg,40%,95%); border: none;}
tr.o-t {height:2.2em;cursor:pointer}
tr.o-t.even>td {background: hsl(45deg,40%,95%); }
tr.o-t:hover>td, tr.resultsInSeries:hover {background:#b9f0ab}
.o-n {
	color: #0c4476;
	font-weight: bold;
	text-decoration:none;
}
.o-t>tbody>tr>td {transform:rotateX(0)}

tr.resultsInSeries {border-top:1px solid #ccc}
tr.resultsInSeries, table.resultsInSeries .reasonRow {background:#f4f4fc}
/*._matchRow[data-a="m"]>td {background: #eeeefc}
._matchRow[data-a="r"]>td {font-size:.9em;background:#eeeeee;cursor:pointer}
._matchRow[data-a="r"]:hover>td {background:#b9f0ab}*/

/*._roundCount {width:24px;height:24px;background-size:cover}*/

.dateRow>td{font-size:1em}
.timeCol {white-space:nowrap;padding-right:1em;padding-left:1em;text-align:right;
				 width:0px;/* workaround, önmagában ha widthPercentage=1, attól még nem lesz széthúzva teljesen, csak ha van egy (?) 0-s oszlop */}
tbody .timeCol {font-size:.8em;}

.n-i {
	padding:0em .5em 0em 1em;
	transition:transform .3s ease;
	color: #aaa;
}
.n-i::after{content:"►"}
.opponentOpen .n-i {
	transform:rotate(90deg);
}

.row-collapsed {transition: height .3s ease; height: 0px; display: none}
.row-collapsed-inner { max-height: 100%; overflow: hidden; }

.ratingPanelContent {padding-top:.5em}
.disqualify-button {
    color: #fff;
    font-size: .8em;
    padding: .25em;
    margin: 0 .2em;
    background:#666;
    border-radius: 8px;
    border: 1px solid #555;
     padding-top: 0.4em;
     cursor: pointer;
     }
.disqualify-reason-field {
    font-size:.8em;
    margin-right: 1em;
}

    .disqualify-button:hover {
      background-color: red;
      color: black;
    }

.s-w {color: #080;}
.s-d {color: #888;}
.s-l {color: #800}
.s-w, .s-d, .s-l, ._s-w, ._s-d, ._s-l {font-size:1.1em;font-weight:bold; cursor: pointer}

.r-u::before, ._r-u::before {content:"▲"}
.r-d::before, ._r-d::before {content:"▼"}
.r-u, ._r-u {color:#6c6}
.r-d, ._r-d {color:#c66}

.resultsInSeries > thead > tr, .dateRow {
	font-size: 0.75em;
	line-height: 1.5em;
	height: 1.5em;
	background-color: #eefcee;
	color: #106d10;
	box-sizing: border-box;
}
.dateRow > td {
	text-align:left;
	padding:0em .5em;
}
.resultsByOpponentIcon svg, .resultsByTimeIcon svg {fill:white; margin: .2em}

.resultsInSeries > thead > tr > td {border-top:1px solid #ccc;padding:.3em;}

.resultWin, .resultDraw, .resultLoss { font-size: 1.5em; padding: .2em; padding-left: 1.5333em;}
.resultWin  {color:#6c6}
.resultDraw {color:#888}
.resultLoss {color:#e66}
.matchValue {transform:translateY(1px)}
.matchValue, .matchValuePlaceholder {width:2em}

/**/

.ratingCategoryName {color: #888}

table.o-t > thead > tr {background: hsl(50deg,60%,97%); color: #666;}

/* statPanelTracinghez */
@media screen and (max-width: 599.99px) {
    .collapsible-panel .open-panel-icon {
        vertical-align: middle;
        padding: 0 .7em;
        opacity: 0;
        transition: transform .2s linear;
    }
    .collapsible-panel .panel-content-hider {
        transition: max-height .3s ease;
    }
    .r-i-hidden {
        /* JS-ből állítjuk ezt a classt, azért nem inline styleként mert így csak mobilon érvényes */
        opacity: 0;
    }
    /* ezt JS-ből állítjuk be, miután r-i-hiddent először beállítottuk,
     hogy azonnal eltűnjön, ne legyen transition:
    .collapsible-panel .r-i { transition: opacity .3s ease }
    .collapsible-panel .resultsCaptionText { transition: line-height .3s ease }
    */
    .r-i-mouseArea-noPointerEvents { pointer-events: none }
    .collapsible-panel .p-c {cursor: pointer;}
    .resultsCaptionClosed { height: 2em; }
    .resultsCaptionClosed .resultsCaptionText { line-height: 2em}
    .collapsible-panel .resultsCaption { transition: height .3s ease }
    .resultsTable-scrollHelper { top: -250px; position: absolute; }
}
@media screen and (min-width: 600px) {
    .open-panel-icon { display: none }
    .panel-content-hider { max-height: unset !important }
}
@media screen and (max-width: 699.99px) {
    .statTab { padding: 0 1em }
    .r-p { background: transparent; }
    .r-p:not(.r-p-TOURNAMENT_RESULTS) { border: none; }
    .r-p-TOURNAMENT_RESULTS {margin-top: 2em;padding-top:0 !important}
    .p-c { height: 2.2em; line-height: 2.2em; }
    .resultsCaption { height: 3em; }
    .resultsCaptionText { line-height: 3em }
    tr.o-t:not(.even)>td {background: hsl(120deg,60%,95%)}
    tr.o-t.even>td {background: #fff}

    .larkinorCharactersPanel { margin-top: 1.5em; }
}
@media screen and (min-width: 700px) {
    .ratingPanelContent {padding: 1em 1.3em}
    .p-c, .resultsCaption {
        padding: .55em;
    }
}

.tournamentStatTournamentInfo {font-size: 1.1em; color: #333;padding: 1em;}

.larkinorCharacterLink, .noLarkinorCharacters { font-size: 1.2em; }
.larkinorCharacterLink { padding: 0.5em 1em; }
.t:nth-child(2) > .larkinorCharacterLink { padding-top: 1em; }
.t:last-child > .larkinorCharacterLink { padding-bottom: 1em; }
.noLarkinorCharacters { padding: 1em }

/* Forum Side Category List */
.fscl {
    background: #F7FEB27F;
    /* box-shadow: hsl(105deg 20%  55%) 0px 1px 3px; */
    border: 1px solid hsl(105deg 30% 80%);
    border-radius: .5em;
    overflow: hidden;
    padding-bottom: .5em;
}
.fscl-caption {
    padding: .7em 1em .5em 1em;
    font-size: 1.2em;
    text-align: center;

    color: #000;
    font-family: "Roboto Condensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.fscl-elem-label { height: 3em; padding: 0 1em 0 .5em; }
/* a második elem az az első listaelem valójában, mert az első elem a panel címsora */
.fscl-elem-label, .fscl-exitIcon {  color: #444; }
a.fscl-elem-label:hover, .watched-topic-link:hover { background-color: hsl(110deg 70% 90%) }
.fscl-elem-selected { background-color: hsl(110deg 70% 85%) }
.fscl-exitIcon, .interested-category-checkbox>* { padding: 0 1em 0 1em;}
.interested-category-checkbox { color: #999; cursor: pointer; border-left: 1px solid hsl(110deg 30% 70%); }
.checked-tag { color: black; padding: 0 .06em; /* fa-eye-slash kicsit szélesebb mint fa-eye */}
.fscl-exitIcon:hover, .interested-category-checkbox:hover, .lang-item:hover { background: hsl(110deg 70% 88%); }
.fscl-elem-selected .fscl-exitIcon:hover { background: hsl(110deg 60% 78%); /* ha sötétebb a háttér mert az a kiválasztott kategória, akkor legyen az iksz gomb hover háttere is kicsit sötétebb, hogy legyen érdemi kontraszt */ }
.fscl-elem-selected .fscl-exitIcon:active { background: hsl(110deg 50% 73%); }
a.fscl-elem-label:active, .watched-topic-link:active, .lang-item:active  { background-color: hsl(110deg 60% 85%) }
.fscl-exitIcon:active, .interested-category-checkbox:active {background: hsl(110deg 60% 80%);}
.fscl-elem-label-text { padding-left: .4em; font-size: 1.05em;}
.fscl-icon-game { width: 2em }
.fscl-icon-wrapper .gf { color: #666; font-size: 1.3em;  }
.my-latest-posts .gf { color: #787; font-size: 1.2em }
.fscl-more-link { text-align: center; color: #46e; }
.watched-topic-unseen-reply-count { padding: .3em .5em; background: #f97; border-radius: 1em; color: white; margin-right: 1em;  }
.watched-topic-link .fscl-elem-label { padding-right: .5em } /* mivel itt nem a "label" a highlightolható, ezért nem baj ha közel kerül a tartalma a széléhez */
.category-group { padding: .6em 1em .4em 1em; color: hsl(120deg 5% 45%);}
.lang-item { padding: 0 1em 0 .5em; cursor: pointer; }
.lang-item .fscl-elem-label-text { padding-left: .5em; }
.fcatIcon-fa {
    font-size: 1.2em;
    /* 3em lenne a szélesség alapból, de mivel a font-size-ot nagyobbra vettük, ezért azt meg kisebbre kell */
    width: 2.5em !important; min-width: 2.5em !important;
}
.fscl hr {
    margin: 1em;
    border-bottom: none;
    border-top: 1px solid hsl(110deg 30% 70%);
}

@media screen and (min-width: 700px) {
    /* fórumban 700px fölött van fscl */
    /* playerinfón 700px alatt van abouttabban van, valamint 970px fölött jobb oldalt */
    .fscl {
        min-width: 18em;
    }
}
@media screen and (max-width: 699.999px) {
    .fscl {
        margin: 0 2em;
        width: calc(100% - 4em);
    }
}


html:not(.nhp) .sheetContent { padding: 2em }

html.nhp .sheet{background:white;box-shadow:0 2px 6px #00000033;}

@media screen and (max-width: 400px) {
	.resultsInSeries > thead > tr > td {font-size:1em}
    .o-t td, .resultsByTime td, .resultsByTime .o-n {padding-left: .3em; padding-right: .3em}
}

@media screen and (max-width: 380px) {
    html, body {font-size:12px}
	.ratingPanelContent {font-size:.85em} /* rating panel */
	.o-t > thead {font-size: .85em} /* opponent table header */
	.o-t > tbody {font-size: .9em} /* opponent table header */
	.gameList {font-size: .85em}
}

@media screen and (max-width: 320px) {
	html, body { font-size: 11px; }

	.o-n {font-size:.9em}
	.n-i {padding:0em .4em 0em .8em;}
}
@media screen and (max-width: 280px) {
	html, body { font-size: 10px; }
	.o-t {font-size: 1.1em}
}

@media screen and (min-width: 700px) {
	/**//* ezt a fájlt majd meg kell szüntetni, helyett a megfelelő komponensek CSS-jeibe kéne átpakolni media query-kbe a rule-okat */

html.nhp>body {background: linear-gradient(0deg, #e5e5e5, #f0f0f0); background-attachment:fixed;}

.gameListCenter {width:100%}

.resultsByTime-for-moderators td {padding: 0 .5em }
@media screen and (min-width: 900px) {
    .reasonRow {display:none}
}

@media screen and (max-width: 769px) {
    .orc { white-space: normal } /* Results Panel Next To Prize List, meg Opponent Rating Column */
}

.pec {padding:.2em .7em} /* prize-elem-container */
@media screen and (min-width: 900px) {
    .pec {width:100%}
}

/* ennél a kettőnél csak azért kell az .nhp, hogy nagyobb legyen a prioritása és felülírja a default panel beállítást */
html.nhp .sheet .panel {
    border: 1px solid hsl(60deg 50% 60%);
    background: hsl(60deg, 100%, 97%);
    border-radius: .5em;
    overflow: hidden;
}


.ratingPanelContent { font-size: .85em }
.matchCountCol { border-right: none; padding-right: 0; }
.resultCategoryPieChart { font-size: 1.1em; margin-left: .7em; /* 1.1em-es margin helyett */}

/**/
}
@media screen and (max-width: 449px) {
    .resultsByTime > thead > tr > td > *, .o-t > thead > tr > td > * {white-space: normal}
    thead > tr > .orc {white-space:normal} /* opponent rating col */
    tbody .torc {font-style:italic}
    .resultsByTime thead {font-size: .9em}
    .resultsByTime .timeCol {font-size: 1em}

    /* prize-elem-container */
    .pec { width: calc(50% - 1em) }
    .pec:nth-child(2n+1) .T { width: auto; margin-left: auto }
    .pec:nth-child(2n+2) .T { width: auto; margin-right: auto }
    .pec:nth-child(2n+1):last-child .T { margin-right: auto }
}
@media screen and (min-width: 450px) {
    .o-t > thead > tr > td:not(:nth-child(1)):not(:nth-child(2)) { padding-left: .7em;padding-right: .7em}
    .o-t > thead > tr > td:last-child { padding-right: 1em !important}
}
@media screen and (min-width: 450px) and (max-width: 899px) {
    .prize-list-inner { display: grid; grid-template-columns: auto auto auto; justify-content: center; column-gap: 1em }
}
@media screen and (max-width: 549px) {
    .resultsByTime td { padding-left: .2em; padding-right: .2em;}

    .resultsByTime, .resultWin, .resultsByTime .resultDraw, .resultsByTime .resultLoss {
        padding: .2em;
    }
    /* rsp = Result Symbol Padding. Ez azért van, hogy kihagyjunk helyet a match value számára. Viszont ha kevés a hely,
    inkább ne hagyjunk ki helyet, hátha nem lesz sehol se match value (ha meg mégis, az úgyis széthúzza az oszlopot) */
    .rsp {padding-right: 0 !important}
}
@media screen and (max-width: 619px) {
    thead .torc {font-size:0px} /* opponent rating col a result by time táblázatban  */
    .torc {text-align: right}
}
@media screen and (max-width: 699px) {
    body {background: white; overflow-x: hidden /* overflow-x tab slide out animáció miatt kell */ }
    .aboutTab, .statTab, .gameListTab { left: 0px; position: absolute; transform: translate(0px, 0px); width: 100%; }
    .sheetContent {position: relative}
    .socialPanels-muchWidth, .socialPanels-littleWidth {display: block !important;}
    .aboutTab {padding-top: .7em}
    .aboutTab_label {  padding: .3em 0em .2em 1em; color: #777}
    .aboutTab_value {padding: .1em 0em 0em 1em}
    .aboutTab .introduction {margin: .3em 1em 1em 1em}
    .aboutTab_font { padding: 0em 0em 0em .5em; margin-left: .7em; font-size: 1.5em; color: #999}
    .aboutTab_title { font-weight:600;padding-left: 1em}
    .tab-slideOut-left { transform: translate(-100%, 0px) }
    .tab-slideOut-right { transform: translate(100%, 0px) }
    .tab-hidden { display: none }
    .tab-shown { opacity:0}
    .initial-tab, tab-shown { left:0px;top:0px;width:100% }
    .tab-pos-reset {transform: translate(0, 0)}
    .g-ic {color:#0c4476 !important}
    .r-p { padding-top: .5em }
    .footerWrapper { display: none; }
}
@media screen and (max-width: 1069.99px) {
  .socialPanels-muchWidth {display: none}
}
@media screen and (min-width: 1070px) {
   .socialPanels-muchWidth { padding-left: 1em; }
   .userForumPostsLink-hideable { display: none; }
}
.userForumPostsLink { vertical-align: middle; font-weight: 600; color: #46d; }
.socialPanels-littleWidth { display: none}

@media (pointer:coarse) {
	.o-nc {height:1.6em}
}

.landscapeReasonCol,.landscapeCheatingCol{display:none}

.oldtimer {white-space:nowrap}
#fgp3 {display:none}

/**/
    
    
    
    

    
    
    
    


/* Game list */
.gameList {padding: 1em .2em; }
.gameList preNoStat { width: 20%; }
.gameList>.gle, .glew, .gleW {
    display: inline-block;
	margin-left: 1em;
	margin-right: 1em;
}
.gle {
	padding-top: .7em;
	padding-bottom: .5em;
	text-align: left;
	color: #666;
	background: linear-gradient(#f8f8f8,#f8f8f8) .75em -1em/3.1em 2em no-repeat, linear-gradient(#f8f8f8,#f8f8f8) .75em 4.5em/3em 3em no-repeat,
                #f8f8f8 url(/image/game/gameIconsForPlayerInfo.png) .75em 1.5em/3em 99em no-repeat;
    background-origin: content-box;
    height: 4.7em;
}
.gameList pre::first-line {font-weight: bold; color:black}
.glr pre { padding-top: 1em }
.glr { margin: 0 !important; /*???*/}
div.gle {
    background-color: #E9E9E9;
    background-image: linear-gradient(#E9E9E9,#E9E9E9), linear-gradient(#E9E9E9,#E9E9E9),
                      url(/image/game/gameIconsForPlayerInfo.png);
 }
a.gle:hover {
    background-color: #dAdAe2;
    background-image: linear-gradient(#dAdAe2,#dAdAe2), linear-gradient(#dAdAe2,#dAdAe2),
                      url(/image/game/gameIconsForPlayerInfo.png);
    border-radius: 5px;
}
a.gle:active {
    background-color: #dAdAe2;
    background-image: linear-gradient(#d0d0d9,#d0d0d9), linear-gradient(#d0d0d9,#d0d0d9),
                      url(/image/game/gameIconsForPlayerInfo.png);
    border-radius: 5px;
}

@media screen and (min-width:700px){
    .gameList {border: 1px solid #aaa;border-radius: .5em;}
    .gameList-wide > .gle, .gleW {width:calc(25% - 1em) }
    .gleW>.gle {margin-left:0px}
    .gameList-wide { text-align: left }
    .gameList:not(.gameList-wide) {padding-left: 1em; padding-right: 1em}
    .gameList:not(.gameList-wide) .gle, .glew {width:100%; margin-left:0px;margin-right:0px}
    .gameList:not(.gameList-wide) pre {margin-right:-4em}

    

    /* KESKENY GAME LIST */
    
    
    
    
    
    .gameList {
        border: 1px solid hsl(120deg, 60%, 60%);
        background: hsl(190deg 77% 97%);
    }
    .gameList:not(.gameList-wide) {
        border: 1px solid hsl(190deg 40% 80%);
        border-radius: .5em;
        background: hsl(190deg 77% 97%);
        overflow: hidden;
        border-left: none;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .gameList:not(.gameList-wide) .gle { margin: .2em 0; }
    
        .gle {
    	    padding:0em 10em 1.2em 0em;
        }
        .gle>pre{transform:translate(4.5em,.6em)}
        .gle {
    	    background: linear-gradient(hsl(190deg 77% 97%),hsl(190deg 77% 97%)) .75em -1em/3.1em 2em no-repeat,
    	                linear-gradient(hsl(190deg 77% 97%),hsl(190deg 77% 97%)) .75em 4.5em/3em 3em no-repeat,
                        hsl(190deg 77% 97%) url(/image/game/gameIconsForPlayerInfo.png)
                        .75em 1.5em/3em 99em no-repeat;
        }
        div.gle {
            border-radius: .5em;
            background-color: hsl(190deg, 80%, 92%);
            background-image: linear-gradient(hsl(190deg, 80%, 92%),hsl(190deg, 80%, 92%)),
                              linear-gradient(hsl(190deg, 80%, 92%), hsl(190deg, 80%, 92%)),
                              url(/image/game/gameIconsForPlayerInfo.png);
        }
        a.gle:hover {
            background-color: hsl(190deg,30%, 90%);
            background-image: linear-gradient(hsl(190deg,30%, 90%),hsl(190deg,30%, 90%)), linear-gradient(hsl(190deg,30%, 90%),hsl(190deg,30%, 90%)),
                              url(/image/game/gameIconsForPlayerInfo.png);
            border-radius: 5px;
        }
        a.gle:active {
            background-color: hsl(190deg, 40%, 85%);
            background-image: linear-gradient(hsl(190deg, 40%, 85%),hsl(190deg, 40%, 85%)), linear-gradient(hsl(190deg, 40%, 85%),hsl(190deg, 40%, 85%)),
                              url(/image/game/gameIconsForPlayerInfo.png);
            border-radius: 5px;
        }
    

    /* WIDE GAME LIST */
    
     /* selected nem lehetséges wide állapotban */
    
    
    
    .gameList-wide {
        border: none;
        border-radius: 0;
        padding: 0;
        margin-top: -.5em;
        padding-left: 2em;
        background: white;
    }
    .gameList-wide .gle { border-radius: .5em; border: 1px solid hsl(60deg 50% 70%); margin: .5em; }
    
        .gameList-wide .gle {
    	    padding:0em 10em 1.2em 0em;
        }
        .gameList-wide .gle>pre{transform:translate(4.5em,.6em)}
        .gameList-wide .gle {
    	    background: linear-gradient(hsl(60deg 90% 95%),hsl(60deg 90% 95%)) .75em -1em/3.1em 2em no-repeat,
    	                linear-gradient(hsl(60deg 90% 95%),hsl(60deg 90% 95%)) .75em 4.5em/3em 3em no-repeat,
                        hsl(60deg 90% 95%) url(/image/game/gameIconsForPlayerInfo.png)
                        .75em 1.5em/3em 99em no-repeat;
        }
        .gameList-wide div.gle {
            border-radius: .5em;
            background-color: hsl(110deg,70%, 100%);
            background-image: linear-gradient(hsl(110deg,70%, 100%),hsl(110deg,70%, 100%)),
                              linear-gradient(hsl(110deg,70%, 100%), hsl(110deg,70%, 100%)),
                              url(/image/game/gameIconsForPlayerInfo.png);
        }
        .gameList-wide a.gle:hover {
            background-color: hsl(60deg, 85%, 85%);
            background-image: linear-gradient(hsl(60deg, 85%, 85%),hsl(60deg, 85%, 85%)), linear-gradient(hsl(60deg, 85%, 85%),hsl(60deg, 85%, 85%)),
                              url(/image/game/gameIconsForPlayerInfo.png);
            border-radius: 5px;
        }
        .gameList-wide a.gle:active {
            background-color: hsl(60deg, 80%, 75%);
            background-image: linear-gradient(hsl(60deg, 80%, 75%),hsl(60deg, 80%, 75%)), linear-gradient(hsl(60deg, 80%, 75%),hsl(60deg, 80%, 75%)),
                              url(/image/game/gameIconsForPlayerInfo.png);
            border-radius: 5px;
        }
    



}
@media screen and (max-width:699px){
	.gameListCenter{text-align:left}
	.gameList>.gle, .glew, .gleW {
		width: 46%;
		margin: 1em 2% .3em 2%;
    }
    .glew>.P, .gleW>.P {padding-right: .5em}

    /* itt desktopos wide game list színei vannak a template változókba beállítva, tehát elég csak felülírni amit szükséges */
    
     /* selected nem lehetséges wide állapotban */
    .gle { border-radius: .5em; border: 1px solid hsl(60deg 50% 70%); margin: .5em; }
    
        .gle {
    	    padding:0em 10em 1.2em 0em;
        }
        .gle>pre{transform:translate(4.5em,.6em)}
        .gle {
    	    background: linear-gradient(hsl(60deg 90% 95%),hsl(60deg 90% 95%)) .75em -1em/3.1em 2em no-repeat,
    	                linear-gradient(hsl(60deg 90% 95%),hsl(60deg 90% 95%)) .75em 4.5em/3em 3em no-repeat,
                        hsl(60deg 90% 95%) url(/image/game/gameIconsForPlayerInfo.png)
                        .75em 1.5em/3em 99em no-repeat;
        }
        div.gle {
            border-radius: .5em;
            background-color: hsl(60deg,80%, 80%);
            background-image: linear-gradient(hsl(60deg,80%, 80%),hsl(60deg,80%, 80%)),
                              linear-gradient(hsl(60deg,80%, 80%), hsl(60deg,80%, 80%)),
                              url(/image/game/gameIconsForPlayerInfo.png);
        }
        a.gle:hover {
            background-color: hsl(60deg, 85%, 85%);
            background-image: linear-gradient(hsl(60deg, 85%, 85%),hsl(60deg, 85%, 85%)), linear-gradient(hsl(60deg, 85%, 85%),hsl(60deg, 85%, 85%)),
                              url(/image/game/gameIconsForPlayerInfo.png);
            border-radius: 5px;
        }
        a.gle:active {
            background-color: hsl(60deg, 80%, 75%);
            background-image: linear-gradient(hsl(60deg, 80%, 75%),hsl(60deg, 80%, 75%)), linear-gradient(hsl(60deg, 80%, 75%),hsl(60deg, 80%, 75%)),
                              url(/image/game/gameIconsForPlayerInfo.png);
            border-radius: 5px;
        }
    
}
@media screen and (min-width:380px) and (max-width: 449px) {
    .gameList > .gle, .glew, .gleW { font-size: .8em }
	/*.gameList pre {width:46%;margin-top:.2em}
	.gameList pre table {margin-bottom:-.6em}*/
}

.prize-gold, .prize-silver, .prize-bronze {
    font-size: 1.1em;
    color:#555;
    border-radius: 2em;
    width: 2em;
    transform:scale(.85);
    text-align: center;
}

.prize-gold {border: 2px solid #DB4;background: #FE9}
.prize-silver {border: 2px solid #AAA; background:#E2E2E2}
.prize-bronze {border: 2px solid #dba67b;background: #FDA}
/**/

.penaltyButton {background: #e91;border:4px outset #fa1;color:white;padding:.5em;margin-left: .5em;margin-bottom:.5em}
.penaltyButton:active {background: #b71;border:4px inset #da1;}

.penaltyButton-CHAT {background: #5cb85c;border:4px outset #6cce6c;color:white;padding:.5em;margin-left: .5em;margin-bottom:.5em}
.penaltyButton-CHAT:active {background: #b71;border:4px inset #da1;}

.penaltyButton-CHEATING {background: #337ab7;border:4px outset #4e8dc4;color:white;padding:.5em;margin-left: .5em;margin-bottom:.5em}
.penaltyButton-CHEATING:active {background: #b71;border:4px inset #da1;}

.penaltyButton-NICK {background: #787cf0;border:4px outset #8f9bfc;color:white;padding:.5em;margin-left: .5em;margin-bottom:.5em}
.penaltyButton-NICK:active {background: #b71;border:4px inset #da1;}


.neutralButton {background: #ccc;border:4px outset #ddd;color:black ;padding:.5em}
.neutralButton:active {background: #aaa;border:4px inset #bbb;color:white}

.tournament-link {transform:translateY(.25em)}
#expanded-prizes-stub {transition: height .3s ease; position: relative }
.prize-elem {padding: 0 .5em .5em .5em; cursor: pointer }
.prize-elem:hover {background: #dAdAe2}


.noInfo-text { font-size: 1.5em;  }
.noInfo-searchPlayerButton { text-align: center; }