/****    character    ****/

.div_character
{
	position: absolute;
	bottom: 0px;
	left: calc(50%);
}
.div_character .character-shadow
{
	filter: drop-shadow(0px 4px 5px #000000c0);
}
.div_character .artwork
{
	z-index: 3;
}
.ship_wheel
{
	position: absolute;
	bottom: -50px;
	left: -148px;
	width: 296px;
	height: 296px;
	background: url('/img/wheel.png') center center no-repeat;
	background-size: contain;
	animation: spin 300s linear infinite;
	z-index: -3;
}
.ship_porthole
{
	position: absolute;
	bottom: 0px;
	left: -98px;
	width: 196px;
	height: 196px;
	background: url('/img/porthole.png') center center no-repeat;
	background-size: contain;
	z-index: 1;
	animation: spin 280s linear infinite reverse;
}
.avatar_image
{
	position: absolute;
	bottom: 20px;
	left: -77px;
	width: 148px;
	height: 148px;
	background-color: #71674e78;
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 2;
	border-radius: 50%;
	border: solid 3px #756233;
}

.div_character .panel
{
	position: absolute;
	background: #0a141c;
	opacity: 0.80;
	border-radius: 20px;
	font-size: 18px;
	font-weight: bold;
	padding: 10px 20px;
	padding-bottom: 20px;
	z-index: 20;
}

.div_character .panel:hover
{
	z-index: 21;
}

.div_character .close
{
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	background: url('/img/close.svg') center center no-repeat;
	background-size: contain;
	cursor: url('/img/cursor-purple.png'), auto;
	z-index: 22;
}
.div_character:hover .close
{
	z-index: 23;
}

.div_stats
{
	position: absolute;
	bottom: 13px;
	left: 165px;
	display: flex;
	z-index: 1;
}
.div_stats .item
{
	width: 70px;
	position: relative;
}
.div_stats .background
{
	position: absolute;
	bottom: 9px;
	left: 9px;
	height: 38px;
	width: 38px;
	background: #0a141c;
	/* opacity: 0.96; */
	border-radius: 24px;
	z-index: 1;
}

.div_stats .mod_bg
{
	position: absolute;
	font-size: 22px;
	font-family: 'Hack';
	line-height: 38px;
	text-align: center;
	bottom: 35px;
	left: 30px;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: url('/img/storm.png') center center no-repeat;
	cursor: url('/img/cursor-purple.png'), auto;
	border: solid 2px #79602f;
	background-size: 36px;
	z-index: 3;
}
.item .ring_button_stats
{
	bottom: 0px;
	left: 0px;
}

.div_stats .item .strength
{
	background: url('/img/sword.svg') 4px 4px no-repeat;
	background-size: 28px;
}
.div_stats .item .dexterity
{
	background: url('/img/cat.svg') 6px 7px no-repeat;
	background-size: 28px;
}
.div_stats .item .constitution
{
	background: url('/img/heart.svg') 8px 9px no-repeat;
	background-size: 22px;
}
.div_stats .item .intelligence
{
	background: url('/img/open-book.svg') 7px 8px no-repeat;
	background-size: 24px;
}
.div_stats .item .wisdom
{
	background: url('/img/eye.svg') 5px 6px no-repeat;
	background-size: 28px;
}
.div_stats .item .charisma
{
	background: url('/img/stars.svg') 7px 7px no-repeat;
	background-size: 26px;
}

.div_hit_points
{
	bottom: 210px;
	left: 60px;
	width: 300px;
	height: 176px;
	display: flex;
	flex-wrap: wrap;
	line-height: 44px;
	padding: 20px !important;
	align-content: center;
}
.div_hit_points .label
{
	width: 190px;
}
.div_hit_points .icon
{
	width: 28px;
	height: 28px;
	margin-right: 12px;
	padding: 7px 0px;
}
.div_hit_points input[type=text]
{
	font-size: 24px;
	font-family: "Hack";
	border-radius: 8px;
	width: 58px;
	text-align: center;
	padding: 4px 0px;
	margin: 6px 0px;
	border: solid 2px #f9e9b8cf;
	opacity: 1;
}

/****    ring buttons    ****/

.ring_button
{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 56px;
	height: 56px;
	z-index: 0;
	background: url('/img/porthole.png') center center no-repeat;
	background-size: contain;
	animation: spin 150s linear infinite;
	cursor: url('/img/cursor-purple.png'), auto;
	border-radius: 50%;
	z-index: 2;
}
.ring_button_background
{
	background: url('/img/storm.png') center center no-repeat;
	position: absolute;
	bottom: 9px;
	left: 9px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	/* animation: spin 30s linear infinite; */
	z-index: 0;
}

.ring_button_icon
{
	position: absolute;
	bottom: 9px;
	left: 9px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	z-index: 1;
	/* background-color: #14181c; */
}
.ring_button_helper_left
{
	position: absolute;
	bottom: 13px;
	left: 30px;
	width: 0px;
	height: 30px;
	background-color: #0a141c;
	line-height: 30px;
	text-align: left;
	padding-left: 15px;
	font-size: 18px;
	font-weight: bold;
	border-radius: 15px;
	white-space: nowrap;
	overflow: hidden;
	z-index: -3;
	transition: left 0.6s, width 0.6s;
}
.ring_button_helper_right
{
	position: absolute;
	bottom: 13px;
	left: 15px;
	width: 0px;
	height: 30px;
	background-color: #0a141c;
	line-height: 30px;
	text-align: right;
	padding-right: 15px;
	font-size: 18px;
	font-weight: bold;
	border-radius: 15px;
	white-space: nowrap;
	overflow: hidden;
	z-index: -3;
	transition: left 0.6s, width 0.6s, background-position-x 0.8s;
}

/****    ring buttons specific   ****/

/* inspiration */
.position_ring_inspiration
{
	position: absolute;
	z-index: 3;
	bottom: 3px;
	left: -121px;
}
.ring_inspiration_moon
{
	background: url('/img/moon-mini.svg') center center no-repeat;
	background-size: 28px;
}
.ring_inspiration_sun
{
	background: url('/img/sun-mini.svg') center center no-repeat;
	background-size: 28px;
}

.position_ring_inspiration:hover .ring_button_helper_left
{
	transition-delay: 0.3s;
	left: -130px;
	width: 140px;
}

/* initiative */
.position_ring_initiative
{
	position: absolute;
	z-index: 3;
	bottom: 3px;
	left: 65px;
}
.position_ring_initiative .icon
{
	position: absolute;
	background: url('/img/wind.svg') bottom center no-repeat;
	background-size: 22px;
	bottom: 4px;
	left: 9px;
	width: 39px;
	height: 43px;
	border-radius: 50%;
	z-index: 1;
}
.position_ring_initiative input[type=text]
{
	position: absolute;
	bottom: 20px;
	left: 12px;
	font-size: 20px;
	font-family: "Hack";
	width: 26px;
	text-align: center;
	padding: 2px 3px;
	background: transparent;
	opacity: 1;
	z-index: 3;
}
.position_ring_initiative:hover .ring_button_helper_right
{
	transition-delay: 0.3s;
	width: 140px;
}

/* health bar */

.position_health_bar .background
{
	background-color: #170909;
	overflow: hidden;
}
.current_health_bar
{
	background: #591510 url('/img/blood.png') bottom center no-repeat;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100%;
}
.position_health_bar
{
	position: absolute;
	z-index: 3;
	bottom: 137px;
	left: 63px;
}
.position_health_bar:hover .ring_button_helper_right
{
	transition-delay: 0.3s;
	width: 148px;
	background: #14181c url('/img/heart.svg') 46px center no-repeat;
	padding-left: 22px;
}

.position_ring_level
{
	position: absolute;
	z-index: 3;
	bottom: 69px;
	left: 86px;
}
.position_ring_level:hover .ring_button_helper_right
{
	transition-delay: 0.3s;
	width: 150px;
}
.position_ring_level .text
{
	font-size: 25px;
	font-family: "Hack";
	text-align: center;
	z-index: 1;
	position: absolute;
	bottom: 13px;
	left: 9px;
	width: 38px;
}

/* weapon */
.position_ring_weapon
{
	position: absolute;
	z-index: 3;
	bottom: 69px;
	left: -142px;
}
.ring_weapon_icon
{
	background: transparent;
}
.ring_weapon_icon_0
{
	background: url('/img/open-book.svg') 6px 7px no-repeat;
	background-size: 26px;
}
.ring_weapon_icon_1
{
	background: url('/img/sword.svg') center center no-repeat;
	background-size: 28px;
}
.ring_weapon_icon_2
{
	background: url('/img/crossbow.svg') center center no-repeat;
	background-size: 28px;
}
.position_ring_weapon:hover .ring_button_helper_left
{
	transition-delay: 0.3s;
	left: -190px;
	width: 200px;
}

/* armor */
.position_armor
{
	position: absolute;
	z-index: 3;
	bottom: 126px;
	left: -115px;
}
.armor_button
{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 76px;
	height: 76px;
	background: url('/img/shield.png') center center no-repeat;
	background-size: contain;
	cursor: url('/img/cursor-purple.png'), auto;
	z-index: 2;
}
.armor_background
{
	position: absolute;
	font-size: 22px;
	font-family: 'Hack';
	line-height: 38px;
	text-align: center;
	bottom: 6px;
	left: 0px;
	width: 76px;
	height: 76px;
	background: url('/img/storm.png') center center no-repeat;
	animation: spin 40s linear infinite;
	background-size: 56px;
	z-index: 1;
}
.position_armor .ring_button_helper_left
{
	bottom: 30px;
}
.position_armor:hover .ring_button_helper_left
{
	transition-delay: 0.3s;
	left: -140px;
	width: 150px;
}
.position_armor input[type=text]
{
	position: absolute;
	padding: 0px;
	border-radius: 0px;
	background: transparent;
	height: initial;
	bottom: 26px;
	left: 22px;
	font-size: 24px;
	font-family: "Hack";
	width: 34px;
	text-align: center;
	opacity: 1;
	z-index: 3;
}

/****    level    ****/

.div_level
{
	left: 132px;
	bottom: 135px;
}
.div_level .header input[type=text]
{
	font-size: 24px;
	border-radius: 17px;
	text-align: left;
	padding: 4px 8px;
	padding-left: 38px;
	border: solid 2px #f9e9b8cf;
	opacity: 1;
}
.div_level .header
{
	width: 100%;
	height: 46px;
	display: flex;
}
.div_level .header .character_name
{
	width: 460px;
	background: url('/img/quill-ink.svg') center left no-repeat;
	background-size: 26px;
	background-position-x: 10px;
}
.div_level .header .level
{
	width: 40px;
	background: url('/img/ship-wheel.svg') center left no-repeat;
	background-size: 29px;
	background-position-x: 3px;
	text-align: center !important;
	font-family: "Hack" !important;
	padding-left: 30px !important;
	margin-left: 10px;
}
.div_level .header .character_class
{
	width: 330px;
	background: url('/img/sun-moon-mini.svg') center left no-repeat;
	background-size: 26px;
	background-position-x: 6px;
	background-position-y: 4px;
}
.div_level .header .race
{
	width: 164px;
	background: url('/img/octopus.svg') center left no-repeat;
	background-size: 29px;
	background-position-x: 4px;
	margin-left: 10px;
}

.div_level .flex_container
{
	display: flex;
	align-items: start;
}
.div_level .flex_stat
{
	display: flex;
	flex-wrap: wrap;
	line-height: 42px;
	width: 270px;
}
.div_level .label
{
	width: 160px;
}
.div_level .number
{
	width: 62px;
	text-align: center;
	font-size: 24px;
	font-weight: normal;
	font-family: 'Hack';
}
.div_level .icon
{
	width: 28px;
	height: 28px;
	margin-right: 12px;
	padding: 7px 0px;
}
.div_level .flex_stat input[type=text]
{
	font-size: 24px;
	font-family: "Hack";
	border-radius: 8px;
	width: 58px;
	text-align: center;
	padding: 4px 0px;
	margin: 4px 0px;
	border: solid 2px #f9e9b8cf;
	opacity: 1;
}
.div_level .flex_features
{
	display: flex;
	flex-wrap: wrap;
	width: 340px;
	margin-left: 20px;
}

.div_level .flex_features .header
{
	line-height: 42px;
	height: 42px;
	text-align: center;
	display: inline-block;
}
.div_level .flex_features .header .icon
{
	padding: 0px 0px;
	vertical-align: middle;
	padding-bottom: 4px;
}
.div_level .flex_features .header .label
{
	vertical-align: middle;
}
.div_level .flex_features textarea
{
	width: 324px;
	height: 380px;
}

/****    details stat    ****/

.div_details_stat
{
	left: 132px;
	bottom: 135px;
	min-height: 234px;
}
.div_details_stat .flex_container
{
	display: flex;
	align-items: start;
}

.div_details_stat .title
{
	width: 100%;
	height: 50px;
	display: inline-block;
	text-align: center;
}
.div_details_stat .title .icon
{
	padding: 0px 0px;
	vertical-align: middle;
}
.div_details_stat .title .label
{
	vertical-align: middle;
}

.div_details_stat .flex_stat
{
	display: flex;
	flex-wrap: wrap;
	line-height: 44px;
	align-content: center;
	width: 250px;
}
.div_details_stat .label
{
	width: 140px;
}
.div_details_stat .number
{
	width: 62px;
	text-align: center;
	font-size: 24px;
	font-weight: normal;
	font-family: 'Hack';
}
.div_details_stat .icon
{
	width: 28px;
	height: 28px;
	margin-right: 12px;
	padding: 7px 0px;
}
.div_details_stat input[type=text]
{
	font-size: 24px;
	font-family: "Hack";
	border-radius: 8px;
	width: 58px;
	text-align: center;
	padding: 4px 0px;
	margin: 6px 0px;
	border: solid 2px #f9e9b8cf;
	opacity: 1;
}

.div_details_stat .flex_skill
{
	width: 300px;
	margin-left: 40px;
	line-height: 44px;
}
.div_details_stat .flex_skill_line
{
	display: flex;
	width: 100%;
}
.div_details_stat .flex_skill .label
{
	width: 190px;
}
.div_details_stat .flex_skill .icon
{
	width: 22px;
	cursor: url('/img/cursor-purple.png'), auto;
}

/****    weapon    ****/

.div_weapon
{
	left: -360px;
	bottom: 230px;
	width: 720px;
}
.div_weapon .close
{
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	background: url('/img/close.svg') center center no-repeat;
	background-size: contain;
	cursor: url('/img/cursor-purple.png'), auto;
	z-index: 5;
}
.div_weapon .title
{
	width: 100%;
	height: 50px;
	display: inline-block;
	text-align: center;
}
.div_weapon .title .icon
{
	padding: 0px 0px;
	vertical-align: middle;
}
.div_weapon .title .label
{
	vertical-align: middle;
}

.div_weapon .flex_container
{
	display: flex;
	align-items: start;
	flex-wrap: wrap;
	line-height: 42px;
}
.div_weapon input[type=text]
{
	font-size: 24px;
	font-family: "Hack";
	border-radius: 8px;
	width: 58px;
	text-align: center;
	padding: 4px 0px;
	margin: 4px 0px;
	border: solid 2px #f9e9b8cf;
	opacity: 1;
}
.div_weapon .check
{
	width: 22px;
	height: 28px;
	margin-right: 12px;
	padding: 7px 0px;
	cursor: url('/img/cursor-purple.png'), auto;
}
.div_weapon .icon
{
	width: 28px;
	height: 28px;
	margin-right: 12px;
	padding: 7px 0px;
}
.div_weapon .name
{
	width: 180px;
	text-align: center;
}
.div_weapon .name input[type=text]
{
	width: 180px;
	font-size: 20px;
	font-family: sans-serif;
}
.div_weapon .bonus
{
	width: 150px;
	margin-left: 20px;
}
.div_weapon .edit_bonus input[type=text]
{
	width: 50px;
}
.div_weapon .damage
{
	margin-left: 10px;
	width: 100px;
}
.div_weapon .edit_damage input[type=text]
{
	width: 120px;
}

/****    div_left_buttons    ****/

.div_left_buttons
{
	position: absolute;
	bottom: 13px;
	left: calc(-165px - 3 * 70px);
	display: flex;
}
.div_left_buttons .item
{
	width: 56px;
	position: relative;
	margin-left: 14px;
	position: relative;
}

/* inventory */

.position_ring_inventory .icon
{
	position: absolute;
	background: url('/img/chest.svg') center center no-repeat;
	background-size: 30px;
	bottom: 8px;
	left: 10px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	z-index: 1;
}

.div_inventory
{
	left: -476px;
	bottom: 134px;
	width: 320px;
	min-height: 234px;
	height: 420px;
}

.div_inventory .title
{
	width: 100%;
	height: 40px;
	display: inline-block;
	text-align: center;
}
.div_inventory .title .icon
{
	padding: 0px 0px;
	vertical-align: middle;
	width: 28px;
	height: 28px;
	margin-right: 12px;
}
.div_inventory .title .label
{
	vertical-align: middle;
}
.div_inventory textarea
{
	width: calc(100% - 16px);
	height: 363px;
}

/* spellbook */
.position_ring_spellbook .icon
{
	position: absolute;
	background: url('/img/spell-book.svg') center center no-repeat;
	background-size: 38px;
	bottom: 9px;
	left: 9px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	z-index: 1;
}

/* notes */
.position_ring_notes .icon
{
	position: absolute;
	background: url('/img/scroll.svg') center center no-repeat;
	background-size: 28px;
	bottom: 8px;
	left: 8px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	z-index: 1;
}

.div_notes
{
	left: -400px;
	bottom: 220px;
	width: 800px;
	min-height: 234px;
	height: 420px;
}

.div_notes .title
{
	width: 100%;
	height: 40px;
	display: inline-block;
	text-align: center;
}
.div_notes .title .icon
{
	padding: 0px 0px;
	vertical-align: middle;
	width: 28px;
	height: 28px;
	margin-right: 12px;
}
.div_notes .title .label
{
	vertical-align: middle;
}
.div_notes textarea
{
	width: calc(100% - 16px);
	height: 363px;
}
