:root {
	--bg-body: #070707;
	--bg-light: #171717;
	--bg-dark: #101010;
	--border-dark: #313131;
	--border-light: #050505;
	--bg-logo: url("../img/poebuilds.webp");
	--theme: grayscale(80%);
}

[data-theme="mario"] {
	--bg-logo: url("../img/poebuilds-mario.webp");
	--theme: grayscale(0%);
}

[data-theme="mario-full"] {
	--bg-body: #98e0e0;
	--bg-light: #d8a038;
	--bg-dark: #705030;
	--border-dark: #313131;
	--border-light: #050505;
	--bg-logo: url("../img/poebuilds-mario.webp");
	--theme: grayscale(0%);
}

*{
	margin:0;
	padding:0;
	border:0;
	list-style:none;
}

*:focus{
	outline:none;
}

input{
	font-family: Verdana, system-ui, sans-serif;
}

html{
	font-family: Verdana, system-ui, sans-serif;
	font-size: 16px;
	position:relative;
	min-height:100%;
}

body{
	background:var(--bg-body);
	margin:0 0 8rem;
    font-size:1rem;
	
}

header a{
	width:380px;
	height:90px;
	background-image:var(--bg-logo);
	margin:12px auto;
	display:block;
}

footer{
	position:absolute;
	bottom:0;
	width:100%;
	margin:16px auto;
}

a:link,a:visited{
	font-weight: 600;
	text-decoration:none;
}

.adm{
	display:none;
}

.dk{

	background:var(--bg-dark);
}

.lt{
	background:var(--bg-light);
}

.bg{	
	background:#080808;
	
}

.b{
    font-weight:600;
}

.i{
	display:none;
}

.hid{
	display:none;
}


.pd{
	padding:12px 16px;
	text-align:center;
}

.pdm{
	padding:12px 16px;
	min-width:10em;
	text-align:center;
}
.pds{
	font-size:14px;
	
	margin-left:16px;
	text-align:center;
}


.ctr{
	justify-content: center; 
	text-align:center;
}

.cur{
	cursor:default;
}

.ptr{
	cursor:pointer;
}

#moon{
	background-image: url("../img/favicon.png");	
	width:16px;
	height:16px;
	display:block;
	margin:4px 0 0 16px;
	filter:var(--theme);
}

.lis,.lis-top,.lis-bot,.lis-bld{
	display: flex;
	margin:24px 12px 0;
	/*border:1px solid #302e2e;*/
	border:1px solid var(--border-dark);
}

.lis-top{
	border-bottom:none;
}

.lis-bot{
	border-top:none;
	margin:0 12px;
}

.lis-bld{
	border-top:none;
	margin:0 12px;
	display: block;
}


.itm,.itm-bot,.itm-top,.itm-grd{
	display: flex;
	align-items: center;
	/*border:1px solid #050505;*/
	border:1px solid var(--border-light);
	min-height:40px;
	width:100%;
	flex-wrap: wrap;
}
.itm{
	padding:0 16px;
}

.itm-bot{
	border-top:none;
	padding:0 16px 0 42px;
}

.itm-top{
	
	padding:0;
	
}

.itm-bld{
	display: flex;
	align-items: center;
	border:1px solid #050505;
	border-top:none;
}

.itm-grd{
	border:1px solid #050505;
	border-top:none;
    width:100%;
	display: grid;
	padding:32px 0;
	grid-template-columns: 40% 60%;
	row-gap: 16px;
}


.tag{
	padding:2px 8px;
	margin:9px 4px 2px;
	cursor: default;
}

.t1,.t11{
	color:rgb(150,175,200);

}
.t2,.t8,.err{
	color:#af5a32;
}
.t3,.t9,.suc{
	color:rgb(124,179,118);
}
.t4,.sil{
	color:rgb(245, 245, 245);
}
.t5,.t12{
	color:rgb(114,129,141)
}
.t6,.t13{
	color:rgb(207,189,138);
}
.t7,.t10{
	color:rgb(154,195,201);
}

.llt,.ldk,.t0{
    color:rgba(118, 118, 118);
}

.gld{
	color:rgba(255, 229, 181);
}

.brz{
    color:rgba(185, 156, 116)
}
.t{
    opacity: 0.5;
}

.shd{
	filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
}

.gem{
	width:16px;
	height:16px;
	margin:0 12px 0;
	background-size: cover;
}
.g1_r{
	background-image: image-set(
		url("../img/poe_red.webp") 1x,
		url("../img/poe_red2x.webp") 2x,
		url("../img/poe_red3x.webp") 3x
	);	
}
.g1_g{
	background-image: image-set(
		url("../img/poe_green.webp") 1x,
		url("../img/poe_green2x.webp") 2x,
		url("../img/poe_green3x.webp") 3x
	);	
}
.g1_b{
	background-image: image-set(
		url("../img/poe_blue.webp") 1x,
		url("../img/poe_blue2x.webp") 2x,
		url("../img/poe_blue3x.webp") 3x
	);
}
.g1_w{
	background-image: image-set(
		url("../img/poe_white.webp") 1x,
		url("../img/poe_white2x.webp") 2x,
		url("../img/poe_white3x.webp") 3x
	);
}
.g2_r{
	background-image: image-set(
		url("../img/poe2_red.webp") 1x,
		url("../img/poe2_red2x.webp") 2x,
		url("../img/poe2_red3x.webp") 3x
	);	
}
.g2_g{
	background-image: image-set(
		url("../img/poe2_green.webp") 1x,
		url("../img/poe2_green2x.webp") 2x,
		url("../img/poe2_green3x.webp") 3x
	);	
}
.g2_b{
	background-image: image-set(
		url("../img/poe2_blue.webp") 1x,
		url("../img/poe2_blue2x.webp") 2x,
		url("../img/poe2_blue3x.webp") 3x
	);
}
.g2_w{
	background-image: image-set(
		url("../img/poe2_white.webp") 1x,
		url("../img/poe2_white2x.webp") 2x,
		url("../img/poe2_white3x.webp") 3x
	);
}

.orb{
	width: 16px;
	height: 16px;
	display:block;
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: center;


	
}
.o1_1{
	background-image: image-set(
		url("../img/poe_currencyidentification.webp") 1x,
		url("../img/poe_currencyidentification2x.webp") 2x,
		url("../img/poe_currencyidentification3x.webp") 3x
	);
}
.o1_2{
	background-image: image-set(
		url("../img/poe_currencyrerollmagic.webp") 1x,
		url("../img/poe_currencyrerollmagic2x.webp") 2x,
		url("../img/poe_currencyrerollmagic3x.webp") 3x
	);
}
.o1_3{
	background-image: image-set(
		url("../img/poe_currencyupgrademagictorare.webp") 1x,
		url("../img/poe_currencyupgrademagictorare2x.webp") 2x,
		url("../img/poe_currencyupgrademagictorare3x.webp") 3x
	);
}
.o1_4{
	background-image: image-set(
		url("../img/poe_currencyupgradetorare.webp") 1x,
		url("../img/poe_currencyupgradetorare2x.webp") 2x,
		url("../img/poe_currencyupgradetorare3x.webp") 3x
	);
}
.o1_5{
	background-image: image-set(
		url("../img/poe_currencyrerollrare.webp") 1x,
		url("../img/poe_currencyrerollrare2x.webp") 2x,
		url("../img/poe_currencyrerollrare3x.webp") 3x
	);
}
.o1_6{
	background-image: image-set(
		url("../img/poe_currencyaddmodtorare.webp") 1x,
		url("../img/poe_currencyaddmodtorare2x.webp") 2x,
		url("../img/poe_currencyaddmodtorare3x.webp") 3x
	);
}
.o1_7{
	background-image: image-set(
		url("../img/poe_currencymodvalues.webp") 1x,
		url("../img/poe_currencymodvalues2x.webp") 2x,
		url("../img/poe_currencymodvalues3x.webp") 3x
	);
}
.o1_8{
	background-image: image-set(
		url("../img/poe_currencyduplicate.webp") 1x,
		url("../img/poe_currencyduplicate2x.webp") 2x,
		url("../img/poe_currencyduplicate3x.webp") 3x
	);
}
.o2_1{
	background-image: image-set(
		url("../img/poe2_currencyidentification.webp") 1x,
		url("../img/poe2_currencyidentification2x.webp") 2x,
		url("../img/poe2_currencyidentification3x.webp") 3x
	);
}
.o2_2{
	background-image: image-set(
		url("../img/poe2_currencyrerollmagic.webp") 1x,
		url("../img/poe2_currencyrerollmagic2x.webp") 2x,
		url("../img/poe2_currencyrerollmagic3x.webp") 3x
	);
}
.o2_3{
	background-image: image-set(
		url("../img/poe2_currencyupgrademagictorare.webp") 1x,
		url("../img/poe2_currencyupgrademagictorare2x.webp") 2x,
		url("../img/poe2_currencyupgrademagictorare3x.webp") 3x
	);
}
.o2_4{
	background-image: image-set(
		url("../img/poe2_currencyupgradetorare.webp") 1x,
		url("../img/poe2_currencyupgradetorare2x.webp") 2x,
		url("../img/poe2_currencyupgradetorare3x.webp") 3x
	);
}
.o2_5{
	background-image: image-set(
		url("../img/poe2_currencyrerollrare.webp") 1x,
		url("../img/poe2_currencyrerollrare2x.webp") 2x,
		url("../img/poe2_currencyrerollrare3x.webp") 3x
	);
}
.o2_6{
	background-image: image-set(
		url("../img/poe2_currencyaddmodtorare.webp") 1x,
		url("../img/poe2_currencyaddmodtorare2x.webp") 2x,
		url("../img/poe2_currencyaddmodtorare3x.webp") 3x
	);
}
.o2_7{
	background-image: image-set(
		url("../img/poe2_currencymodvalues.webp") 1x,
		url("../img/poe2_currencymodvalues2x.webp") 2x,
		url("../img/poe2_currencymodvalues3x.webp") 3x
	);
}
.o2_8{
	background-image: image-set(
		url("../img/poe2_currencyduplicate.webp") 1x,
		url("../img/poe2_currencyduplicate2x.webp") 2x,
		url("../img/poe2_currencyduplicate3x.webp") 3x
	);
}

.por{
	width:130px;
	height:80px;
	border-right:1px solid #050505;
	background-color: #0c0c0c;
	display:none;
	opacity: 0.6;
	
}

.a1_0{background:url(../img/v107.webp) 0 0;}
.a2_0{background:url(../img/v107.webp) -130px 0;}
.a1_10{background:url(../img/v107.webp) -260px 0;}
.a1_2{background:url(../img/v107.webp) 0 -240px;}
.a1_3{background:url(../img/v107.webp) -130px -240px;}
.a1_1{background:url(../img/v107.webp) -260px -240px;}
.a1_6{background:url(../img/v107.webp) 0 -320px;}
.a1_5{background:url(../img/v107.webp) -130px -320px;}
.a1_4{background:url(../img/v107.webp) -260px -320px;}
.a1_9{background:url(../img/v107.webp) 0 -160px;}
.a1_8{background:url(../img/v107.webp) -130px -160px;}
.a1_7{background:url(../img/v107.webp) -260px -160px;}
.a1_13{background:url(../img/v107.webp) 0 -400px;}
.a1_12{background:url(../img/v107.webp) -130px -400px;}
.a1_11{background:url(../img/v107.webp) -260px -400px;}
.a1_16{background:url(../img/v107.webp) 0 -480px;}
.a1_15{background:url(../img/v107.webp) -130px -480px;}
.a1_14{background:url(../img/v107.webp) -260px -480px;}
.a1_18{background:url(../img/v107.webp) 0 -80px;}
.a1_17{background:url(../img/v107.webp) -130px -80px;}
.a1_19{background:url(../img/v107.webp) -260px -80px;}
.a2_20{background:url(../img/v107.webp) 0 -720px;}
.a2_21{background:url(../img/v107.webp) -130px -720px;}
.a2_31{background:url(../img/v107.webp) -260px -720px;}
.a2_22{background:url(../img/v107.webp) 0 -800px;}
.a2_23{background:url(../img/v107.webp) -130px -800px;}
.a2_32{background:url(../img/v107.webp) -260px -800px;}
.a2_26{background:url(../img/v107.webp) 0 -560px;}
.a2_28{background:url(../img/v107.webp) -130px -560px;}
.a2_24{background:url(../img/v107.webp) 0 -640px;}
.a2_25{background:url(../img/v107.webp) -130px -640px;}
.a2_33{background:url(../img/v107.webp) -260px -640px;}
.a2_30{background:url(../img/v107.webp) 0 -960px;}
.a2_29{background:url(../img/v107.webp) -130px -960px;}
.a2_9{background:url(../img/v107.webp) 0 -880px;}
.a2_7{background:url(../img/v107.webp) -130px -880px;}
.a2_35{background:url(../img/v107.webp) 0 -1040px;}
.a2_34{background:url(../img/v107.webp) -130px -1040px;}

.build{
	display: flex;
	flex-direction: column; 
	align-items: left;    
	flex: 1;
	min-height:80px;
	
}

.build div{
	margin:0px 6px 0;
	display: flex;
}

.build a{
	padding:4px 12px;
	display: flex;
	
}

.ico{
	margin:0 26px 0;
}

.build-name{
	white-space: wrap;
	width:100%;
}

.fs{
	width:50px;
	
}
.fm{
	width:160px;
	
}
.fl{
	width:360px;
	
}

.lbl{
	justify-self: end;
	padding:8px 16px;
}

input[type="checkbox"]{
	cursor:pointer;
	width:14px;
	height:14px;
	justify-self: start;
	margin:8px 0 0;
}

.l{
	justify-content: left;
	text-align:left;
}



@media (min-width: 768px) {

	header a{
		margin:24px auto;
		transform: scale(1);
	}

	body{
		font-size:0.75rem;
	}

	.lis,.lis-top,.lis-bot,.lis-mid,.lis-bld{
		width:957px;
		margin:24px auto 0;
	}

	.pd{
		
		padding:7px 16px 6px;
	}
	.pdm{
		padding:7px 16px 6px;
	}
	

	.por{
		display:block;
	}
	.r{
		margin-left: auto;
	}

	
	.adm{
		display:flex;
	}

	.build{
		
		
		
		
		 white-space: nowrap;
		 overflow: hidden;
		 text-overflow: ellipsis;	
		
		 
			}


	.build-name{
width:750px;
 display: block;

 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;	

 
	}

	.build-name a{
		overflow: visible;

	}
	.i{
		display:inline;
		font-style: italic;
	}


	
	.lis-bot{
	
		margin:0 auto 12px;
	}
	
	.lis-mid{

		margin:0 auto 12px;
	}
	.lis-bld{

		margin:0 auto 12px;
		display: block;
	
	}


	
}