@charset "utf-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
}

body{
	background-color: #484848;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 18px;
}

#PassCurtain{position:fixed; width:100%; height: 100%; background-color: #4449; z-index: 100;}
#PassPrompt{ margin: 20% auto; position:relative; color: white; width: 200px; padding:20px; background-color:#484848; }
#Pass{ width: 200px; margin: 10px 0; padding: 5px;}
#PassButt{ width:100px; margin:10px 50px; }

.green{background-color: #49c5b6;}
.orange{background-color: #f95430;}

#Wrap{
	margin: auto;
}
		
#Loading, #Error{display: none; border: 2px solid white; width: 500px; height: 150px; position: absolute; top: 220px; left: 380px; background-color: #262626; color: white;z-index: 10;line-height: 145px; text-align: center; font-size: 25px;}
#Loading > img, #Error > img{width: 150px; height: 150px;float: left;}

		#CCWrap{height:930px; float: left;}
		#IndicesWrap{float: left;}

#Menu{
	position: relative;
	background-color: #496288;
	background-image: url('img/fade.png');
	background-position: bottom left;
	background-repeat: repeat-x;
	width: 1280px;
	height: 130px;
}

.submenu{
	float: left;
	margin-right: 252px;
	/*margin-right: 190px;*/
	overflow: visible;
}

.submenu>span{
	float: left;
	color: white;
	height: 30px;
	margin-top: 2px;
}

.button{
	float: left;
	margin: -2px 0 0 10px;
	border: 2px solid #4d4d4d;
	z-index: 1;
}

#HoverTxt{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	padding: 20px;
	color: white;
	background-color: #222;
	z-index: 99;
}

.button.inactive{opacity: 0.5;}
.button.active{border: 2px solid white;}
.button:not(.inactive):hover {border: 2px solid white; cursor: pointer;}
.dockwrap{
	float: left;
width: 0px;
height: 72px;
overflow: visible;
position: relative;
z-index: 2;
}
.dock{width: 0px; height: 72px; overflow: hidden;background-color: #262626;position: absolute; color: white;}
.closedock{float: right;margin:10px;}
.dockliner{float:left; margin: 2px 10px; height: 100%; line-height: 34px;}
.dockselect{width: 295px;font-size: 16px; font-family:'Open Sans Condensed', sans-serif; height: 30px;  margin-top:0; border: none; }

.file {
    float:left;font-size: 16px; cursor:pointer; font-family:'Open Sans Condensed', sans-serif; height: 30px;  line-height:30px; margin-top:0; border: none; padding:0 15px 0 10px; color:black; background-color:white;
}

#SaveName{float:left;width:150px;font-size: 16px; font-family:'Open Sans Condensed', sans-serif; height: 30px;  margin-top:0; border: none; padding:0 5px;}
#StoreGo{float:left;font-size: 16px; font-family:'Open Sans Condensed', sans-serif; height: 30px; line-height:30px;  margin-top:0; border: none; padding:0 5px;width:60px;background-color: white;color:black;margin-left:4px;text-align: center;cursor:pointer;}
#TestBed{ display: none;}
#TabWrap{
	position: absolute;bottom: 0;left: 0;width: 100%;	height: 45px; display: none;
}
#TabLiner{
	 margin:8px 2px 0 2px; float: left; width: 10px; height: 37px; overflow: hidden;
}
#TabInnerLiner{margin-left: 0; height: 45px; width:10000000px; overflow: hidden;	}
.scrollTabs{	margin-top:8px; float: left; width: 30px; height: 27px; padding-top:3px; padding-left:4px; background-color:#CCC;cursor:pointer; }
.scrollTabs:hover{background-color: #EEE;}

#AddPart{font-size: 20px; height: 20px;padding:5px 10px 12px 10px; overflow: hidden;position:absolute;right:20px; margin-left: 10px;cursor: pointer;background-color:#CCC; width: 90px !important;}
#AddPart:hover{background-color: #EEE;}

.tab{float:left; position:relative; margin-left: 10px; margin-bottom: 10px; cursor: pointer;background-color:#CCC;overflow: hidden;}
.tab:hover{background-color: #EEE;}
.tab.active{background-color: #dfe1e8;}
.component.tab.active{width: 200px !important;}

.product { font-size: 25px; height: 25px;padding:5px 35px 15px 10px; margin-right:10px; }
.component {font-size: 20px; height: 20px;padding:5px 10px 12px 10px; overflow: hidden;}

.editP{position: absolute;right: 5px;top:5px;margin-top: 5px;
		width:24px;height:24px;background-image: url('img/edit.png');}
.editP:hover{background-image: url('img/editH.png');}

.edit{
	position:absolute; top:0; right:30px; 
	width: 30px; height: 35px; 
	overflow: hidden; display: none; 
	background-image: url('img/edit.png'); 
	background-repeat: no-repeat; 
	background-position: left center;
}
.edit:hover{background-image: url('img/editH.png');}
.delete{
	position:absolute; top:0; right:0; 
	width: 30px; height: 35px; 
	overflow: hidden; display: none; 
	background-image: url('img/delete.png');
	background-repeat: no-repeat; 
	background-position: left center;
}
.delete:hover{background-image: url('img/deleteH.png');}

.tab > input{
	background-color: inherit; font-family: 'Open Sans Condensed', sans-serif;
	overflow: hidden;
	 outline: none !important;
    border:1px solid #707070;
}
.tab > input:focus{}

.component > input{
	font-size: 20px; height: 30px; width: 150px; padding:4px 10px 8px 4px; margin-left:-5px; 
}
.product > input{
	font-size: 25px; height: 35px; width: 150px; padding:9px 10px 8px 4px; margin-left:-5px; 
}


.switch{
	width: 160px;
	height: 40px;
	border: 4px solid #707070;
	cursor: pointer;
	float: left;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
}

.switch:hover{
	border:4px solid white;
}

#Level.PL{		background-image: url('img/prod.png');}
#Level.CL{		background-image: url('img/comp.png');}
#Mode.VM{		background-image: url('img/valu.png');}
#Mode.PM{		background-image: url('img/prof.png');}

#Tabspace{position: relative;background-color: #dfe1e8;width: 100%; height: 30px;}

#CC{
	background-image: url('img/CC.png');
	width: 1280px;
	height: 800px;
	position: absolute;
}
		
		#CCbg{
			background-color: #dedfe5;
			width: 1280px;
			height: 800px;
			position: absolute;
		}

#IndicesMenu{
	background-color: #2a2a2a;
	float: left;
	color: #dfe1e8;
}

#Logo{width: 160px; margin: 20px 0 10px 42px;}
#Title{width: 175px; margin: 0 0 10px 42px; display: block; font-size: 24.5px; }

#Indices{
	background-color: darkgrey;
	float: left;
}

#IndicesOverlay{
	display: none;
	background-image: url('img/white30.png');
	position: absolute;
}

#IndicesOverlay > div{
	position: relative;
	width: 100px;
	text-align: center;
	padding: 18px;
	border:2px solid black;
	background-color: black;
	color: white;
	font-weight: bold;
	cursor: pointer;
}
#IndicesOverlay > div:hover{
	border: 2px solid white;
}


#Copyright{
	width: 500px;
	/*background-color: #2a2a2a;*/
	height: 23px;
	position: absolute;
	top: 915px;
	margin-left: 30px;
	color: #999;
	font-size: 16px;
}

#EU{
	width: 420px;
	/*background-color: #2a2a2a;*/
	height: 23px;
	position: absolute;
	top: 910px;
	margin-left: 830px;
	color: #999;
	font-size: 12px;
}

#EU>div{width: 370px;float: left;}

#BomWrap{
	min-height: 20px;
	width: 1530px;
	background-color: white;
	float: left;
}

#BomWrap > table{
	border-collapse: collapse;
}
#BomWrap td{
	border-bottom: 1px solid #999;
	padding: 5px;
	font-size: 16px;
}

#BomWrap input{
	width: 50px;
	text-align: left;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 16px;
	margin-left: -2px;
}

#ErrorMessage{	
	position: relative;
	width: 260px;		
	padding: 10px;
	background-image: url('img/black50.png');
	color: white;
	font-weight: 700;
	z-index: 10;
}

.stock{
	width: 90px;
	position: absolute;
}
		
		.bg{	height: 140px;}
		.bar{	height: 0px;}
		.bor{	height: 140px; border: 5px solid black; margin:0 0 -5px -5px; opacity:0; background-color: transparent !important;}
		.val{ height: 50px; color: white; font-size: 24px; font-weight: 700; text-align: center;}
		
		.linear{		bottom:520px;}
		.circular{	bottom:340px;}
		.endofpipe{	bottom:160px;}
		
		.materials{		left: 30px;}	.matq{left: 30px;}	  
		.manufactured{	left: 330px}	.manq{right: 965px}	
		.assembled{		left: 510px;}	.assq{right: 760px;}	
		.provided{		left: 690px;}	.proq{right: 580px;}	
		.customers{		left: 870px;}	.cusq{right: 400px;}	
		.waste{			left: 1160px;}	.wasq{right: 110px;}	
		.openloopin{	left: 30px;}	.opiq{right: 30px;}	
		.closedloop{	left: 220px;}	.cloq{right: 220px;}	
		.remanufactured{left: 400px;}	.remq{right: 400px;}	
		.refurbished{	left: 580px;}	.refq{right: 690px;}	
		.reissued{		left: 760px;}	.reiq{right: 510px;}	
		.collected{		left: 970px;}	.colq{right: 300px;}	
		.downcycled{	left: 1160px;}	.dowq{right: 110px;}	
		.openloopout{	left: 30px;}	.opoq{right: 30px;}	
		.scrapped{		left: 1160px;}	.scrq{right: 110px;}	

/*
.materials.light{		background-color:#bfa590;}		.materials.full{		background-color:#b9621d;}		.materials.bright{		border-color:#cc5c00; background-color:#cc5c00;}	.materials.txtfull{		color:#b9621d;}	
.manufactured.light{	background-color:#91b3ae;}		.manufactured.full{	background-color:#00695b;}		.manufactured.bright{	border-color:#1f8f80; background-color:#1f8f80;}	.manufactured.txtfull{	color:#00695b;}	
.assembled.light{		background-color:#93aeb7;}		.assembled.full{		background-color:#005975;}		.assembled.bright{		border-color:#27819c; background-color:#27819c;}	.assembled.txtfull{		color:#005975;}				
.provided.light{		background-color:#9aa7b9;}		.provided.full{		background-color:#173773;}		.provided.bright{			border-color:#3d67a4; background-color:#3d67a4;}	.provided.txtfull{		color:#173773;}		
.customers.light{		background-color:#a59ab7;}		.customers.full{		background-color:#2b0074;}		.customers.bright{		border-color:#623e9e; background-color:#623e9e;}	.customers.txtfull{		color:#2b0074;}	
.waste.light{			background-color:#bb9aa4;}		.waste.full{			background-color:#8c0028;}		.waste.bright{				border-color:#ab3e5e; background-color:#ab3e5e;}	.waste.txtfull{			color:#8c0028;}	
.openloopin.light{	background-color:#c8b791;}		.openloopin.full{		background-color:#d79d1f;}		.openloopin.bright{		border-color:#fcad00; background-color:#fcad00;}	.openloopin.txtfull{		color:#d79d1f;}		
.closedloop.light{	background-color:#b3bdb0;}		.closedloop.full{		background-color:#558e48;}		.closedloop.bright{		border-color:#8fb088; background-color:#8fb088;}	.closedloop.txtfull{		color:#558e48;}		
.remanufactured.light{background-color:#aebebc;}	.remanufactured.full{background-color:#37998c;}		.remanufactured.bright{	border-color:#7fb5ae; background-color:#7fb5ae;}	.remanufactured.txtfull{color:#37998c;}	
.refurbished.light{	background-color:#afbcc0;}		.refurbished.full{	background-color:#3e8da4;}		.refurbished.bright{		border-color:#84afbd; background-color:#84afbd;}	.refurbished.txtfull{	color:#3e8da4;}	
.reissued.light{		background-color:#b0b7c0;}		.reissued.full{		background-color:#3667af;}		.reissued.bright{			border-color:#889ebd; background-color:#889ebd;}	.reissued.txtfull{		color:#3667af;}	
.collected.light{		background-color:#ae9bb4;}		.collected.full{		background-color:#59006d;}		.collected.bright{		border-color:#814294; background-color:#814294;}	.collected.txtfull{		color:#59006d;}		
.downcycled.light{	background-color:#bb96b1;}		.downcycled.full{		background-color:#830061;}		.downcycled.bright{		border-color:#aa308b; background-color:#aa308b;}	.downcycled.txtfull{		color:#830061;}		
.openloopout.light{	background-color:#c5ba9d;}		.openloopout.full{	background-color:#e4af3d;}		.openloopout.bright{		border-color:#eeb02a; background-color:#eeb02a;}	.openloopout.txtfull{	color:#e4af3d;}
.scrapped.light{		background-color:#c3b3b8;}		.scrapped.full{		background-color:#b2536f;}		.scrapped.bright{			border-color:#e05e83; background-color:#e05e83;}	.scrapped.txtfull{		color:#b2536f;}		
*/

.matlight{background-color:#bfa590;}	.matfull{background-color:#b9621d;}		.matbright{border-color:#cc5c00; background-color:#cc5c00;}	.mattxtfull{color:#b9621d;}	
.manlight{background-color:#91b3ae;}	.manfull{background-color:#00695b;}		.manbright{border-color:#1f8f80; background-color:#1f8f80;}	.mantxtfull{color:#00695b;}	
.asslight{background-color:#93aeb7;}	.assfull{background-color:#005975;}		.assbright{border-color:#27819c; background-color:#27819c;}	.asstxtfull{color:#005975;}				
.prolight{background-color:#9aa7b9;}	.profull{background-color:#173773;}		.probright{border-color:#3d67a4; background-color:#3d67a4;}	.protxtfull{color:#173773;}		
.cuslight{background-color:#a59ab7;}	.cusfull{background-color:#2b0074;}		.cusbright{border-color:#623e9e; background-color:#623e9e;}	.custxtfull{color:#2b0074;}	
.waslight{background-color:#bb9aa4;}	.wasfull{background-color:#8c0028;}		.wasbright{border-color:#ab3e5e; background-color:#ab3e5e;}	.wastxtfull{color:#8c0028;}	
.opilight{background-color:#c8b791;}	.opifull{background-color:#d79d1f;}		.opibright{border-color:#fcad00; background-color:#fcad00;}	.opitxtfull{color:#d79d1f;}		
.clolight{background-color:#b3bdb0;}	.clofull{background-color:#558e48;}		.clobright{border-color:#8fb088; background-color:#8fb088;}	.clotxtfull{color:#558e48;}		
.remlight{background-color:#aebebc;}	.remfull{background-color:#37998c;}		.rembright{border-color:#7fb5ae; background-color:#7fb5ae;}	.remtxtfull{color:#37998c;}	
.reflight{background-color:#afbcc0;}	.reffull{background-color:#3e8da4;}		.refbright{border-color:#84afbd; background-color:#84afbd;}	.reftxtfull{color:#3e8da4;}	
.reilight{background-color:#b0b7c0;}	.reifull{background-color:#3667af;}		.reibright{border-color:#889ebd; background-color:#889ebd;}	.reitxtfull{color:#3667af;}	
.collight{background-color:#ae9bb4;}	.colfull{background-color:#59006d;}		.colbright{border-color:#814294; background-color:#814294;}	.coltxtfull{color:#59006d;}		
.dowlight{background-color:#bb96b1;}	.dowfull{background-color:#830061;}		.dowbright{border-color:#aa308b; background-color:#aa308b;}	.dowtxtfull{color:#830061;}		
.opolight{background-color:#c5ba9d;}	.opofull{background-color:#e4af3d;}		.opobright{border-color:#eeb02a; background-color:#eeb02a;}	.opotxtfull{color:#e4af3d;}
.scrlight{background-color:#c3b3b8;}	.scrfull{background-color:#b2536f;}		.scrbright{border-color:#e05e83; background-color:#e05e83;}	.scrtxtfull{color:#b2536f;}		


.label{
	width: 180px;
	position: absolute;
	font-weight: 700;
	font-size: 20px;
	line-height: 22px;
}
		.label > span{	font-weight: 300;}
		.right{ text-align: right; left: 1070px;}
		
		.label.top{		bottom: 665px;}	.shortans.top{bottom: 710px;}
		.label.bottom{	top: 645px;}		.shortans.bottom{top: 690px;}
		
	
		
.shortans{
	position: absolute;
	font-size: 16px;
	line-height: 18px;
	padding: 10px 20px 10px 10px;
	margin: 0 0 0 -10px;
	overflow: visible;
	color: black;
	cursor: pointer;
}		

.sright {float: right;padding-left: 10px;}

	
#CloseShortans{
	width: 1280px;
	height: 800px;
	position: absolute;
/*	background-image: url('img/black50.png');
*/	display: none;
	z-index: 1;
}

.closed{	color: #999;	background-color: transparent;z-index: 1;} 
.shortans.open{padding-left: 109px;margin-left: -109px;z-index: 2;} 
.shortans.qright.open{padding-left: 10px;width: 165px;margin-left: -10px;}
.open .flag{display: block;}
.unans:not(.drivenshort){color: black;}
.drivenshort{text-decoration: underline;}
/*
.flag{
	height: 0;
	width: 0;
	position: absolute;
	overflow: visible;
	border-top:30px solid red;
	border-left:195px solid transparent;
	margin-top:-10px;
	background-image: url('img/black30.png'); 
	display: none;
}
*/
.flag{
	background-image: url('img/flag.png'); 
	position: absolute;
	overflow: visible;
	height: 0;
	padding-top:30px;
	margin-top:-10px;
	width: 195px;
	left: -195px;
	display: none;
}

.shortans>span{display: block;float: left;clear: both;}
/*.nobreak {clear: none !important;margin-left: 5px;}
*/
/*	.qright{}
	.qright>.flag{left: 155px; }
	.bottom>.flag{
		margin: 0;bottom:0;}
	.bottom.qright>.flag{
		}
*/	
	.qright>.flag{left: 195px; background-image: url('img/flagqr.png'); }
	.bottom>.flag{background-image: url('img/flagb.png');margin: 0;bottom:0;}
	.bottom.qright>.flag{background-image: url('img/flagbr.png'); }
	
.qbox{width: 280px; overflow: hidden; position: absolute; cursor: default;border-bottom: 5px solid #dfe1e8;border-left:5px solid #dfe1e8;margin-left: -5px;}
	.qright .qbox{border-bottom: 5px solid #dfe1e8;border-right:5px solid #dfe1e8;border-left: 0; right: -10px;}
	.bottom .qbox{bottom: 30px;border-right:0;border-left:0;border-bottom:1px solid black; border-top: 5px solid #dfe1e8;}		
	
.qline{}
.topline{	height: 2px;}
.question{	position:relative; color:white;text-align:right; margin-left:28px;margin-right:5px;font-size: 20px;line-height: 26px;padding: 10px;}
.question .i{position: absolute;top: 10px; left: -18px;}
.answer{position: relative;height: 30px; }
.answer>img{position: absolute;right: 10px;top: 5px;}	
.answer>span{font-size: 16px; font-family:'Open Sans', sans-serif; font-weight:600; line-height: 28px;margin-top: 6px;}	
.answer input	{width: 45px; font-size: 16px; font-family:'Open Sans', sans-serif; font-weight:600; line-height: 30px;  float:left; padding-left:5px; margin-right:4px; border: none; background-color: transparent; background-image: url('img/white30.png');}
.answer select	{width: 90px;font-size: 16px; font-family:'Open Sans Condensed', sans-serif; height: 30px;  float:left; padding-left:0; margin-right:5px; border: none; background-color: transparent; background-image: url('img/white30.png');}
.info{ font-family: 'Open Sans', sans-serif;	font-size:14px; background-image: url('img/black50.png');color: white; overflow: hidden; padding: 10px; display:none;}
.info.open{ display: block;}	
.i {cursor: pointer;}	
.override{float:right;height: 20px; background-color: black; color:white; font-size:16px; padding:5px; cursor: pointer;}
.override:hover{background-color: #444;}

input[type="number"] {width: 90px;text-align: right;}
input.wide{width: 100px;}

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label {
    display:inline-block;
    width:62px;
    height:30px;
    margin: -1px 10px 0 10px; 
    vertical-align:middle;
    background:url('img/YN.png') left bottom no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label {
    background:url('img/YN.png') left top no-repeat;
}

.driven .answer{	background-image: url('img/black50.png');color: white;}
.driven input{background-image: none;color: white;}

#MatInput{float: left;font-size: 16px; width:184px; height:30px; overflow:hidden; font-family:'Open Sans', sans-serif; font-weight:600; line-height: 28px;}
#Mat{width: 185px;margin-right: 0;font-family:'Open Sans', sans-serif;font-weight:600; }

#Dots{
	width: 80px;
	height: 130px;
	position: absolute;
	background-color: #2b0074;
	padding: 5px;
}
		
#Dits{
	width: 80px;
	height: 130px;
	position: absolute;
	background-color: #3667af;
	padding: 5px;
}

.dot{
	float: left;
	width: 80px;
	height: 80px; 
	background-color: #a59ab7; 
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	border-radius: 40px;
}

#Dits .dot{
	background-color: #b0b7c0; 
}

.indexLabel{
	float: left;width: 245px;height: 202px; position: relative;
}

.indexLabel > span{top:75px;font-size:20px;text-align: center;color: black;display: block;position: absolute;width: 250px;}

.pie {
	position: absolute;
	top:20px;
	left: 35px;
    background-color:#6b6b6b;
    width:180px;
    height:180px;
    -moz-border-radius:90px;
    -webkit-border-radius:90px;
    border-radius:90px;
}

#pOne .slice1, #pOne .slice2{    background-color:#173773;
 											border-color:#173773;
 											}
#pTwo .slice1, #pTwo .slice2{    background-color:#3e8da4;
										   border-color:#3e8da4;
										   }
#pThree .slice1, #pThree .slice2{background-color:#37998c;
    										border-color:#37998c;
}
#pFour .slice1, #pFour .slice2{	background-color:#558e48;
										   border-color:#558e48;
}
#pFive .slice1, #pFive .slice2{  background-color:#d79d1f;
											border-color:#d79d1f;
}
#pSix .slice1, #pSix .slice2{    background-color:#d79d1f;
										   border-color:#d79d1f;
}
#pSeven .slice1, #pSeven .slice2{background-color:#558e48;
    										border-color:#558e48;
}
#pEight .slice1, #pEight .slice2{background-image: url('img/white50.png');
										   
}
/*#pEight .slice1, #pEight .slice2{background-color:#37998c;
										   border-color:#37998c;
}*/
#pNine .slice1, #pNine .slice2{  background-color:#2b0074;
											border-color:#2b0074;
}
#pTen .slice1, #pTen .slice2{    background-color:black;
										   border-color:black;
}


.clip1 {
    position:absolute;
    top:0;
    left:0;
    width:180px;
    height:180px;
    clip:rect(0px, 180px, 180px, 90px);
}
.slice1 {
    position:absolute;
    width:180px;
    height:180px;
    clip:rect(0px, 90px, 180px, 0px);
    -moz-border-radius:90px;
    -webkit-border-radius:90px;
    border-radius:90px;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}
.clip2 {
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:200px;
    clip:rect(0, 90px, 180px, 0px);
}
.slice2 {
    position:absolute;
    width:180px;
    height:180px;
    clip:rect(0px, 180px, 180px, 90px);
    -moz-border-radius:90px;
    -webkit-border-radius:90px;
    border-radius:90px;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}
.circle {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 140px;
	height: 140px;
    -moz-border-radius:70px;
    -webkit-border-radius:70px;
    border-radius:70px;
    background-color: white;
}
.status {
    position:absolute;
    height:30px;
    width:180px;
    line-height:60px;
    text-align:center;
    top:50%;
    margin-top:-20px;
    font-size:45px;
}

input[type=range] {
	padding: 0;
	background-image: none;
  -webkit-appearance: none;
  width: 150px;
  float: right;
  margin-right: 10px;
  margin-top: 10px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  background-image: url('img/black50.png');
  border-radius: 4px;
}
input[type=range]::-webkit-slider-thumb {
  border: 3px solid white;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: black;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
}
input[type=range]::-moz-range-track {
 width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  background-image: url('img/black50.png');
  border-radius: 4px;
}
input[type=range]::-moz-range-thumb {
  border: 3px solid white;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: black;
  cursor: pointer;
}
input[type=range]::-ms-track {
	 width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  background-image: url('img/black50.png');
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-thumb {
  border: 3px solid white;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: black;
  cursor: pointer;
}

input[type=range]:focus::-webkit-slider-runnable-track {}
input[type=range]::-ms-fill-lower {}
input[type=range]::-ms-fill-upper {}
input[type=range]:focus::-ms-fill-lower {}
input[type=range]:focus::-ms-fill-upper {}


#Temp{position: absolute;width: 100px; height: 100px; right: 200px; background-color: #a59ab7; z-index: 10;}
#Temp2{position: absolute;width: 100px; height: 100px; top: 50px; right: 200px; background-color: #2b0074;z-index: 11;}

#Temp3{position: absolute;width: 100px; height: 100px; right: 120px; background-color: #b0b7c0;z-index: 12;}
#Temp4{position: absolute;width: 100px; height: 100px; top: 50px; right: 120px; background-color: #3667af;z-index: 13;}

#Temp5{position: absolute;width: 50px; height: 50px; right: 90px; background-color: black;z-index: 20;}

.shortans{z-index: 1}
.flag{z-index: 2}
/*
::selection{background-color: #DDD;}
*/