body
{
	margin:0;
	padding:0;
	background-color:#bbbbbb;
}
body.type1
{
	background-color:#fbe9e7;
}
body.type2 {background-color:#e3f2fd;}

.type99 #toolbar {
    display:none;
}
body.type99 {
    background-color:#fff;
}
.pager {
    text-align:Center;
    margin-top:7px;
}
.pagination {
    display:inline-block;
    padding:3px 9px;
    margin:2px;
    background-color:#eee;
    color:#333;
    border-style:solid;
    border-width:1px;
    border-color:#ddd;
    text-decoration:none;
}
.pagination.active {
    background-color:#333;
    color:#eee;
}
.type2 p.info
{
	padding:5px;
	background-color:#e5e8fc;
	color:#171c47;
	font-size:15px;
	border-radius:4px;
}
.type2 td {vertical-align:top;}
.field, .type1 .field
{
	width:64px;
	margin:3px;
	height:48px;
	line-height:40px;
	border:none;
	background-color:#eeeeee;
	box-sizing:border-box;
	color:#333;
	font-size:20px;
	font-weight:bold;
	transition:.2s;
	cursor:pointer;
}
.cleared, .type1 .cleared
{
	background-color:#147d42;
	color:white;
}
#playground
{
	width:600px;
	left:0;
	right:0;
	margin:30px auto;
	background-color:white;
	border-radius:5px;
	box-shadow:0 0 3px 1px rgba(0,0,0,.5);
	padding:15px;
	font-family:Titillium Web;
}
.type2 #playground 
{
	width:850px;
	overflow:hidden;
}
.type2 .codeFrame
{
	width:880px;
	height:600px;
	padding:0;
	margin:-15px;
	border:none;
}
.type2 nickname {font-weight:bold;color:#2196f3;}
h1
{
	text-align:center;
	font-size:26px;
	font-weight:600;
	color:#3a8f32;
}
.type1 h1 {color:#ff5722;}
.type1 button {
	background-color:#ff5722;
}
.type2 h1 {color:#2196f3;}
.type2 button {
	background-color:#2196f3;
}
.type99 h1 {color:#ff0000;}
.type99 button {
	background-color:#ff0000;
}
button i
{
	padding-right:6px;
	display:inline-block;
}
button
{
	background-color:#3a8f32;
	color:white;
	font-size:20px;
	text-align:center;
	width:100%;
	padding:5px 0;
	border:none;
	border-radius:5px;
	cursor:pointer;
}
button.pipit
{
	font-size:13px;
	font-weight:bold;
	color:#666;
	background-color:#ddd;
	padding:3px;
	border-radius:3px;
	cursor:pointer;
	width:auto;
	margin:2px 0 10px 0;
}

/* FELSŐ SÁV */
#toolbar
{
	height:48px;
	background-color:#fff;
	border-style:solid;
	border-color:#ddd;
	border-width:0 0 1px 0;
	box-shadow:0 0 10px 1px rgba(0,0,0,.5);
}
.type1 h4 {
	color:#ff5722;
}

.type2 h4
{
	color:#2196f3;
}
h4
{
	font-family:'Turret Road';
	font-size:20px;
	color:#333;
	margin:0;
	line-height:48px;
	padding-left:10px;
	color: #3a8f32;
}
button.btnPhone
{
		width:auto;
	display:inline-block;
	float:right;
	font-size:15px;
	font-family:Titillium Web;
	font-size:15px;
	line-height:40px;
	margin:4px;
	padding:0 10px;
	background-color:#eee;
	color:#333;
	visibility:hidden;
}
button.btnHelp
{
	width:auto;
	display:inline-block;
	float:right;
	font-size:15px;
	font-family:Titillium Web;
	font-size:15px;
	line-height:40px;
	margin:4px;
	padding:0 10px;
}
#calculator, #help, #focus
{
	background-color:white;
	position:fixed;
	top:58px;
	right:10px;
	width:450px;
	height:550px;
	overflow:hidden;
	z-index:9999;
	border-radius:5px;
	box-shadow:1px 1px 5px 1px rgba(0,0,0,.5);
	margin:0;
	padding:0;
	display:none;
}
#calculator iframe, #help iframe
{
	width:450px;
	height:550px;
	border:none;
}
.sidepanel
{
	
}







.table-simple
{
	border-collapse:collapse;
	border-style:solid;
	border-width:1px;
	border-color:#666;
	width:100%;
}
.table-simple td, .table-simple th
{
	padding:3px;
	border-style:solid;
	border-width:1px;
	border-color:#666;
}
.table-simple th
{
	background-color:#222;
	color:white;
}


details
{
	background-color:white;
	border-radius:3px;
	cursor:pointer;
	padding:4px;
	border-style:solid;
	border-color:#ccc;
	border-width:1px;
	margin:10px 0;
}
summary
{
	border-radius:3px;
	font-weight:bold;
	text-align:center;
	background-color:#eee;
	margin:-4px -4px -4px -4px;
	padding:2px;
	font-size:14px;
}
#progressRow
{
	display:none;
}
.type1 #progressRow {display:block;}
.type2 #progressRow {display:block;}
.type99 #progressRow {display:block;}

.type2 .progOuter {width:100vw;height:4px;background-color:#fce4ec;position:relative;}
.type2 .progInner {height:4px;background-color:#e91e63;position:absolute;top:0;left:0;}

.progOuter {width:100vw;height:4px;background-color:#ffc0ad;position:relative;}
.progInner {height:4px;background-color:#ff5722;position:absolute;top:0;left:0;}

.rangeInput { padding:5px;margin:5px 0;border-radius:4px; background-color:#fbe9e7;}
.tabs {background-color:#eee;padding-bottom:5px;border-collapse:collapse;}
.tab-strip{display:flex;  flex-direction: row; align-items: stretch;margin:0 5px 5px 5px}
.tab {background-color:#fff;font-weight:normal;font-size:14px;line-height:24px;cursor:pointer;border-style:solid;border-width:1px;border-color:#ccc;flex:1;margin:5px 5px 0 5px;text-align:center;border-radius:4px;}
.tab-content {display:none;padding:5px;margin:0 5px 5px 5px;min-height:150px;border-style:solid;border-color:#ccc;border-width:1px;background-color:white;border-radius:5px;}
.tab-visible {display:block !important;}
.tab-selected { background-color:#ff5722;color:white; }
prev{cursor:pointer;font-weight:bold;color:blue;}

.timer {background-color:#eee;padding:3px;font-size:14px;}
.timer #remTime, .timer #allTime {font-weight:bold;}
.timer #taskFinished {font-weight:bold;color:#ff5722;display:none;}
overline {text-decoration:overline;}


@media screen and (max-width: 650px) {
	.field { width:48px !important; }
	#playground {
		width:100vw;
		max-width:100vw;
		box-sizing:border-box;
		margin:0;
		box-shadow:none;
		border-radius:0;
		padding: 4px 8px;
	}
	.btnHelp, .btnPhone, h4 small {display:none !important;}
	h4 { text-align:center; }
	h1 { font-size:22px;margin-bottom:0; }
	#focusButton {display:inline-block !important;}
	#focus {
		height:calc(100vh - 80px);
		width: calc(100vw - 20px);
	}
}