.tabs {
  position: relative;   
  width: 100%;
height:480px;
  float:left;
  clear: both;
  margin: 0px 0;
}
.tab {
  display:inline-block;
  width: 131px;
  height: 15px;
  padding: 5px 0px 10px;
  color:var(--txt);
  margin-left:1px;
  margin-bottom:7px;
  text-align:center;
  border-bottom:1px solid var(--hbg);
}
.tab label {
  background: transparent; 
  padding: 10px;
  position: relative;
  z-index:3;
  font-family: Raleway;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:9px;
}
.tab [type=radio] {
  display: none;   
}
.content {
  overflow:hidden;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  height: 440px;
  width: 100%;
  margin-top: 1000px;
  right: 0;
  bottom: 0;
  -webkit-transition-duration: 1.8s; 
  -moz-transition-duration: 1.8s; 
  -o-transition-duration: 1.8s;'
}
[type=radio]:checked ~ label {
  background: transparent;
  font-weight:bolder;
  z-index: 2;
  color:var(--accent);
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
  margin-top:30px;
}

.apcont {
  box-sizing: border-box;
  text-align:left;
  margin-top:10px;
  padding:0px 20px;
  overflow:auto;
  height:420px;
  width:100%;
}

.appomin {
  width:76%;
  overflow:hidden;
  background:var(--back);
  border:10px solid var(--back);
  outline:1px solid var(--back);
}
.appom {
  width:100%;
  height: auto;
}
.appimg {
  float:left;
  width:250px;
  height:500px;
  background-position:center;
  background-size:cover;
  margin-top:0px;
  outline:1px solid var(--back);
}

.apdetop {
  border:1px solid var(--hbg);
  padding-top:15px;
  border-radius:100%;
  height:80px;
  width:80px;
  display:inline-block;
  position:relative;
  text-align:center;
  font-family:roboto;
  text-transform:uppercase;
  line-height:12px;
  margin-right:5px;
  color:#242424;
  font-size:9px;
  letter-spacing:1px;
  margin-bottom:15px;
  margin-top:5px;
}
.apdetop span {
  position:absolute;
  margin-top:5px;
  margin-left:-20px;
  font-size:40px;
  opacity:.1;
}
.apdetop Human, .apdetop Shifter, .apdetop Wolf, .apdetop Upir, .apdetop Witch{
  font-family:Raleway;
  font-size:11px;
}
.apdetlis {
  text-align:right;
  font-family:roboto condensed;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin:7px 10px 5px 10px;
  padding:7px 10px;
	height:35px;
  border-bottom:1px solid var(--hbg);
  color:#242424;
}

.apdetlis Info {
  font-size:11px;
  color: var(--accent);
  float:left;
  font-family:Raleway;
  font-weight: bold;
  margin-top:3px;
}


.apdetlis span {
  float:left;
  background:var(--hbg);
  border:1px solid var(--hbg);
  padding:5px 4px 5px 5px;
  font-size:15px;
  border-radius:100%;
  margin-left:-12px;
  margin-right:15px;
  margin-top:3px;
}
.apquotetop {
  font-family:Raleway;
  color: var(--accent);
  font-size:9px;
  text-align:center;
  margin-top:15px;
  text-transform:uppercase;
  font-weight:bold;
  letter-spacing:1px;
}
.apquote {
  background:var(--back);
  text-align:center;
  padding:10px 5px;
  border:1px solid var(--dbg);
  font-size:9px;
  font-family:roboto;
  margin-top:10px;
  color:var(--txt);
}
.apquote span {
  font-size:6px;
  padding:0px 5px;
}
.apfretop {
  font-family: 'Montserrat', sans-serif;
  text-transform:uppercase;
  font-size:15px;
  letter-spacing:1px;
  border-bottom:1px solid var(--hbg);
  text-align:right;
  padding:15px 10px;
}
.apfretop span {
  color:#242424 !important;
  float:left;
}
.apfretex {
	display:flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	align-items: left;
  color:#242424;
  text-align:justify;
  padding:20px 10px 0px;
  font-size:11px;
  line-height:18px;
  font-family:roboto condensed;
}
.applaico {
  float:right;
  background:var(--back);
  font-size:45px;
  height: 100px;
  width: 450px;
  padding:15px;
  border:2px solid var(--dbg);
  margin:10px;
  margin-top: 20px;
}

.applaico img {height:75px;}

.appla {
  float:left;
  margin-left:20px;
  margin-top:10px;
  width:220px;
}
.applaov {
  font-family: Raleway;
  font-size:25px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-align:right;
  color:var(--accent);
  border-bottom:1px solid var(--dbg);
  margin-bottom:5px;
}
.appladet {
  background:var(--dbg);
  border:1px solid var(--dbg);
  padding:5px 10px;
  font-family:roboto;
  font-size:8.4px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#242424;
  text-align:right;
  margin-bottom:3px;
}
.appladet name {
  float:left;
  border-right:1px solid var(--dbg);
  background:var(--body);
  color: var(--accent);
  font-weight: bold;
  padding:5px 10px 5px 10px;
  margin-top:-5px;
  margin-left:-10px;
  width:auto;
  text-align:left;
}
.plapers {
  margin-top:170px;
  font-family:Raleway;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:1px;
  color: var(--accent);
  font-weight: bold;
  text-align:center;
  border-bottom:1px solid var(--hbg);
  padding-bottom:10px;
}
.plaperstex {
  background: var(--back);
  padding: 10px 15px;
  outline: 1px solid var(--dbg);
  color:#242424;
  margin-top:10px;
  margin: 10px auto;
  height:180px;
  width:93%;
}

.appnam {
	min-height: 100px;
  margin: auto;
  box-sizing: border-box;
  background-color: var(--back);
  display: flex;
  flex-direction: column;
  color: var(--txt);
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  padding: 0px 20px;
  font-family: 'Roboto';
}

.appnam name {
  font-family: 'Bokor';
  font-size: 45px;
  line-height: 31px;
  letter-spacing: 2px;
  text-align: center;
  color: var(--accent);
  text-shadow: -10px 3px var(--dbgtr);
  border-bottom: 2px solid var(--hbg);
  width:100%;
}

.appgif {
  float:right;
  position:absolute;
  top:-10;
  right:0;
  z-index: 99;
}

.abili {
  width: 24%;
  height:300px;
  background: #1b1b1b; 
  border: 10px solid #1b1b1b;
  outline: 1px solid #2b2b2b;
  overflow:auto;
	text-align: left;
	white-space: pre-line;
}

.abi_info, .life_info {
  min-height: 300px;
	max-height: 600px;
  display: flex; 
  justify-content: space-evenly; 
  flex-wrap: wrap;
  gap: 9px;
}

.life {
  width: 69%;
  background: #1b1b1b; 
  border: 10px solid #1b1b1b;
  outline: 1px solid #2b2b2b;
  overflow:auto;
	min-height: 300px;
	max-height: 600px;
	padding:10px;
	text-align: justify;
white-space: pre-line;
}

.shortcut {
width: 30%;
  background: #1b1b1b; 
  border: 10px solid #1b1b1b;
  outline: 1px solid #2b2b2b;
  overflow:auto;
	min-height: 300px;
	max-height: 600px;
  padding:10px;
text-align: justify;
white-space: pre-line;}

.perks {
  display: flex;
  justify-content: flex-start; 
  padding: 10px 10px;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--back); 
  margin: 5px 0px 5px 0px;
}

.perk{
  width:32.5%;
  outline: 1px solid var(--hbg);
  background: var(--hbg);
  height: 15px;
  position:relative;
}

.perk_bar {
  margin-left: 0px;
  height: 100%;
  position: absolute;
	white-space: nowrap;
  font-size: 13px;
  line-height: 15px;
  text-transform: uppercase;
  font-weight: normal;
  text-align: left;
  font-family: 'Raleway', sans-serif;
  overfloww: hidden;
	border-right: 1px solid var(--body);
  background-color: var(--hbg);
    background-image: radial-gradient(circle at top right, var(--back) 0%, rgba(var(--rgbacc), 0.8) 300%);
  color: var(--txt);
  font-weight: bold;
}

.perk_bar z {font-size: 10px;color: var(--txt);}

.hovericon {position:absolute; width:100%; height:100%;background: var(--bg2); opacity:0;text-align: justify;}
.hovericon:hover {opacity:1;}

.ntrackthread {
	width: 50%;
	height: 190px;
	box-sizing: border-box;
	color: var(--slate);
	padding: 40px 20px;
	position: relative;
	opacity: 1;
	-moz-opacity: 1;
	transition: all ease 0.4s;
	cursor: crosshair;
}

.ntrackthread:hover {
	opacity: 0.5;
	-moz-opacity: 0.5;
}

.ntrackthread h1 {
	font-family: 'bokor', cursive;
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--slate);
	padding: 0;
	margin: 0 0 10px 0;
	line-height: 90%;
}

.ntrackthread h2 {
	font-family: 'Raleway', sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0;
	margin: 0;
	line-height: 100%;
}


.ntrackthread a::before {
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	display: inline-block;
	font-size: 7px;
	background: #ededed;
	color: #9f9f9f;
	text-transform: uppercase;
	line-height: 100%;
	padding: 5px 6px 5px 7px;
	margin-bottom: 10px;
	letter-spacing: 1px;
	border-radius: 2px;
}

.ntrackthread::after {
	content: " ";
	position: absolute;
	display: block;
	width: 120px;
	border: 0;
	border-bottom: 5px solid #2b2b2b;
}

.ntrackthread::before {
	top: 0;
}
.ntrackthread::after {
	bottom: 0;
}

.ntrackthread:nth-child(n + 3)::before {
	border: 0;
}

.ntrackthread.completed {
	width: 50%;
	height: 190px;
	opacity: 0.5;
	-moz-opacity: 0.5;
}

.ntrackthread.completed h2::before {
	content: " ";
	position: absolute;
	width: 200px;
	border-bottom: 1px solid;
	top: 110px;
	left: -15px;
	transform: rotate(-50deg);
}

.ntrackthread.completed h1 {
	font-size: 15px;
}

.progress-bar_ability {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100px;
  height: 100px;
  border-radius: 50%;  
}

.progress-bar_ability::before {
  content: "75%";
  color: #242424;
}