/*
-----------------------------
    FONT
-----------------------------
@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:300,400,700&subset=latin-ext');
* { font-family: 'Barlow Semi Condensed', sans-serif; }
@import url('barlow/barlow.css');
*/
/* latin-ext */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/BarlowSemiCondensed-Light.ttf');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/BarlowSemiCondensed-Light.ttf');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/BarlowSemiCondensed-Regular.ttf');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/BarlowSemiCondensed-Regular.ttf');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/BarlowSemiCondensed-Bold.ttf');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/BarlowSemiCondensed-Bold.ttf');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


*{ font-family: 'Barlow Semi Condensed', serif; box-sizing: border-box; }

/*
-----------------------------
    SITE GENERIC
-----------------------------
*/

/*GENERIC*/
*{ box-sizing: border-box; }

body { font-size: 15pt; color: #222222; text-align: center; padding: 0 0 50px 0; margin: 0; }
img { border: 0; }
a, a:visited { text-decoration: none; color: #222222; outline: none; }
a:hover { text-decoration: none; color: #666666; }
.content input { border: 1px solid #cccccc; font-size: 15pt; }
.btn:hover,.btn:active,.btn:visited,
.btn { border: 0 !important; color: #ffffff; background: #19769F; padding: 5px 15px 5px 15px;
	text-align: center; display: inline-block; margin: 5px; font-size: 15pt; box-shadow: 1px 1px 3px #cccccc; border-radius: 5px; }
div.placeholder { height: 0px; font-size: 1px; clear: both; overflow: hidden;}

.b { font-weight: bold;  }
.i { font-style: italic; }
.u { text-decoration: underline !important; }
.r { text-align: right;  }
.l { text-align: left;   }
.c { text-align: center; }
.h { display: none; }
::selection      { background: #aaaaaa; }
::-moz-selection { background: #aaaaaa; }

.shame { background: #aa0000; color: #ffffff; text-align: center; padding: 15px; }
.shame a,.shame a:active,.shame a:visited,.shame a:hover { color: #ffffff; }

.content_version_list span.content_version_head { font-weight: bold; }
.content_version a,
.content_version span { display: inline-block; vertical-align: middle; padding: 3px 5px; width: 160px; }
.content_version:nth-child(2n+1) { background: #eeeeee; }
.content_version_current { font-weight: bold; }

div#cookie { width: 100%; padding: 5px; font-size: 10pt; position: fixed; left: 0; right: 0; bottom: 0; background: #000; background: rgba(0,0,0,.8); color: #ffffff; text-align: center; display: none; }
div#cookie a { color:#ffffff; text-decoration: underline; }
div#cookie input {  border: 0; background: #19769F; color: #ffffff; padding: 3px 10px; margin-left: 10px; }

#head_menu { }
#hamburger { display: none; position: absolute; right: 10px; top: 10px; background: transparent url('images/hamburger.png') center center no-repeat; background-size: contain; width: 25px; height: 25px;  z-index: 10; afilter: invert(1); }
#hider { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(100,100,100,.5); z-index: 50; display: none; }


/* CONTENT */

.expandblock { margin-bottom: 15px; }
.expandblock_title { cursor: pointer; background: #888888 url('images/right.png') 5px center no-repeat; color: #FFFFFF; padding: 3px 5px 3px 25px; font-weight: bold; }
.expandblock_content { display: none; padding: 5px 10px 10px 10px; zoom: 1; overflow: hidden; }

h1.normalh1 { font-weight: normal !important; }

.vbox8020,
.vbox7030,
.vbox6040,
.vbox5050,
.vbox4060,
.vbox3070,
.vbox2080 {  display: flex; min-height: 10px; padding: 3px; flex-flow: center; align-items: flex-start; align-content: flex-start; }

.vbox8020 .vbox_l,
.vbox7030 .vbox_l,
.vbox6040 .vbox_l,
.vbox5050 .vbox_l,
.vbox4060 .vbox_l,
.vbox2080 .vbox_l { min-height: 10px; padding: 10px; }
.vbox8020 .vbox_r,
.vbox6040 .vbox_r,
.vbox5050 .vbox_r,
.vbox4060 .vbox_r,
.vbox3070 .vbox_r,
.vbox2080 .vbox_r { min-height: 10px; padding: 10px; }

.vbox2080 .vbox_l { flex-basis: 20%; }
.vbox2080 .vbox_r { flex-basis: 80%; }
.vbox3070 .vbox_l { flex-basis: 30%; }
.vbox3070 .vbox_r { flex-basis: 70%; }
.vbox4060 .vbox_l { flex-basis: 40%; }
.vbox4060 .vbox_r { flex-basis: 60%; }
.vbox5050 .vbox_l { flex-basis: 50%; }
.vbox5050 .vbox_r { flex-basis: 50%; }
.vbox6040 .vbox_l { flex-basis: 60%; }
.vbox6040 .vbox_r { flex-basis: 40%; }
.vbox7030 .vbox_l { flex-basis: 70%; }
.vbox7030 .vbox_r { flex-basis: 30%; }
.vbox8020 .vbox_l { flex-basis: 80%; }
.vbox8020 .vbox_r { flex-basis: 20%; }

@media screen and (max-width: 800px){
    .vbox8020, .vbox7030, .vbox6040, .vbox5050, .vbox4060, .vbox3070, .vbox2080 { display: block; padding: 0;}
}

div.simacenter  { text-align: center; }
div.inlineblock { display: inline-block; vertical-align: top; padding: 20px; margin-bottom: 10px; min-height: 10px; }
div.iconblock   { display: inline-block; vertical-align: top; padding: 20px; margin-bottom: 10px; min-height: 10px; }
div.iconblock img { margin-bottom: 10px; }

a.button:hover, a.button:active, a.button:visited,
a.button { border: 0 !important; color: #ffffff; background: #666666; padding: 5px 15px 5px 15px; text-align: center; margin: 5px; text-decoration: none; display: inline-block; }

a.rbutton:hover, a.rbutton:active, a.rbutton:visited,
a.rbutton { border: 0 !important; color: #ffffff; background: #666666; padding: 5px 15px 5px 15px; text-align: center; margin: 5px; text-decoration: none; display: inline-block; border-radius: 5px; }

.w30 { width: 100%; }
.w50 { width: 100%; }
.w100 { width: 100%; }


/* RESPONSE */

@media screen and (max-width: 1000px){
	body { font-size: 13pt; }
	#hamburger { display: block; }
	#head_menu { display: none; position: absolute; left: 0; right: 0; top: 0; z-index: 1000; background: #565656 !important; color: #ffffff; zoom: 1; overflow: hidden; padding-bottom: 20px; }
	#head_menu a { width: 100%; text-align: center; }
	div.inlineblock { padding: 10px; }
}

/*
-----------------------------
    TEMPLATE GENERIC
-----------------------------
*/
div#main { max-width: 1920px; margin: auto; padding-top: 40px; }

div#head {
    height: 40px;
    width: 100%;
    margin: auto;
    top: 0;
    left: 0;
    z-index: 50;
    position: fixed;
    background: #000000;
    color: #ffffff;
    box-shadow: 1px 1px 3px #888888;


}
#headb {
	height: 40px;
	max-width: 1000px; margin: auto; padding: 0 15px 0 15px;
	display: flex; flex-flow: center; align-items: center; align-content: center;
}
#head_logo { display: inline-block; color: #ffffff; font-weight: bold; font-size: 20px; vertical-align: middle; }
#head_menu { text-align: right; flex-grow: 1; }
div#head .menu0, div#head .menusel0 { color: #444444; display: inline-block; vertical-align: middle; padding: 0 10px; margin-right: 5px; font-size: 16pt; }

#i_head { height: 400px; }
div#breadcrumbs { color: #666666; height: 20px; font-size: 9pt; line-height: 14pt; padding-left: 5px; }
div#breadcrumbs a { color: #666666; }

div.content  { width: 100%; background: #ffffff; text-align: left; max-width: 1000px; margin: auto; padding: 0 15px 0 15px; font-size: 15pt; }
div.contentb { padding: 30px; }

div.placeholder { height: 0px; font-size: 1px; clear: both; overflow: hidden; }

div#foot { clear: both; padding: 5px; }
div#foot a { color: #aaaaaa; }

.paralaximg { min-height: 100px; }

/* CONTENT */

div.col4321 { column-count: 4; column-gap: 20px; }
div.col321  { column-count: 3; column-gap: 20px; }
div.col21   { column-count: 2; column-gap: 20px; }
div.col4321 a,
div.col321  a,
div.col21   a { display: inline-block; break-inside: avoid; }


div.wfull  { left:0; right: 0; background: #ffffff; z-index: 5; }
div.wfullb { margin: auto; width: 100%; max-width: 1000px; padding: 10px; }


/* RESPONSE */
@media screen and (max-width: 1000px){
    div.contentb { padding: 20px; }
    .paralaximg { height: 300px; }
}

@media screen and (max-width: 800px){
    div.contentb { padding: 10px; }
    .paralaximg { height: 200px; }
}

@media screen and (max-height: 500px){
	div#foot { clear: both; padding: 5px; position: static; bottom: 0; left: 0; right: 0; }
}


/*
-----------------------------
    TEMPLATE MODS
-----------------------------
*/
body	{ background: #ffffff; }
#head	{ background-color: #000000; }
#foot	{ background: transparent; color: #000000; }
div#head .menusel0	{ color: #ffffff !important; }
div#head .menu0		{ color: #eeeeee !important; }
.expandblock_title	{ background-color: #000000; }

a.button,a.button:hover,a.button:visited,a.button:active,
.btn:hover,.btn:active,.btn:visited,.btn { background-color: #19769F; }
.wfullbg1		{ background-color: #ffffff !important; }
.wfullbg2		{ background-color: #aaaaaa !important; }
.wfullbg3		{ background-color: #aaccee !important; }
.wfullbg4		{ background-color:  !important; }
.wfullbg5		{ background-color:  !important; }

#headc {
	height: 40px;
	max-width: 1000px; margin: auto; padding: 0 15px 0 15px;
	display: flex; flex-flow: center; align-items: center; align-content: center;
	justify-content: space-between;
}

#headid a:hover,
#headid a:visited,
#headid a:active,
#headid a {
	color: #ffffff;
	background: #19769F;
	font-size: 0.8em;
	padding: 3px;
	margin-left: 5px;
	display: inline-block;
	border-radius: 3px;
	vertical-align: top;
}
/*linear-gradient(to right, #19769F, #32CFA5)*/
#state {
	afont-size: 15px;
	apadding: 2px 10px 0 10px;
	margin-left: 10px;
}
#headclock {
	margin-left: 10px;
	min-width: 26%;
	text-align: right;
}

form.login {
	margin: auto;
	width: 100%;
	max-width: 600px;
}

.loginb {
	max-width: 300px;
	margin: auto;
}


form.login span.field {
	display: block;
	margin: 5px 0;
}

form.login input[type=text],
form.login input[type=password]{
	width: 100%;
	margin-bottom: 10px;
}
form.login input[type=checkbox] {
	vertical-align: middle;
}

form.login .btn {
	display: block;
	margin: 40px auto 10px auto;
	padding: 15px 30px;
}

form.login .err {
	display: block;
	color: #dd0000;
	text-align: center;
	padding: 10px;
	border: 1px #dd0000 solid;
	background: rgba(255,0,0,.1);
}

.ma { margin: auto; }

.privtxt {
	display: block;
	padding: 10px 10px 10px 30px;
	border: 1px solid #dddddd;
	background: #eeeeee;
	margin-top: 20px;
	font-size: 16px;
	position: relative;
}

.privtxt input {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(0,-50%);
}

/* --------------------------------------------------------------------------- */



.stage {
	background: #fff;
	color: #222;
	margin: 30px auto 0 auto;
	width: 100%;
	max-width: 1000px;
	min-height: calc(100vh - 30px);
	position: relative;
	zoom: 1;
	overflow: hidden;
	padding-bottom: 30px;
}


.stage #topstat {
	float: left;
	width: 200px;
	height: 60px;
}
.stage .topstat_inner { margin-top: 5px; }
.stage #topstat img {
	width: 50px;
	float: left;
	aborder: 1px solid #ffffff;
	border-radius: 10px;
	margin-left: 15px;
	margin-top: 5px;
}

.stage .topbtn {
	margin-right: 15px;
	margin-top: 5px;
	padding: 0;
	display: block;
	float: left;
	width: 50px;
	height: 50px;
	background-size: contain;
}
.stage .logout { background-image: url('images/exit.png'); float: right; }
.stage .help { background-image: url('images/help.png'); float: right; }
.stage .hora{ font-size: 16pt; font-weight: bold; }

.stage div#scroller {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 15px;

}
.stage div.dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 2px solid #ffffff;
	border-radius: 2px;
	margin-left: 10px;
	margin-bottom: 2px;
}
.stage div.filled { background: #ffffff; }

.stage .exams { abackground-image: url('images/hat.png'); }
.stage .loginbg { position:absolute;left:0;right:0;top:0;bottom:0; background: transparent url('images/bg.jpg') center center no-repeat; }

.stage .level { width: 70px; height: 70px; line-height: 70px; display: inline-block; margin: 20px 20px 0 0; abackground: #004488; background: #0083c8; color: #ffffff; font-size: 22pt; border-radius: 10px; }
.stage .leveltitle { acolor: #ffffff; text-align: center; font-weight: normal; margin-top: calc(50vh - 140px); }

.stage .description {
	width: 820px; /*80%*/
	margin: auto;
	padding: 10px;
	text-align: left;
	font-size: 18pt;
}


.stage .description h1 { text-align: center; margin: 0 0 30px 0; font-weight: normal; }
.stage .description h2 { text-align: center; margin: 30px 0 0 0; color: #28ABA3; font-weight: normal; }

.stage h1 { color: #19779F; }
.stage .thanks { font-size: 20pt; }

.stage .description img { margin: auto; display: block; }
.stage .description li  { margin-bottom: 10px; }
.stage .btn:hover,
.stage .btn:active,
.stage .btn:visited,
.stage .btn {
	padding: 5px 15px;
	/*abackground: #004488;*/
	background: #0083c8;
	color: #ffffff;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	font-size: 14pt;
	text-transform: uppercase;
	height: 50px;
	line-height: 40px;
}

.stage .txt {
	border: 1px solid #666666;
	padding: 3px;
	border-radius: 3px;
	font-size: 20px;
}

.stage div#btn_c:hover,
.stage div#btn_c:active,
.stage div#btn_c:visited,
.stage div#btn_c { background: #edc467; }
.stage div#btn_ok:hover,
.stage div#btn_ok:active,
.stage div#btn_ok:visited,
.stage div#btn_ok{ background: #249453; }

.stage .centerbtn { margin: auto; }

.stage a.btn { display: inline-block; }
.stage .manuallogin { position: absolute; right: 25px; bottom: 12px; padding-left: 10px; padding-right: 10px; }


.stage div#dynamiccontent { abackground: #000000 url('images/bg.jpg') no-repeat center center; width: 100%; amin-height: 600px; }

.stage #filters {
	position: fixed;
	left: 0px;
	top: 0px;
	height: 160px;
	width: 100%;
	abackground: #999999;
	margin-top: 20px;
	padding-top: 10px;
}

.stage .devbtn {
	display: block;
	float: left;
	width: 128px;
	height: 140px;
	margin: 3px;
	border: 1px solid #000000;
	color: #000000;
	background: #ffffff;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center bottom;
}

.stage .devlistitem {
	position: relative;
	display: block;
	float: left;
	width: 400px;
	min-height: 75px;
	margin: 3px;
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 70px;
	text-align: center;
	background-color: #aaaaaa;
}

.stage .itembottom { margin-top: 5px; }

.stage .devlistitem .btn {
	background-color: #eeeeee;
	color: black;
	box-shadow: none;
	padding: 8px;
	left: 5px;
	right: 5px;
	position: absolute;
}

.stage .devlistitem .xbtn {
	bottom: calc(13px + 1em + 20px);
	background: #aaaaaa url('images/x.png') no-repeat top right;
}
.stage .devlistitem .rbtn { bottom: 15px;  }

.stage .devt0 { abackground-image: url('images/devt0.png'); 	}
.stage .devt1 { background-image: url('images/egyerinto.png'); }
.stage .devt2 { background-image: url('images/nyomkoveto.png');}
.stage .devt3 { background-image: url('images/ketkezlab.png'); }
.stage .devt4 { background-image: url('images/mikrotele.png'); }
.stage .devt5 { background-image: url('images/teletalca.png'); }
.stage .devt6 { background-image: url('images/gombfogo.png'); 	}
.stage .devt7 { background-image: url('images/gyakorlo.png'); 	}


.stage .devbtn { background-color: #eeeeee; }
.stage .devbtn:visited { color: #000000; }
.stage .filtered { background-color: #0072BC !important; color: #ffffff; }

.stage .resulttable,
.stage .settingstable,
.stage .detailtable { border-collapse: collapse; width:  330px; }
.stage .detailtable { width: 100%; }
.stage .detailtr { display: none; padding: 0px; }

.stage .resulttable tr { border: 1px solid #000000; }
.stage .resulttable th { abackground: #eeeeee; }
.stage .resulttable td,
.stage .resulttable th {
	border: 1px solid #000000;
	padding: 0px 10px;
}
.stage .settingstable { float: left; margin-bottom: 4px; }
.stage .settingstable td { padding: 5px 10px; }
.stage .bottombuttons input,
.stage .bottombuttons a { float: right;  margin: 10px; line-height: 32px; }

.stage .devlistitem h4 {
	margin-top: 0px;
	margin-bottom: 0px;
}

.stage .demobtn {
	display: block;
	position: absolute;
	width: 150px;
	text-align: center;
	cursor: pointer;
	font-size: 12pt;
	bottom: 10px;
	left: 10px;
}

.stage #resultcontainer {
	margin: auto;
	padding: 30px;
	font-size: 18pt;
}

.stage #resultdescription {
	float: left;
	height: 100vh;
	font-size: 18pt;
	padding: 20px;
	width: 50%;
	margin: auto;
	acolor: #eeeeee;
}

.stage .w100 { width: 100px; margin: auto; margin-top: 10px; }

.stage .nextbtn,
.stage .lastbtn {
	display: block;
	aposition: absolute;
	bottom: 3px;
	width: 100px;
	height: 50px;
	line-height: 50px;
	font-size: 14pt;
	padding: 0px;
}

.stage .nextbtn:hover,
.stage .nextbtn:active,
.stage .nextbtn:visited,
.stage .nextbtn { right: 3px; background: #0083c8; }
.stage .disabledbtn:hover,
.stage .disabledbtn:active,
.stage .disabledbtn:visited,
.stage .disabledbtn { background: #444444; }
.stage .lastbtn:hover,
.stage .lastbtn:active,
.stage .lastbtn:visited,
.stage .lastbtn { left: 3px; background: #444444; }

.stage .homebtn {
	position: absolute;
	z-index: 10000;
	width: 50px;
	height: 50px;
	right: 3px;
	top: 33px;
	background: transparent url('images/exit.png') center center no-repeat;
	background-size: 50px;
	font-size: 0;
	text-indent: 100px;
	overflow: hidden;
}

.stage .helpbtn {
	position: absolute;
	width: 50px;
	height: 50px;
	line-height: 50px;
	background: transparent url('images/help.png') center center no-repeat;
	background-size: 50px;
	color: #ffffff;
	cursor: help;
	font-size: 14pt;
	font-size: 0;
	overflow: hidden;
	text-indent: 100px;
}

.stage .finishbtn:hover,
.stage .finishbtn:active,
.stage .finishbtn:visited,
.stage .finishbtn {
	background: #0083c8;
	width: 106px;
	height: 50px;
	line-height: 50px;
	padding: 0;
	font-size: 14pt;
	margin: 20px auto 0 auto;
}

.stage .btn:hover { text-decoration: none; }
.stage .startbtn {
	padding: 0 15px 0 15px;
	background: #249453;
	color: #ffffff;
	border: 0;
	border-radius: 5px;
	width: 100px;
	height: 50px;
	line-height: 50px;
	margin: auto;
	margin-top: 10px;
	position: relative;
	margin: auto;
	top: 250px;
	font-size: 14pt;
	z-index: 1000;
	cursor: pointer;
	text-align: center;
}

.stage .icongrid { padding: 30px 10px 10px 10px; text-align: center; }
.stage .examlist{ margin-top: 15px; text-align: left; font-size: 12pt; }
.stage .examlist li { text-align: left; list-style-type: none; }

.stage .exammark,
.stage .nexammark {
	display: block;
	position: absolute;
	z-index: 10000;
	width: 100px;
	left: 3px;
	top: 3px;
	padding: 2px;
	border-radius: 2px;
	color: #333333;
}
.stage .exammark {  background: #4CFF4A; }
.stage .nexammark { background: #FF3846; }

.stage #leirasbtn,
.stage #kepekbtn{ padding-left: 15px !important; padding-right: 15px !important; position: absolute; left: 462px; bottom: 3px; width: 120px; text-align: center; }

.stage .leiras video { width: 820px; }
.stage .istepbtn{ padding-left: 15px !important; padding-right: 15px !important; position: absolute; right: 3px; bottom: 3px; width: 100px; text-align: center; }
.stage .leiras h2 {
	margin-top: 0;
	margin-bottom: 10px;
}

/* test.css */
.stage #inputlog {
	width: 49%;
	float: right;
	height: 500px;
}
.stage .worksfine { background: #7dcea0 !important; color: #eeeeee;}
.stage .res { width: 49%; float: left; }
.stage .joytab { margin-left: auto; margin-right: auto; }
.stage .ip { padding: 5px; background: yellow; margin: 2px; color: #333333; }
.stage span.ip,
.stage .ipp { display: inline-block; }
.stage .testimg {
	height: 80px;
	float: left;
}
/* test.css */

/* adminlogin */
.stage div#adminlogin {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(200,200,200,0.9);
	color: #0083c8;
	font-size: 20pt;
	z-index: 100;
}
.stage div#adminlogin h2 { color: #0083c8 !important; }
.stage div#listd {
	border: 2px dashed #0083c8;
	width: 400px;
	height: 400px;
	overflow: scroll;
	overflow-x: hidden;
	margin: 10px auto;
}

/* SZINSOROLO */

.stage #showcolor {
	border: 3px solid black !important;
}
/* adminlogin */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.ns_page {
	margin: auto;
	max-width: 980px;
	width: 100%;
}

.ns_title {
	background: #32CFA5;
	color: #ffffff;
	border-radius: 5px;
	padding: 10px;
	text-align: center;
	font-size: 24px;
	margin-bottom: 15px;
}

.ns_d {
	font-size: 16pt;
	text-align: justify;
	padding: 0 5px 0 5px;
}

.stage .ns_d h2 { color: #19779F; }

@media screen and (max-width: 1400px){
	.ns_d {
		font-size: 13pt;
	}
}


.ns_d p {
	margin: 0 0 20px 0;
	/* display: inline-block;*/ /* This is for orphans and widows in firefox. */
}

.ns_d figure {
	padding: 0;
	margin: 0;
}

.ns_q {
	background: #19769F;
	color: #ffffff;
	padding: 15px 10px;
	border-radius: 5px;
	margin: 15px 0 10px 0;
	font-size: 24px;
}
.ns_q p { margin: 0; }

.ns_i {
	color: #444444;
	font-size: 1em;
	text-align: center;
	margin: 0 0 25px 0;
}

.ns_anss {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	justify-content: center;
}

.ns_ans {
	display: inline-block;
	margin: 10px;
	padding: 35px 10px 25px 10px;
	border: #cccccc 2px solid;
	border-radius: 5px;
	text-align: center;
	position: relative;
	overflow: hidden;
	zoom: 1;
	max-width: 100%;
	min-width: 100px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	flex-grow: 1;
	flex-basis: 0;
}

.ns_anss .c {
	flex-grow: 1;
	flex-basis: fill;
	text-align: center;
	padding: 20px 0 20px 0;
}

.bfb {
	flex-grow: 0;
	flex-basis: auto;
	min-width: 25%;
}

@media screen and (max-width: 800px){
	.ns_anss {
		display: block;
	}
	.ns_ans {
		display: block;
		padding: 15px 15px 15px 15px;
	}
}


.ns_anstf p,
.ns_ans p,
.ns_ansb p {
	margin: 0;
}

.ns_ans .letter {
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	border-radius: 0 0 5px 0;
	text-align: center;
	background: #cccccc;
}

.ns_ans .letter span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 16pt;
}

.ns_anstf,
.ns_ansb {
	display: inline-block;
	margin: 10px 0;
	padding: 10px 10px 10px 40px;
	border: #cccccc 2px solid;
	border-radius: 5px;
	width: 100%;
	text-align: left;
	position: relative;
	overflow: hidden;
	zoom: 1;
	max-width: 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.ns_anstf {
	padding: 10px;
}

.bfb .ns_anstf {
	flex-basis: content;
	min-width: 32%;
	margin-right: 1%;
}


.ns_anstf .letter,
.ns_ansb .letter {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 30px;
	text-align: center;
	background: #cccccc;
}

.ns_anstf .letter span,
.ns_ansb .letter span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 16pt;
}

.ns_ans>input,
.ns_anstf>input,
.ns_ansb>input {
	display: none;
}

.ns_anstf:hover {
	border: #19769F 2px solid;
}

.ns_ans:hover,
.ns_ansb:hover {
	border: #19769F 2px solid;
	color: #19769F;
}

.ns_anstf:hover .letter,
.ns_ans:hover .letter,
.ns_ansb:hover .letter {
	background: #19769F;
	color: #ffffff;
}

.ans_sel {
	background: rgba(25, 118, 159, .2);
	border: #19769F 2px solid;
	color: #19769F;
}
.ans_sel .letter {
	background: #19769F;
	color: #ffffff;
}

.nxtbtn:hover,
.nxtbtn:active,
.nxtbtn:visited,
.nxtbtn {
	margin-top: 20px;
	padding: 5px 30px !important;
}

.onum {
	width: 20px;
	text-align: center;
}

.pairs {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	width: 100%;
}

.pairs .left {
	min-width: 100px;
	flex-grow: 1;
}
.pairs .center {
	min-width: 100px;
	flex-grow: 1;
	position: relative;
}
.pairs .right {
	min-width: 100px;
	flex-grow: 1;
}

.pairs .elem {
	border: #444444 1px solid;
	border-radius: 5px;
	color: #444444;
	padding: 10px;
	text-align: left;
	width: 100%;
	margin-bottom: 10px;
	cursor: pointer;
}

.pairs .elem:hover {
	border: #19769F 1px solid;
	box-shadow: #888888 1px 1px 5px;
	color: #19769F;
}

.pairs .elemsel:hover,
.pairs .elemsel {
	border: #19769F 1px solid;
	box-shadow: #888888 1px 1px 5px;
	background: #19769F;
	color: #ffffff;
}

.pairs .haspair:hover,
.pairs .haspair {
	border: #19769F 1px solid;
	background: #19769F;
	color: #ffffff;
}

.pairs .center .con {
	position: absolute;
	left: 0;
	right: 0;
}

.pairs .center .con .conh1 {
	position: absolute;
	height: 4px;
	border-bottom: 2px solid;
	border-top: 2px solid;
}

.pairs .center .con .conv {
	position: absolute;
	bottom: 0;
	top: 0;
	width: 4px;
	height: 100%;
	border-left: 4px solid;
}

.pairs .center .con .conh2 {
	position: absolute;
	height: 4px;
	border-bottom: 2px solid;
	border-top: 2px solid;
}

/* left or right higher */
.pairs .center .conl .conh1 { left: 0; top: 0; }
.pairs .center .conl .conh2 { bottom: 0; right: 0; }
.pairs .center .conr .conh1 { bottom: 0; left: 0; }
.pairs .center .conr .conh2 { right: 0; top: 0; }

/* n-th connection to alter verticals */
.pairs .center .conp1 .conh1 { width: 9%; }
.pairs .center .conp1 .conv  { left:  9%; }
.pairs .center .conp1 .conh2 { width: 91%; }

.pairs .center .conp2 .conh1 { width: 18%; }
.pairs .center .conp2 .conv  { left:  18%; }
.pairs .center .conp2 .conh2 { width: 82%; }

.pairs .center .conp3 .conh1 { width: 27%; }
.pairs .center .conp3 .conv  { left:  27%; }
.pairs .center .conp3 .conh2 { width: 73%; }

.pairs .center .conp4 .conh1 { width: 36%; }
.pairs .center .conp4 .conv  { left:  36%; }
.pairs .center .conp4 .conh2 { width: 64%; }

.pairs .center .conp5 .conh1 { width: 45%; }
.pairs .center .conp5 .conv  { left:  45%; }
.pairs .center .conp5 .conh2 { width: 55%; }

.pairs .center .conp6 .conh1 { width: 54%; }
.pairs .center .conp6 .conv  { left:  54%; }
.pairs .center .conp6 .conh2 { width: 46%; }

.pairs .center .conp7 .conh1 { width: 63%; }
.pairs .center .conp7 .conv  { left:  63%; }
.pairs .center .conp7 .conh2 { width: 37%; }

.pairs .center .conp8 .conh1 { width: 72%; }
.pairs .center .conp8 .conv  { left:  72%; }
.pairs .center .conp8 .conh2 { width: 28%; }

.pairs .center .conp9 .conh1 { width: 81%; }
.pairs .center .conp9 .conv  { left:  81%; }
.pairs .center .conp9 .conh2 { width: 19%; }

.pairs .center .conp10 .conh1 { width: 90%; }
.pairs .center .conp10 .conv  { left:  90%; }
.pairs .center .conp10 .conh2 { width: 10%; }

.pairs .center .conp1 div  { border-color: #de3a49 !important; }
.pairs .center .conp2 div  { border-color: #89b1e3 !important; }
.pairs .center .conp3 div  { border-color: #2e2832 !important; }
.pairs .center .conp4 div  { border-color: #804130 !important; }
.pairs .center .conp5 div  { border-color: #e28786 !important; }
.pairs .center .conp6 div  { border-color: #a25a76 !important; }
.pairs .center .conp7 div  { border-color: #5ea25a !important; }
.pairs .center .conp8 div  { border-color: #865aa2 !important; }
.pairs .center .conp9 div  { border-color: #a4a4a4 !important; }
.pairs .center .conp10 div { border-color: #a4f0a4 !important; }

/* Feladat leírások */
.twocol {
	column-count: 2;
	column-gap: 40px;
	column-fill: balance-all;
}

.bgray {
	border: 2px solid #cccccc;
	border-radius: 5px;
}
.footnote {
	color: #888888;
	font-size: .8em;
}

.b5r {
	border: 1px solid transparent;
	border-radius: 5px;
}

/* Angol esetén szó kijelölés */
.ansboxa,
.ansboxb,
.ansboxc,
.ansboxd {
	display: inline-block;
	background: #32CFA5;
	padding: 1px 5px;
	vertical-align: baseline;
	position: relative;
	border-radius: 3px;
}
.ansboxa:after,
.ansboxb:after,
.ansboxc:after,
.ansboxd:after {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,100%);
	abackground: #7799bb;
	padding: 1px 3px 1px 3px;
	border-radius: 0 0 3px 3px;
	font-size: 20px;
}

.ansboxa:after { content: 'A'; }
.ansboxb:after { content: 'B'; }
.ansboxc:after { content: 'C'; }
.ansboxd:after { content: 'D'; }

.refno {
	padding-top: 20px;
	display: block;
	color: #aaaaaa;
}

.tort {
	display: inline-block;
	vertical-align: middle;
}
.tort_top {
	border-bottom: 1px solid #000000;
	padding-bottom: 2px;
	margin-bottom: 2px;
	text-align: center;
	display: block;
}
.tort_bottom {
	text-align: center;
	display: block;
}

.ns_q .tort_top {
	border-bottom: 1px solid #ffffff;
}

.ns_anstf {
	position: relative;
}

.ns_anstf_switch {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
}

@media screen and (max-width: 960px){
	.ns_anstf_switch {
		position: static;
		width: 100%;
	}
	.ns_anstf_switch label {
		width: 100%;
		margin-bottom: 5px;
		border-right: 0 !important;
	}
}

.ns_anstf_switch label {
	text-align: center;
	display: inline-block;
	padding: 5px 10px;
	text-align: center;
	background: #dddddd;
	border-right: 1px solid #aaaaaa;
	display: flex;
	align-items: center;
}

.ns_anstf_switch label:hover {
	background: #eeeeee;
}

.ns_anstf_switch label:last-child {
	border-right: 0;
}

.ns_anstf_switch label span {
}

.ns_anstf label input {
	display: none;
}

.ns_anstf label.ans_sel {
	background: #19769F;
	border: 0;
	color: #ffffff;
}

/* BEFUZO */
#befuzo .colorwire {
	border: 10px #666 solid;
}
#befuzo .wiresel {
	border: 10px #aaa solid;
}

#befuzo #connectors {
	background: #666;
}

#befuzo #btnfinish {
	position: static;
}

#befuzo #connections {
	font-size: 15pt;
}

#befuzo #connections table {
	border: 0;
	border-spacing: 2px;
	border-collapse: separate;
}

#befuzo #connections table th,
#befuzo #connections table td {
	background: #dddddd;
	font-size: 15pt;
}

/*  EGYEZTETO */
.stage .teljes {
	position: static;
	border: 0;
}

.stage .tablak {
	margin: 0;
}

.stage .tablak td {
	color: #ffffff;
}

.stage .tablak#felh {
	position: static;
}

.stage .tablak#alap {
	position: static;
}

.stage .ts_page,
.stage .fs_page {
	position: static !important;
	height: auto !important;
}


.stage .ts_page .ts_anss,
.stage .fs_page .fs_anss {
	position: static !important;
}

.stage .fs_page .fs_ans {
	width: 23%;
	margin: 0 1% 0 0;
	padding: 10px;
	color: #ffffff;
	border-left: 0px;
	background: #197BB7;
	border-radius: 5px;
}

.stage .ts_ans_label,
.stage .ts_ans_label::after {
	border: 2px solid #444444;
}

.stage .ts_page .ts_q {
	font-size: 22pt;
	color: #0083c8;
}

.stage .ts_page .nextbtn {
	background: #0083c8;
	margin: 120px auto 0 auto;
}

.stage input.ts_ans:checked+label.ts_ans_label {
	background: #0083c8 !important;
	color: #ffffff !important;
}

.stage #wordcircle #solution {
	border: 2px solid #888888;
}

.stage #circle .circles {
	border: 1px solid #444444;
}

.stage #circle .circless {
	background: #000000;
}

body { padding-bottom: 90px; }

#footqs {
	position: fixed;
	z-index: 15;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	background: #000000;
	color: #ffffff;
	box-shadow: 1px 1px 3px #444444;
}

#footqs :active,
#footqs :visited,
#footqs :hover,
#footqs span,
#footqs a {
	color: #ffffff;
	display: inline-block;
	vertical-align: middle;
	padding: 5px;
	margin: 5px;
	background: #888888;
	border: 0;
	border-radius: 3px;
	font-size: 14px;
	min-width: 25px;
	position: relative;
}

#footqs .sel:active,
#footqs .sel:hover,
#footqs .sel:visited,
#footqs .sel {
	background: #ffffff;
	color: #000000;
}

#footqs .sel:before {
	width: 16px;
	height: 16px;
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%,-70%);
	background: transparent url('images/wdown.png') center center no-repeat;
}

#footqs .done:active,
#footqs .done:hover,
#footqs .done:visited,
#footqs .done {
	background: #19769F;
	color: #ffffff;
}

.startmeasurement:hover,
.startmeasurement:active,
.startmeasurement:visited,
.startmeasurement {
	display: block;
	margin: 10px auto;
	max-width: 30%;
	padding: 10px;
	background: #19769F;
	color: #ffffff;
}