body{}
.hidden{display:initial; box-sizing:border-box;}
.fillparent{width:100%; height:100%;}

.hoverhighlight{background:red !important;}

.flexbuttongroup{display:flex;}
.flexbutton{flex:1; margin:2px;}

#headbar{position:absolute; top:0px; right:0px; left:0px; height:24px;}
	#headcontent{display:flex;}
		.headbutton{margin:1px;}
		#droptrackbutton{background-image:url('trackbutton.png');}
		#headbar .contenttab{width:80px;}
		#logsmallstats{padding:3px; float:right; cursor:default;}
		#logtitle{padding:3px; cursor:default; flex:1;}

#mainpanel{position:absolute; top:24px; left:0px; right:0px; bottom:0px; background:url('/nis/alt1-currentskin/background.png');}
	.menupadding{height:20px;}
	.menuheader{margin:5px; height:30px; font-size:24px; text-align:center;}
	.menuleft{float:left; width:110px; margin-left:5px;}
	.menuright{float:right; width:55%; margin-right:5px; white-space:nowrap;}
	.menubr{width:100%; clear:both; height:1px;}
	.menustory{margin:5px;}
	.menuborder{width:98%; height:1px; margin:5px 1% 2px; background:rgba(100,100,100,0.4);}
	.menufloatbutton{float:left; margin:2px 5px; cursor:pointer; padding:2px; border-radius:6px; border:1px solid rgba(255,255,255,0.1);}
	.menufloatbutton:hover{background:rgba(255,255,255,0.2);}
	.menucheckbox{float:left; display:block;}
	.menucheckbox input{vertical-align:middle;}
	.menubutton{cursor:pointer; margin:3px 1px 1px; border:1px solid rgba(255,255,255,0.1); text-align:center; width:100px; float:left;}
	.menubutton:hover{background:rgba(255,255,255,0.2);}
	.menuexit{position:absolute; top:6px; right:4px; background:url("exitbutton.png"); cursor:pointer; width:16px; height:16px;}
	.menuexit:hover{background-position:0px -16px;}
	
	#log{position:absolute; top:0px; left:0px; right:0px; bottom:22px; overflow-y:auto; display:none; line-height:20px;}
	#log.editdropitem{bottom:95px;}
		.droprow{display:flex;}
			.droplisttrip{text-align:center; background:rgba(221,221,221,0.23); white-space:nowrap; overflow:hidden; margin-bottom:10px;}
			.dropscolumn-nr{padding-left:5px; padding-right:5px;}
			.dropscolumn-item{flex:1;}
			.dropscolumn-value{padding-left:5px;}
			.dropscolumn-remove{width:20px; height:20px; background:url('delete.png') center no-repeat; cursor:pointer;}
			.amounteditable{cursor:ew-resize;}
				.droplistitem{display:flex;}
				.droplistimg{width:20px; height:20px; -webkit-filter:drop-shadow(0px 0px 2px rgba(255,255,255,0.6)); filter:drop-shadow(0px 0px 2px rgba(255,255,255,0.6)); background-size:contain; background-position:center; background-repeat:no-repeat; margin-right:5px;}
				.droplistlabel{flex:1;}

	#logfootleft, #logfootright{position:absolute; left:0px; bottom:0px; right:0px; height:22px; display:none;}
		#logfootleft .nisseperator,
		#logfootright .nisseperator
			{top:0px;}

	#drops{position:absolute; top:0px; right:0px; left:0px; bottom:0px; overflow-y:auto; display:none;}
	#drops.editdrop{bottom:95px;}
	#drops.editing{background:rgba(255, 255, 0, 0.24);}
		.dropsection{float:left; width:100%;}
		.dropsectiontitle{font-size:20px; font-family:sans-serif; width:100%; text-align:center;}
		.dropset{display:flex; flex-wrap:wrap; justify-content:space-around;}
		.dropouter{width:80px; height:40px; margin:2px; background:#DDD; border-radius:10px; position:relative; overflow:hidden; float:left; color:#000;}
		.dropfiller{margin-top:0px; margin-bottom:0px; height:0px;}
		#drops.editing .dropouter{cursor:pointer;}
		#drops[data-displaysize='0'] .dropouter{width:120px;}
		#drops[data-displaysize='1'] .dropouter{width:80px;}
		#drops[data-displaysize='2'] .dropouter{width:40px;}
			.dropimageouter{position:absolute; top:1px; left:1px; width:36px; height:36px; border:1px solid #999; border-radius:10px; background:radial-gradient(circle,#EEE,#AAA); overflow:hidden; cursor:pointer; -webkit-user-select:none; -moz-user-select:none;}
				.dropimage{background-position:center; background-repeat:no-repeat; width:36px; height:36px;}
				.dropbunch{position:absolute; top:0px; left:2px; font-size:12px; font-family:"Small fonts", monospace; font-weight:bold; color:#FF0; text-shadow:1px 1px #000;}
				.dropimghelp{position:absolute; bottom:0px; right:4px; font-size:10px; font-weight:bold; background:#DDD; border-radius:4px; padding-left:2px;}
				.secondarydrop{position:absolute; top:0px; right:4px; background:#DDD; font-size:10px; border-radius:4px;}
				.dropbunch.hidden{display:none;}
			.dropnumber{position:absolute; top:6px; left:40px; height:30px; width:40px; font-size:24px; font-family:sans-serif; text-align:center;}
			.dropchance{position:absolute; top:2px; left:80px; height:18px; width:40px; text-align:center;}
			.dropvalue{position:absolute; top:18px; left:80px; height:18px; width:40px; text-align:center;}
		.dropdetails{width:80px; height:40px; float:left; position:relative; margin:2px; background:#DDD; border-radius:10px; background:radial-gradient(circle,#EEE,#AAA); overflow:hidden;}
			.slider{position:absolute; top:26px; left:50px; right:10px; height:4px; background:#777;}
				.sliderhandle{position:absolute; top:0px; left:0px; margin:-3px -5px; width:10px; height:10px; background:#000; border-radius:5px; cursor:pointer;}
	
	#dropedit{position:absolute; bottom:0px; left:0px; right:0px; height:95px; background:url('/nis/alt1-currentskin/background.png'); display:none;}
	
	#dropitemedit{position:absolute; bottom:0px; left:0px; right:0px; height:95px; background:url('/nis/alt1-currentskin/background.png'); display:none;}

	#logselect{position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:none; flex-direction:column;}
		#logselectinner{flex:1; overflow-y:auto;}
			.loglistitem{width:100%; cursor:default; background:rgba(255,255,255,0.05); user-select:none; -webkit-user-select:none; -ms-user-select:none; padding:2px; border:1px solid transparent; box-sizing:border-box; position:relative; height:22px;}
			.loglistitem:nth-child(2n+1){background:rgba(255,255,255,0.1);}
			.loglistitem.logcurrent{background:rgba(251, 255, 110, 0.4);}
			.loglistitem:hover{border-color:yellow;}
				.loglistitemname{overflow:hidden; margin-right:75px; white-space:nowrap;}
				.loglistitemexport{position:absolute; top:2px; right:35px; width:16px; height:16px; background:url("export.png"); cursor:pointer;}  
				.loglistitemexport:hover{background-position:0px -16px;}
				.loglistitemsettings{position:absolute; top:2px; right:19px; width:16px; height:16px; background:url("settingscog.png"); cursor:pointer;}  
				.loglistitemsettings:hover{background-position:0px -16px;}
				.loglistitemremove{position:absolute; top:2px; right:3px; width:16px; height:16px; background:url("trash.png"); cursor:pointer;}  
				.loglistitemremove:hover{background-position:0px -16px;}
				.loglistitemconnection{position:absolute; cursor:pointer; top:2px; right:54px;}
				.loglistitemconnection:hover{color:white;}
		
	#logsettings{position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:none; overflow-y:auto; overflow-y:auto; background:url('/nis/alt1-currentskin/background.png'); z-index:1;}

	#templatesettings{position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:none; overflow-y:auto; background:url('/nis/alt1-currentskin/background.png'); z-index:2;}

	#timport{position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:none; overflow-y:auto; background:url('/nis/alt1-currentskin/background.png'); z-index:3;}
	
	#clonetemplate{position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:none; overflow-y:auto; background:url('/nis/alt1-currentskin/background.png'); z-index:3;}

	#stats{position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:none; overflow-y:auto;}
		#graph{overflow:hidden; height:150px; width:95%; background:url('brightback.png'); position:relative; margin:5px auto; box-shadow:0px 0px 5px #000 inset; border-radius:10px;}
			#graphinner{width:100%; height:100%;}
			.datapoint{position:absolute; width:2px; height:2px; background:#000; margin-left:-1px; margin-top:-1px;}
			.databigpoint{position:absolute; width:6px; height:6px; background:#F00; margin-left:-3px; margin-top:-3px;}
			.graphscale{position:absolute; width:100%; border-bottom:1px solid rgba(0,0,0,0.15); color:rgba(0,0,0,0.5); padding-left:4px; margin-bottom:-2px;}
	
	#export{position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:none; overflow-y:auto; background:url('/nis/alt1-currentskin/background.png'); z-index:3;}
	
	#import{position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:none; overflow-y:auto; background:url('/nis/alt1-currentskin/background.png'); z-index:3;}
	
	#con{position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:none; overflow-y:auto; background:url('/nis/alt1-currentskin/background.png'); z-index:3;}
		


#messageouter{position:absolute; top:10px; left:10px; z-index:101; transition:top 0.5s; -webkit-transition:top 0.5s; -moz-transition:top 0.5s; -ms-transition:top 0.5s;}
#messageouter.hidden{top:-100px;}
	#messageinner{color:#000; font-family:sans-serif; font-size:13px; max-width:400px; box-shadow:0px 0px 10px #000; background:#DDD; border-radius:10px; padding:5px 10px; cursor:pointer;}

#amountselect{display:none; position:fixed; width:120px; height:35px; background:rgba(42, 42, 45, 0.97); border:1px solid orange; border-radius:10px; z-index:100;}
	#amounthead{position:absolute; top:2px; left:5px; right:5px; text-align:center;}
	#amountbar{position:absolute; top:16px; left:3px; right:3px; width:initial;}


body[data-currenttab='0'] #log{display:block;}
body[data-currenttab='2'] #drops{display:block;}
body[data-currenttab='1'] #logselect{display:flex;}
body[data-currenttab='3'] #stats{display:block;}

/*Wide display changes*/
#leftpanel{position:absolute;}
#rightpanel{position:absolute;}
body[data-wide='true'] #leftpanel{left:0px; width:50%; bottom:0px; top:0px;}
body[data-wide='true'] #rightpanel{width:50%; width:calc(50% - 1px); right:0px; bottom:0px; top:0px;}
body[data-wide='true'] #log{display:block;}
body[data-wide='true'] #tab-0{display:none;}
body[data-wide='false'] #leftpanel,
body[data-wide='false'] #rightpanel
	{left:0px; right:0px; bottom:0px; top:0px;}
body[data-wide='false'] #drops{bottom:22px;}
body[data-wide='false']:not([data-currenttab='0']) #leftpanel{display:none;}

#panelsep{display:none; width:0px; left:50%; position:absolute; height:100%; border-left:1px solid rgba(255, 255, 255, 0.1); }
body[data-wide='true'] #panelsep{display:block;}


body[data-currenttab='2'][data-wide='false']  #logfootright
	{display:flex;}
body[data-currenttab='0'] #logfootleft,
body[data-wide='true'] #logfootleft
	{display:flex;}