#cp{
	background-color:#111
}

#cp_header{
	width:calc(100% - 120px);
	margin-top:30px;
	padding:0 60px;
	height:190px;
	position:relative;
	border-top:solid 1px #000;
	border-bottom:solid 3px #000;
	background-size:740px 190px;
	-moz-box-shadow:    inset  0 -30px 30px -30px #000;
	-webkit-box-shadow: inset  0 -30px 30px -30px #000;
	box-shadow: inset  0 -30px 30px -30px #000;
	display:flex;
	align-items:center;
}

#cp_header_statuses{
	width:328px;
	position:absolute;
	right:60px;
	top:12px;
}

.cp_header_status{
	padding:8px;
	padding-bottom:4px;
	float:right;
	margin-left:8px;
	background:#161616;
	border:solid 1px #000;
	border-bottom-width:2px;
}

.cp_header_status_indicator{
	width:12px;
	height:12px;
	border:solid 1px #000;	
	float:left;
	background-color:rgba(0,0,0,0.3);
	border-radius:50%;
}
.cp_header_status_indicator img{
	width:12px;
	height:12px;
	display:block;
}

.cp_header_status_indicator_dot{
	width:8px;
	height:8px;
	margin:2px;
	background-color:#ff0000;
	border-radius:50%;
}

.cp_header_status_indicator_text{
	float:left;
	margin-left:8px;
	color:#ccc;
	font-size:18px;
}

.status_button{
	cursor:pointer;
}

#cp_header_main{
	width:calc(100% - 290px);
	margin-left:20px;
}

#cp_header_name{
	width:100%;
}

#cp_header_name_text{
	max-width:350px;
	font-size:36px;
	color:#ccc;
	float:left;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#cp_header_gender{
	width:20px;
	height:20px;
	float:left;
	margin-left:10px;
	margin-top:6px;
	background-size:20px 20px;
}

#cp_header_desc{
	width:100%;
	font-size:24px;
	color:#aaa;
}

#cp_icon_body{
	width:130px;
	height:130px;
	position:relative;
	pointer-events:none;
	float:left;
}

#cp_icon_bckg{
	width:120px;
	height:120px;
	position:relative;
	border-radius:50%;
	overflow:hidden;
	border:solid 4px #000;
}

#cp_icon_bckg_scene{
	width:128px;
	height:128px;
	margin-left:-5px;
	margin-top:-5px;
	background-image:url(../img/grass.jpg);
	background-size:128px 128px;
	image-rendering:pixelated
}

#cp_icon_bckg_base{
	width:256px;
	height:256px;
	left:-120px;
	top:-120px;
	position:absolute;
	z-index:4;
}
#cp_icon_bckg_base img{
	width:256px;
	height:256px;
	image-rendering:pixelated
}

.cp_icon_redraw{
	left:-116px;
	top:-116px;
	position:absolute;
	z-index:5;
	overflow:hidden;
}
.cp_icon_redraw img{
	width:256px;
	height:256px;
	image-rendering:pixelated
}

#cp_icon_redraw_left{
	width:160px;
	height:256px;
}

#cp_icon_redraw_top{
	width:256px;
	height:160px;
}

#cp_eq_panel{
	width:120px;
	height:165px;
	position:relative;
	margin-left:20px;
	filter:drop-shadow(2px 2px 10px #000);
	z-index:999;
}

#cp_tabs{
	width:calc(100% - 120px);
	height:24px;
	padding:0 60px;
	border-bottom:solid 1px #000;
	position:relative;
}

.cp_tab{
	height:17px;
	padding:11px 15px 7px 17px;
	margin-right:5px;
	margin-top:-12px;
	border-color:#000;
	border-style:solid;
	border-width:1px;
	color:#ccc;
	font-size: 20px;
	float:left;
	user-select:none;
}
.cp_tab[data-enabled=true]{
	background-color:#161616;
	border-bottom-color:#161616;
}
.cp_tab[data-enabled=false]{
	background-color:#111;
	border-bottom-color:#000;
	cursor:pointer;
}
.cp_tab[data-enabled=false]:hover{
	background-color:#181818;
}

.cp_tabContent{
	width:100%;
	background-color:#161616;
	border-bottom:solid 1px #000;
	padding:30px 0;
}

#cp_skills{
	width:calc(100% - 120px);
	margin-left:60px;
	display:flex;
	justify-content:space-between;
}

.cp_skill{
	width:64px;
	padding:15px 0 4px 0;
	border:solid 1px #000;
	border-bottom-width:2px;
	background:#111;
	background:linear-gradient(0deg, #111 0%, #1a1a1a 100%);
}

.cp_skill_icon{
	width:24px;
	height:24px;
	margin-left:20px;
	background-size:24px 24px;
}

.cp_skill_value{
	width:100%;
	height:24px;
	font-size:24px;
	margin-top:8px;
	color:#ccc;
	text-align:center;
}

#cp_extra{
	width:calc(100% - 120px);
	margin-top:30px;
	padding:10px 60px;
}

#cp_extra_info{
	width:100%;
	height:90px;
	float:left;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}

.cp_extra_info_row{
	width:calc(50% - 26px);
	height:14px;
	padding:10px 8px 7px 8px;
	margin-bottom:10px;
	background:#111;
	border:solid 1px #000;
	font-size:18px;
}

.cp_extra_info_row_key{
	float:left;
	color:#999;
}
.cp_extra_info_row_value{
	float:right;
	color:#ccc;
}

#cp_widgets{
	width:calc(100% - 120px);
	margin-left:60px;
	margin-top:20px;
	display:flex;
	justify-content:space-between;
}

.cp_widget{
	width:180px;
	height:250px;
	border:solid 1px #000;
	position:relative;
}

.cp_widget_icon{
	width:20px;
	height:20px;
	position:absolute;
	left:7px;
	top:7px;
	background-size:20px 20px;
}

.cp_widget_header{
	width:100%;
	padding:9px 0 3px 0;
	background-color:#141414;
	border-bottom:solid 1px #000;
	text-align:center;
	color:#ccc;
	font-size:20px;
}

.cp_widget_img{
	width:180px;
	height:180px;
	background-size:180px 180px;
	border-bottom:solid 1px #000;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	position:relative;
}

.cp_widget_img_empty{
	background:radial-gradient(circle, rgba(255,255,255,0.05) 0%, #111 100%);
	-moz-box-shadow:    inset  0 -30px 30px -30px #000;
	-webkit-box-shadow: inset  0 -30px 30px -30px #000;
	box-shadow: inset  0 -30px 30px -30px #0a0a0a;
}

.cp_widget_no_img{
	width:64px;
	height:64px;
	background-image:url(../img/no_image.png);
	background-size:64px 64px;
	opacity:0.05;
}

.cp_widget_coming_soon{
	width:calc(100% - 20px);
	position:absolute;
	left:10px;
	bottom:10px;
	color:#fff;
	font-size:16px;
	text-align:center;
	opacity:0.3;
}

.cp_widget_value{
	width:calc(100% - 20px);
	padding:10px 10px 6px 10px;
	text-align:center;
	color:#ccc;
	font-size:20px;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp_widget_placeholder{
	width:100%;
	height:calc(100% - 33px);
	background:linear-gradient(0deg, #111 0%, #1a1a1a 100%);
	position:relative;
}

.cp_widget_placeholder_row{
	width:calc(100% - 40px);
	margin-left: 20px;
	padding:10px 0;
	opacity:0.08;
}

.cp_widget_placeholder_icon{
	width:16px;
	height:16px;
	border-radius:50%;
	background-color:#fff;
	float:left;
}

.cp_widget_placeholder_block{
	width:calc(100% - 30px);
	height:10px;
	margin-left:10px;
	margin-top:3px;
	border-radius:5px;
	background-color:#fff;
	float:left;
}

.cp_widget_locked{
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.2);
	backdrop-filter:blur(3px);
	position:absolute;
	display:flex;
	justify-content:center;
	align-items:center;
	left:0;
	top:0;
	z-index:1;
}

.cp_widget_lock_icon{
	width:64px;
	height:64px;
	margin-bottom:33px;
	background-image:url(../img/lock_icon.png);
	background-size:64px 64px;
	opacity:0.2;
}

#cp_deaths{
	width:calc(100% - 120px);
	margin-left:60px;
	margin-top:30px;
	background-color:#111;
	background: linear-gradient(135deg, #141414 0%, #0d0d0d 100%);
}

#cp_death_rows{
	width:calc(100% - 40px);
	padding:20px;
}

#cp_deaths_empty{
	width:100%;
	text-align:center;
	color:#ccc;
	font-size:20px;
}

.cp_death_date{
	width:100%;
	font-size:20px;
	color:#888;
}

.cp_death_row{
	width:100%;
	margin-top:5px;
	display:flex;
	align-items:center;
}

.cp_death_time{
	width:50px;
	font-size:18px;
	color:#bbb;
	float:left;
}

.cp_death_details{
	width:calc(100% - 78px);
	padding:7px 8px 4px 8px;
	margin-left:10px;
	background:#161616;
	border:solid 1px #000;
	font-size:18px;
	color:#999;
	float:left;
}

#cp_tasks{
	width:calc(100% - 120px);
	margin-top:10px;
	margin-left:60px;
	position:relative;
	display:flex;
	justify-content:space-between;
}

#cp_tasks_segment{
	width:calc(75% + 14px);
	height:76px;
	border:solid 2px rgba(255,255,255,0.04);
	border-radius:5px;
	position:absolute;
	top:-11px;
	left:calc(25% - 6px);
	pointer-events:none;
}

#cp_tasks_segment_title{
	width:130px;
	height:18px;
	position:absolute;
	left:calc(50% - 65px);
	top:-12px;
	background-color:#161616;
	color:rgba(255,255,255,0.1);
	font-size:13px;
	text-align:center;
}

.cp_task_section{
	width:calc(25% - 17px);
	height:40px;
	background:linear-gradient(135deg, #111 0%, #161616 100%);
	border:solid 1px #000;
	padding:8px 0;
	display:flex;
	justify-content:center;
}

.cp_task_section_icon{
	width:40px;
	height:40px;
	float:left;
}
.cp_task_section_icon img{
	width:40px;
	height:40px;
}

.cp_task_section_info{
	margin-left:8px;
	float:left;
}

.cp_task_section_value{
	height:20px;
	margin-top:2px;
	color:#ccc;
	font-size:24px;
	text-align:center;
}

.cp_task_section_desc{
	height:18px;
	color:#999;
	font-size:18px;
	text-align:center;
}

#cp_quests{
	width:calc(100% - 120px);
	margin-top:30px;
	margin-left:60px;
	display:flex;
	justify-content:space-between;
}

.cp_ach_column.leftColumn{
	width:calc(60% - 10px);
}
.cp_ach_column.rightColumn{
	width:calc(40% - 10px);
}

.cp_ach_section{
	width:calc(100% - 2px);
	margin-bottom:20px;
	background:linear-gradient(135deg, #111 0%, #161616 100%);
	border:solid 1px #000;
}

.cp_ach_header{
	width:calc(100% - 2px);
	padding: 9px 0 3px 0;
    background-color: #141414;
    border-bottom: solid 1px #000;
    text-align: center;
	color:#ccc;
	font-size:20px;
}

.cp_ach_rows{
	width: calc(100% - 40px);
    padding: 20px;
}

.cp_ach_row{
	width:100%;
	margin:2px 0;
	position:relative;
}
.cp_ach_row.hide{
	opacity:0.3;
}

.cp_ach_row_check{
	width:32px;
	height:32px;
	background: #1d1d1d;
	border:solid 1px #000;
	float:left;
}
.cp_ach_row_check img{
	width:20px;
	height:20px;
	margin:6px;
}

.cp_ach_row_value{
	width:calc(100% - 54px);
	padding: 9px 8px 5px 8px;
    background: #1d1d1d;
    border: solid 1px #000;
    font-size: 18px;
	overflow: hidden;
	color:#ccc;
    text-overflow: ellipsis;
    white-space: nowrap;
	float:right;
}

.cp_ach_mount_img{
	width:32px;
	height:32px;
	position:absolute;
	right:0;
}

.cp_ach_mount_img img{
	width:32px;
	height:32px;
	display:block;
}

.cp_ach_half_row{
	width:calc(50% - 10px);
}

#cp_stats{
	width:calc(100% - 120px);
	padding:30px 60px;
	border:solid 1px #000;
	border-left:0;
	border-right:0;
	background:rgba(16,16,16,1);
}

#cp_stats_body{
	width:100%;
	height:113px;
	position:relative;
}

#cp_stats_overlay{
	width:calc(100% + 40px);
	height:calc(100% + 40px);
	position:absolute;
	background: linear-gradient(0deg, rgba(16,16,16,1) 0%, rgba(16,16,16,1) 10%, rgba(16,16,16,0.65) 100%);
	left:-20px;
	top:-20px;
	z-index:3;
	display:flex;
	align-items:center;
	justify-content:center;
	backdrop-filter:blur(2px);
}

#cp_stats_locked{
	width:64px;
	height:64px;
	background-image:url(../img/lock_icon.png);
	background-size:64px 64px;
	opacity:0.2;
}

#cp_stats_locked_text{
	color:#fff;
	font-size:24px;
	margin-left:15px;
	opacity:0.2;
}

#cp_stats_info{
	width:150px;
	height:113px;
	float:left;
}

.cp_stats_info_row{
	width:calc(100% - 16px);
	padding:7px 8px 4px 8px;
	margin-top:10px;
	background:#161616;
	border:solid 1px #000;
	font-size:18px;
}
.cp_stats_info_row:first-child{
	margin-top:0;
}

#cp_stats_graph{
	width:calc(100% - 182px);
	height:113px;
	margin-left:30px;
	border-left:solid 2px #222;
	float:left;
	position:relative;
}

.cp_graph_y{
	width:1px;
	height:113px;
	position:absolute;
	background-color:#202020;
	top:0;
}

.cp_graph_x{
	width:100%;
	height:1px;
	position:absolute;
	background-color:#202020;
	left:0;
}

.cp_graph_point{
	width:8px;
	height:8px;
	position:absolute;
	transform:rotate(45deg) translateX(-4px);
}

.point_red{background-color:#cc0000}
.point_green{background-color:#00cc00}
.point_grey{background-color:#555}

#cp_search{
	width:calc(100% - 120px);
	margin-left:60px;
	padding:20px 0;
}

#cp_search_box{
	width: 200px;
    height: 33px;
    background: url(img/quicklogin_input.png);
    padding: 0 10px;
    border: 0 none;
    color: #a1b4b6;
    font-size: 12px;
    text-shadow: 1px 1px 0 #000;
	background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 100%);
    border: solid 1px #000;
	float:right;
}

#cp_search_text{
	color:#ccc;
	font-size:20px;
	float:right;
	margin-right:10px;
	margin-top:14px;
}