#monsters_body{
	width:calc(100% - 20px);
	margin:10px 0 0 10px;
}

#monsters_description{
	width:calc(100% - 42px);
	padding:20px;
	background-color:#1a1a1a;
	background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.05) 100%);
	border:solid 1px #000;
	border-bottom-width:2px;
	font-size:18px;
	color:#aaa;
}

#monsters_options{
	width:100%;
	margin-top:20px;
}

#monsters_search_box{
	width:200px;
	height:21px;
	padding: 10px 12px 6px 12px;
	border:solid 1px #000;
	border-bottom: solid 2px #000;
	background: rgba(255,255,255,0.05);
	background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.05) 100%);
	float:left;
}
#monsters_search_box input{
	width:100%;
	background:0;
	box-shadow:none;
	border:0;
	outline:0;
	margin:0;
	padding:0;
	font-size:18px;
	color:#ccc;
}

#monsters_order{
	height:21px;
	box-sizing:content-box;
	padding: 10px 12px 6px 12px;
	border:solid 1px #000;
	border-bottom: solid 2px #000;
	background: rgba(255,255,255,0.05);
	background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.05) 100%);
	float:right;
	cursor:pointer;
	user-select:none;
}

#monsters_order_icon{
	width:16px;
	height:16px;
	float:left;
	margin-top:2px;
	transition: 0.5s;
}

#monsters_order_text{
	margin-left:8px;
	font-size:18px;
	color:#ccc;
	float:left;
	margin-top:3px;
}

#monsters_method_box{
	height:21px;
	box-sizing:content-box;
	margin-right:10px;
	padding: 10px 12px 6px 12px;
	border:solid 1px #000;
	border-bottom: solid 2px #000;
	background: rgba(255,255,255,0.05);
	background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.05) 100%);
	float:right;
}

#monsters_method{
	width:120px;
	height:20px;
	background:0;
	box-sizing:content-box;
	border:0;
	outline:0;
	margin:0;
	padding:0;
	font-size:18px;
	color:#ccc;
	box-shadow:none;
	cursor:pointer;
}

#monsters_results{
	width:100%;
	height:20px;
	margin:20px 0;
	position:relative;
}

#monsters_results_line{
	width:100%;
	height:1px;
	background-color:#242424;
	margin-top:10px;
	float:left;
}

#monsters_results_text{
	height:16px;
	padding:0 10px;
	position:absolute;
	left:10px;
	top:2px;
	background-color:#141414;
	color:#aaa;
	font-size:16px;
	z-index:1;
}

#monsters_list{
	width:100%;
	margin-bottom:15px;
}

#monsters_load{
	width:100%;
	height:80px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.monster_container{
	width:100%;
	margin-top:15px;
	border-bottom:solid 1px #000;
}

.monster_row{
	width:calc(100% - 2px);
	height:40px;
	background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.05) 100%);
	border:solid 1px #000;
	border-bottom:0;
	position:relative;
	cursor:pointer;
}
.monster_row:hover{
	background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.07) 100%);
}

.monster_row_img{
	width:32px;
	height:32px;
	margin-left:4px;
	margin-top:4px;
	background-size:32px 32px;
	image-rendering:pixelated;
	pointer-events:none;
	float:left;
}

.monster_row_name{
	width:200px;
	height:16px;
	margin-left:12px;
	margin-top:13px;
	color:#ccc;
	font-size:20px;
	float:left;
}

.monster_row_arrow{
	width:16px;
	height:16px;
	margin:11px 12px 0 0;
	float:right;
}
.monster_row_arrow img{
	width:16px;
	height:16px;
}

.monster_section{
	width:calc(100% - 2px);
	height:500px;
	background:#1c1c1c;
	border:solid 1px #000;
	position:relative;
	overflow:hidden;
	display:none;
}

.monster_section_bckg{
	width:fit-content;
	height:fit-content;
	position:absolute;
	right:36px;
	top:26px;
	transform:scale(4);
	transform-origin:center center;
	z-index:0;
}
.monster_section_bckg img{
	opacity:0.06;
	image-rendering:pixelated;
	filter:drop-shadow(0px 0px 2px #000);
	pointer-events:none;
}

.monster_section_img{
	width:96px;
	height:96px;
	position:absolute;
	right:20px;
	top:10px;
	z-index:1;
}
.monster_section_img img{
	width:96px;
	height:96px;
	image-rendering:pixelated;
}

.monster_section_voices{
	width:200px;
	height:160px;
	position:absolute;
	right:126px;
	top:-22px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	z-index:1;
	opacity:0.4;
}

.monster_section_voice{
	width:100%;
	margin-bottom:5px;
	text-align:right;
	color:#ff6600;
	font-size:16px;
	text-shadow:-2px  0   0 #000,
		2px  0   0 #000,
		0   -2px 0 #000,
		0    2px 0 #000,
		-2px -2px 0 #000,
		2px -2px 0 #000,
		-2px  2px 0 #000,
		2px  2px 0 #000;
}

.monster_section_gradient{
	width:100px;
	height:115px;
	background:linear-gradient(90deg, rgba(28, 28, 28, 1) 0%, rgba(28, 28, 28, 1) 25%, rgba(28, 28, 28, 0) 100%);
	position:absolute;
	right:226px;
	top:0;
	z-index:2;
}

.monster_section_top{
	width:100%;
	height:116px;
}

.monster_section_header{
	width:calc(100% - 336px);
	height:71px;
	margin-left:20px;
	padding-top:20px;
}

.monster_section_realname{
	width:100%;
	height:24px;
	color:#ccc;
    font-size:28px;
	text-transform:capitalize;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.monster_section_class{
	width:100%;
	height:16px;
	margin-top:2px;
	color:#888;
    font-size:18px;
}

.monster_section_tabs{
	width:calc(100% - 40px);
	height:24px;
	padding:0 20px;
	border-bottom:solid 1px #000;
	position:relative;
	z-index:2;
}

.monster_section_tab{
	height:17px;
    padding:11px 15px 7px 17px;
    margin-right:5px;
    margin-top:-12px;
    border:solid 1px #000;
    color:#ccc;
    font-size:20px;
	text-transform:capitalize;
    float:left;
    user-select:none;
}
.monster_section_tab.disabled{
	opacity:0.2;
}
.monster_section_tab[data-enabled=true]{
	background-color:#181818;
	border-bottom-color:#181818;
}
.monster_section_tab:not(.disabled)[data-enabled=false]{
	background-color:#171717;
	opacity:0.5;
	cursor:pointer;
}
.monster_section_tab:not(.disabled)[data-enabled=false]:hover{
	background-color:#1a1a1a;
	opacity:1;
}

.monster_section_main{
	width:100%;
	height:calc(100% - 116px);
	background-color:#181818;
	position:relative;
	z-index:2;
}

.monster_section_tabcontent{
	width:100%;
	height:100%;
}

.monster_section_title{
	width:100%;
	height:14px;
	margin-bottom:10px;
	color:#aaa;
    font-size:16px;
	opacity:0.4;
}

.monster_section_attrs{
	width:100px;
	height:calc(100% - 50px);
	margin-left:25px;
	margin-top:25px;
	float:left;
}

.monster_section_attr{
	width:100%;
	height:16px;
	margin-top:5px;
	padding-bottom:5px;
	border-bottom:solid 1px #222;
}

.monster_section_attr_icon{
	width:16px;
	height:16px;
	float:left;
}
.monster_section_attr_icon img{
	width:16px;
	height:16px;
	display:block;
}

.monster_section_attr_text{
	width:calc(100% - 26px);
	height:14px;
	margin-top:1px;
	margin-left:10px;
	color:#ccc;
    font-size:18px;
	text-align:right;
	float:left;
}
.monster_section_attr_text.green{
	color:#88ff88;
}
.monster_section_attr_text.red{
	color:#ff8888;
}

.monster_section_attr_iconvalue{
	width:16px;
	height:16px;
	float:right;
}
.monster_section_attr_iconvalue img{
	width:16px;
	height:16px;
	display:block;
}

.monster_section_loot{
	width:calc(100% - 201px);
	height:calc(100% - 50px);
	margin-left:25px;
	padding-left:25px;
	margin-top:25px;
	border-left:solid 1px #222;
	overflow:hidden;
	float:left;
}

.monster_section_loottable{
	width:calc(100% - 10px);
	height:calc(100% - 24px);
	padding:5px;
	overflow-y:scroll;
}

.monster_section_loottable::-webkit-scrollbar {
	width: 10px;
	background:transparent;
	border-radius:5px;
}
 
.monster_section_loottable::-webkit-scrollbar-track {
	width:8px;
	background:transparent;
	border-radius:5px;
}
 
.monster_section_loottable::-webkit-scrollbar-thumb {
	width:4px;
	background-color:#222;
	border:solid 3px #181818;
	border-radius:5px;
}

.monster_section_loottable::-webkit-scrollbar-corner {
	background: transparent;
}


.monster_section_loot_row{
	width:calc(100% - 2px);
	height:32px;
	background:linear-gradient(135deg, #141414 0%, #1d1d1d 100%);
	border:solid 1px #0c0c0c;
	margin-bottom:12px;
	position:relative;
}

.monster_section_loot_item{
	width:38px;
    height:38px;
	margin-left:-4px;
	margin-top:-4px;
	display:flex;
	justify-content:center;
	align-items:center;
    background:radial-gradient(#282828, #181818);
    border:solid 1px #111;
	box-shadow: 1px 1px 5px #121212;
    user-select:none;
	float:left;
}
.monster_section_loot_item img{
	width:32px;
	height:32px;
	image-rendering:pixelated;
}

.monster_section_loot_name{
	width:calc(100% - 126px);
	height:16px;
	margin-left:10px;
	margin-top:9px;
	color:#aaa;
	font-size:18px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	float:left;
}

.monster_section_loot_percentage{
	width:70px;
	height:16px;
	margin-right:10px;
	margin-top:9px;
	color:#aaa;
	font-size:18px;
	text-align:right;
	float:right;
}