#character_block {
	text-align: center;
}

#character_note, #character_empty, #character_full {
	color: #666;
	font-size: 14px;
	text-align: center;
	padding: 150px 0;
}

#character_note {
	display: none;
}

#character_note span, #character_empty span, #character_full span {
	font-size: 24px;
}

.character_scene {
	display: inline-block;
	height: 450px;
	margin: 5px 4px;
	perspective: 600px;
	width: 208px;
}

@media (max-width: 700px) {
	.character_scene {
		width: 100%;
	}
}

.character_sheet {
	border: 1px solid #4f797c;
	border-image: linear-gradient(to top, #293140 0%,#4f797c 0%,#293140 50%);
	border-image-slice: 1;
	box-shadow: 0 0 4px 2px rgba(0,0,0,.4);
	height: 100%;
	position: relative;
	text-align: center;
	transform-style: preserve-3d;
	transform-origin: center right;
	transition: transform 1s;
	vertical-align: top;
	width: 100%;
}

.character_sheet_front, .character_sheet_back {
	height: 100%;
	width: 100%;
}

#character_create .character_sheet_front, #character_create .character_sheet_back {
	height: 450px;
	width: 208px;
}

#character_modify .character_scene, #character_modify .character_sheet_front, #character_modify .character_sheet_back {
	width: 167px;
}

#character_order .character_scene, #character_order .character_sheet_front, #character_order .character_sheet_back {
	width: 167px;
}

#character_delete .character_scene, #character_delete .character_sheet_front, #character_delete .character_sheet_back {
	width: 167px;
}

#character_modify .character_avatar_none:after, #character_order .character_avatar_none:after, #character_delete .character_avatar_none:after {
	left: 4px;
	right: 4px;
}

.character_sheet_front p.character_fullname {
	max-height: 19px;
    overflow: hidden;
}
.character_sheet_front p {
	max-height: 16px;
    overflow: hidden;
}

#character_modify .character_secondary_1, #character_order .character_secondary_1, #character_delete .character_secondary_1 {
	left: 25px;
}
#character_modify .character_secondary_3, #character_order .character_secondary_3, #character_delete .character_secondary_3 {
	right: 25px;
}

#character_modify .character_draw_backface {
	width: 167px;
}

.character_sheet_front {
	background-color: #1e1b17;
	background-image: linear-gradient(to top, rgba(31, 81, 106, 0.5) 0%,rgba(36, 93, 119, 0.5) 15%,rgba(12, 31, 46, 0.5) 50%), url("./images/nami.png");
}

.character_sheet_back {
	background-color: #111c22;
	background-image: radial-gradient(ellipse, rgba(36, 93, 119, 0.2) 0%,rgba(12, 31, 46, 0.2) 100%), url("./images/nami.png");
}

.character_sheet_concept {
	border: 1px solid #4f797c;
	border-image: linear-gradient(to top, #293140 0%,#4f797c 0%,#293140 50%);
	border-image-slice: 1;
	box-shadow: 0 0 4px 2px rgba(0,0,0,.4);
	display: inline-block;
	position: relative;
	text-align: center;
	vertical-align: top;
}

.character_sheet_display {
	backface-visibility: hidden;
	position: absolute;
}

.rotated {
	-o-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.turn_over {
	background-color: #0d1b25;
	border-radius: 4px;
	bottom: 15px;
	color: #a28a5e;
	cursor: pointer;
	height: 17px;
	padding: 1px 1px 0 0;
	position: absolute;
	right: 15px;
	width: 16px;
}

.turn_over i {
	margin: 1px 0 0 3px;
}

.do-flip {
	-o-transform: translateX(-100%) rotateY(-180deg);
	-webkit-transform: translateX(-100%) rotateY(-180deg);
	-ms-transform: translateX(-100%) rotateY(-180deg);
	transform: translateX(-100%) rotateY(-180deg);
}


/*** FRONTFACE ***/

.character_canvas, .character_links {
	position: absolute;
	left: 0;
	top: 0;
}

.character_links {
	width: 36px;
}

.character_link {
	background-size: 30px 30px;
	display: block;
	height: 30px;
	margin: 3px 3px 0 3px;
	position: relative;
	width: 30px;
}

.character_link_profile { background-image: url("./images/buttons/profile.png"); }
.character_link_profile:hover { background-image: url("./images/buttons/profile_highlighted.png"); }
.character_link_sheet { background-image: url("./images/buttons/sheet.png"); }
.character_link_sheet:hover { background-image: url("./images/buttons/sheet_highlighted.png"); }

.character_avatar, .character_avatar_none {
	background-color: #121212;
	border: 4px double #342b20;
	display: inline-block;
	height: 200px;
	margin: 18px 0 5px 0;
	width: 150px;
}

.character_avatar img {
	height: 200px;
	width: 150px;
}

.character_avatar_none {
	background-image: url("./images/no_avatar.png");
	display: inline-block;
}

@media (min-width: 700px) {
	.character_avatar:after, .character_avatar_none:after {
		content: " ";
		position: absolute;
		top: 18px;
		left: 25px;
		right: 25px;
		bottom: 224px;
		border: 1px solid #ffea00;
		border-image: linear-gradient(180deg, #3e3310, #806734, #c6b98b, #806734, #3e3310);
		border-image-slice: 1;
		pointer-events: none;
	}
	#character_modify .character_avatar:after, #character_order .character_avatar:after, #character_delete .character_avatar:after {
		left: 4px;
		right: 4px;
	}
}

.character_status_inactivity, .character_status_new {
	background-size: cover;
	display: block;
	position: absolute;
}

.character_status_inactivity {
	background-image: url("./images/status/inactivity.png");
	height: 26px;
	left: 17px;
	top: 204px;
	width: 26px;
}

.character_status_new {
	background-image: url("./images/status/new.png");
	height: 32px;
	left: 11px;
	top: 199px;
	width: 32px;
}

@media (max-width: 700px) {
	.character_status_inactivity {
		height: 20px;
		left: 6px;
		top: 188px;
		width: 20px;
	}
	.character_status_new {
		height: 26px;
		left: 0;
		top: 182px;
		width: 26px;
	}
}

.character_sheet_front hr {
	border-top: 1px solid rgba(202, 171, 104, 0.3);
	border-width: 1px 0 0;
	border-image: radial-gradient(ellipse at center, rgba(202, 171, 104, 0.3), rgba(0, 0, 0, 0.1));
	border-style: solid;
	border-image-slice: 1;
	margin: auto;
	width: 80%;
}

.character_sheet_front p.character_fullname {
	font-size: 14px;
	margin: 5px 0 2px 0;
}

.character_sheet_front p.character_nickname {
	color: #a28a5e;
	font-size: 12px;
	height: 16px;
	margin: 0;
}

.character_sheet_front p.character_titles {
	color: #999;
	font-size: 10px;
	margin: 1em 0 0 0;
	padding: 0 10px;
	text-align: left;
}

.character_sheet_front p.character_names {
	font-size: 12px;
	margin: 0;
	padding: 0 10px;
	text-align: left;
}

.character_sheet_front p.fc_tag {
	font-size: 14px;
	margin: 0.75em 0 0.5em 0;
}

@media (max-width: 700px) {
	.character_scene {
		height: 220px;
		margin: 5px 0;
	}
	#character_create .character_sheet_front, #character_create .character_sheet_back {
		height: 220px;
		width: 100%;
	}
	#character_create .character_sheet_front {
		margin-bottom: 5px;
	}
	.character_sheet_front {
		background-image: linear-gradient(-30deg, rgba(31, 81, 106, 0.5) 0%,rgba(36, 93, 119, 0.5) 40%,rgba(12, 31, 46, 0.5) 90%), url("./images/nami.png");
	}
	.character_sheet_front, .character_sheet_back {
		box-sizing: border-box;
		padding-top: 52px;
	}
	.character_avatar, .character_avatar_none {
		background-size: cover;
		float: left;
		height: 140px;
		margin: 5px 0 5px 10px;
		width: 105px;
	}
	.character_avatar img {
		height: 140px;
		width: 105px;
	}
	p.character_fullname, #character_fullname, .character_sheet_front hr.character_hr, p.character_nickname, #character_nickname {
		position: absolute;
		left: 50%;
		left: calc(50% - 100px);
		width: 200px;
	}
	p.character_fullname, #character_fullname {
		top: 0;
	}
	.character_sheet_front hr.character_hr {
		top: 26px;
	}
	p.character_nickname, #character_nickname {
		top: 27px;
	}
}

/*** BACKFACE ***/

.character_primary {
	align-items: center;
	display: flex;
	position: absolute;
    top: 30px;
    right: 50%;
    right: calc(50% - 41px);
    height: 82px;
    width: 82px;
	background-color: #101217;
	border-radius: 50%;
}

.character_primary:after {
	position: absolute;
	top: -2px;
	right: -2px;
	bottom: -2px;
	left: -2px;
	background-image: linear-gradient(130deg, rgb(26, 35, 40) 0%,rgb(38, 64, 68) 100%);
	border-radius: 50%;
	content: "";
	z-index: -1;
}

.character_primary_icon {
	background-image: url("./images/primary-sprite.png");
	background-repeat: no-repeat;
	height: 84px;
	width: 84px;
}

.character_primary_icon.character_primary_none {
	background-image: none;
}

.character_primary_icon.character_primary_paladin { background-position: 0 0; }
.character_primary_choice.character_primary_paladin:after { background-image: url("./images/jobs/paladin.png"); }
.character_primary_icon.character_primary_warrior { background-position: 0 -84px; }
.character_primary_choice.character_primary_warrior:after { background-image: url("./images/jobs/warrior.png"); }
.character_primary_icon.character_primary_darkknight { background-position: -168px 0; }
.character_primary_choice.character_primary_darkknight:after { background-image: url("./images/jobs/darkknight.png"); }
.character_primary_icon.character_primary_gunbreaker { background-position: -168px -84px; }
.character_primary_choice.character_primary_gunbreaker:after { background-image: url("./images/jobs/gunbreaker.png"); }
.character_primary_icon.character_primary_whitemage { background-position: 0 -168px; }
.character_primary_choice.character_primary_whitemage:after { background-image: url("./images/jobs/whitemage.png"); }
.character_primary_icon.character_primary_scholar { background-position: -168px -168px; }
.character_primary_choice.character_primary_scholar:after { background-image: url("./images/jobs/scholar.png"); }
.character_primary_icon.character_primary_astrologian { background-position: -252px -84px; }
.character_primary_choice.character_primary_astrologian:after { background-image: url("./images/jobs/astrologian.png"); }
.character_primary_icon.character_primary_monk { background-position: -252px -168px; }
.character_primary_choice.character_primary_monk:after { background-image: url("./images/jobs/monk.png"); }
.character_primary_icon.character_primary_dragoon { background-position: -84px -252px; }
.character_primary_choice.character_primary_dragoon:after { background-image: url("./images/jobs/dragoon.png"); }
.character_primary_icon.character_primary_ninja { background-position: -252px -252px; }
.character_primary_choice.character_primary_ninja:after { background-image: url("./images/jobs/ninja.png"); }
.character_primary_icon.character_primary_samourai { background-position: -336px -84px; }
.character_primary_choice.character_primary_samourai:after { background-image: url("./images/jobs/samurai.png"); }
.character_primary_icon.character_primary_bard { background-position: -336px -168px; }
.character_primary_choice.character_primary_bard:after { background-image: url("./images/jobs/bard.png"); }
.character_primary_icon.character_primary_machinist { background-position: 0 -336px; }
.character_primary_choice.character_primary_machinist:after { background-image: url("./images/jobs/machinist.png"); }
.character_primary_icon.character_primary_dancer { background-position: -84px -336px; }
.character_primary_choice.character_primary_dancer:after { background-image: url("./images/jobs/dancer.png"); }
.character_primary_icon.character_primary_blackmage { background-position: -168px -336px; }
.character_primary_choice.character_primary_blackmage:after { background-image: url("./images/jobs/blackmage.png"); }
.character_primary_icon.character_primary_summoner { background-position: -336px -336px; }
.character_primary_choice.character_primary_summoner:after { background-image: url("./images/jobs/summoner.png"); }
.character_primary_icon.character_primary_redmage { background-position: -420px 0; }
.character_primary_choice.character_primary_redmage:after { background-image: url("./images/jobs/redmage.png"); }
.character_primary_icon.character_primary_bluemage { background-position: -420px -84px; }
.character_primary_choice.character_primary_bluemage:after { background-image: url("./images/jobs/bluemage.png"); }

.character_primary_icon.character_primary_gladiator { background-position: -84px 0; }
.character_primary_choice.character_primary_gladiator:after { background-image: url("./images/classes/gladiator.png"); }
.character_primary_icon.character_primary_marauder { background-position: -84px -84px; }
.character_primary_choice.character_primary_marauder:after { background-image: url("./images/classes/marauder.png"); }
.character_primary_icon.character_primary_pugilist { background-position: 0 -252px; }
.character_primary_choice.character_primary_pugilist:after { background-image: url("./images/classes/pugilist.png"); }
.character_primary_icon.character_primary_lancer { background-position: -168px -252px; }
.character_primary_choice.character_primary_lancer:after { background-image: url("./images/classes/lancer.png"); }
.character_primary_icon.character_primary_rogue { background-position: -336px 0; }
.character_primary_choice.character_primary_rogue:after { background-image: url("./images/classes/rogue.png"); }
.character_primary_icon.character_primary_archer { background-position: -336px -252px; }
.character_primary_choice.character_primary_archer:after { background-image: url("./images/classes/archer.png"); }
.character_primary_icon.character_primary_conjurer { background-position: -84px -168px; }
.character_primary_choice.character_primary_conjurer:after { background-image: url("./images/classes/conjurer.png"); }
.character_primary_icon.character_primary_arcanist { background-position: -252px 0; }
.character_primary_choice.character_primary_arcanist:after { background-image: url("./images/classes/arcanist.png"); }
.character_primary_icon.character_primary_thaumaturge { background-position: -252px -336px; }
.character_primary_choice.character_primary_thaumaturge:after { background-image: url("./images/classes/thaumaturge.png"); }

.character_primary .character_tooltiptext {
	top: 107%;
	
}

.character_secondary {
	align-items: center;
	background-color: #101217;
	border-radius: 50%;
	display: flex;
	position: absolute;
    height: 32px;
    width: 32px;
}

.character_secondary:after {
	position: absolute;
	top: -2px;
	right: -2px;
	bottom: -2px;
	left: -2px;
	background-image: linear-gradient(130deg, rgb(26, 35, 40) 0%, rgb(38, 64, 68) 100%);
	border-radius: 50%;
	content: "";
	z-index: -1;
}

.character_secondary_icon {
	background-image: url("./images/secondary-sprite.png");
	background-repeat: no-repeat;
	border: none;
	margin: 0 auto;
	height: 32px;
	width: 32px;
}

.character_secondary_icon.character_secondary_none {
	background-image: none;
}

.character_secondary_icon.character_secondary_carpenter { background-position: -96px -96px; }
.character_secondary_choice.character_secondary_carpenter:after { background-image: url("./images/activities/Menuisier.png"); }
.character_secondary_icon.character_secondary_blacksmith { background-position: -96px -64px; }
.character_secondary_choice.character_secondary_blacksmith:after { background-image: url("./images/activities/Forgeron.png"); }
.character_secondary_icon.character_secondary_armorer { background-position: -32px 0; }
.character_secondary_choice.character_secondary_armorer:after { background-image: url("./images/activities/Armurier.png"); }
.character_secondary_icon.character_secondary_goldsmith { background-position: -32px -128px; }
.character_secondary_choice.character_secondary_goldsmith:after { background-image: url("./images/activities/Orfevre.png"); }
.character_secondary_icon.character_secondary_leatherworker { background-position: -160px -32px; }
.character_secondary_choice.character_secondary_leatherworker:after { background-image: url("./images/activities/Tanneur.png"); }
.character_secondary_icon.character_secondary_weaver { background-position: -32px -32px; }
.character_secondary_choice.character_secondary_weaver:after { background-image: url("./images/activities/Couturier.png"); }
.character_secondary_icon.character_secondary_alchemist { background-position: 0 0; }
.character_secondary_choice.character_secondary_alchemist:after { background-image: url("./images/activities/Alchimiste.png"); }
.character_secondary_icon.character_secondary_culinarian { background-position: -64px -32px; }
.character_secondary_choice.character_secondary_culinarian:after { background-image: url("./images/activities/Cuisinier.png"); }
.character_secondary_icon.character_secondary_miner { background-position: 0 -128px; }
.character_secondary_choice.character_secondary_miner:after { background-image: url("./images/activities/Mineur.png"); }
.character_secondary_icon.character_secondary_botanist { background-position: -96px 0; }
.character_secondary_choice.character_secondary_botanist:after { background-image: url("./images/activities/Botaniste.png"); }
.character_secondary_icon.character_secondary_fisher { background-position: -64px -128px; }
.character_secondary_choice.character_secondary_fisher:after { background-image: url("./images/activities/Pecheur.png"); }
.character_secondary_icon.character_secondary_musician { background-position: -160px -96px; }
.character_secondary_choice.character_secondary_musician:after { background-image: url("./images/activities/Troubadour.png"); }
.character_secondary_icon.character_secondary_writer { background-position: -128px -32px; }
.character_secondary_choice.character_secondary_writer:after { background-image: url("./images/activities/Ecrivain.png"); }
.character_secondary_icon.character_secondary_engineer { background-position: -128px -64px; }
.character_secondary_choice.character_secondary_engineer:after { background-image: url("./images/activities/Ingenieur.png"); }
.character_secondary_icon.character_secondary_tenant { background-position: -160px -64px; }
.character_secondary_choice.character_secondary_tenant:after { background-image: url("./images/activities/Tenancier.png"); }
.character_secondary_icon.character_secondary_farmer { background-position: 0 -64px; }
.character_secondary_choice.character_secondary_farmer:after { background-image: url("./images/activities/Eleveur.png"); }
.character_secondary_icon.character_secondary_mercenary { background-position: -128px -96px; }
.character_secondary_choice.character_secondary_mercenary:after { background-image: url("./images/activities/Mercenaire.png"); }
.character_secondary_icon.character_secondary_explorer { background-position: -64px -64px; }
.character_secondary_choice.character_secondary_explorer:after { background-image: url("./images/activities/Explorateur.png"); }
.character_secondary_icon.character_secondary_merchant { background-position: 0 -96px; }
.character_secondary_choice.character_secondary_merchant:after { background-image: url("./images/activities/Marchand.png"); }
.character_secondary_icon.character_secondary_seaman { background-position: -32px -96px; }
.character_secondary_choice.character_secondary_seaman:after { background-image: url("./images/activities/Marin.png"); }
.character_secondary_icon.character_secondary_pirate { background-position: -128px -128px; }
.character_secondary_choice.character_secondary_pirate:after { background-image: url("./images/activities/Pirate.png"); }
.character_secondary_icon.character_secondary_hunter { background-position: -128px 0; }
.character_secondary_choice.character_secondary_hunter:after { background-image: url("./images/activities/Chasseur.png"); }
.character_secondary_icon.character_secondary_stylist { background-position: -160px 0; }
.character_secondary_choice.character_secondary_stylist:after { background-image: url("./images/activities/Styliste.png"); }
.character_secondary_icon.character_secondary_adventurer { background-position: -64px 0; }
.character_secondary_choice.character_secondary_adventurer:after { background-image: url("./images/activities/Aventurier.png"); }
.character_secondary_icon.character_secondary_aetherologist { background-position: -32px -64px; }
.character_secondary_choice.character_secondary_aetherologist:after { background-image: url("./images/activities/Etherologue.png"); }
.character_secondary_icon.character_secondary_researcher { background-position: 0 -32px; }
.character_secondary_choice.character_secondary_researcher:after { background-image: url("./images/activities/Chercheur.png"); }
.character_secondary_icon.character_secondary_doctor { background-position: -64px -96px; }
.character_secondary_choice.character_secondary_doctor:after { background-image: url("./images/activities/Medecin.png"); }
.character_secondary_icon.character_secondary_painter { background-position: -96px -128px; }
.character_secondary_choice.character_secondary_painter:after { background-image: url("./images/activities/Peintre.png"); }
.character_secondary_icon.character_secondary_diplomat { background-position: -96px -32px; }
.character_secondary_choice.character_secondary_diplomat:after { background-image: url("./images/activities/Diplomate.png"); }

.character_secondary_1 {
    top: 110px;
	left: 40px;
}

.character_secondary_1 .character_tooltiptext {
	margin-left: 15px;
}

.character_secondary_2 {
    top: 130px;
    right: 50%;
    right: calc(50% - 16px);
}

.character_secondary_3 {
    top: 110px;
	right: 40px;
}

.character_secondary_3 .character_tooltiptext {
	margin-left: -15px;
}

.character_gauge_container {
	height: 20px;
	position: absolute;	
	left: 20%;
	width: 60%;
}

.character_gauge_height {
	top: 190px;
}

.character_gauge_build {
	top: 225px;
}

.character_gauge_muscles {
	top: 260px;
}

.character_gauge {
	align-items: center;
	border: 0;
	box-shadow: 0 0 5px #000;
	display: flex;
	justify-content: center;
	list-style: none;
	margin: 10px 0 0 0;
	padding: 0;
	vertical-align: baseline;
}

.character_gauge_item {
	border-top: 1px solid #414532;
	flex: 1 1 auto;
	position: relative;
	vertical-align: top;
}

.character_gauge_item:before {
	background-color: #171817;
	border: 1px solid #414532;
	content: " ";
	height: 5px;
	left: 0;
	margin: 0 auto;
	position: absolute;
	right: 0;
	transform: rotate(45deg);
	top: -4px;
	width: 5px;
}

.character_gauge_item_selected:before {
	border: 1px solid #ae9d6d;
	height: 7px;
	top: -5px;
	width: 7px;
}

.character_gauge_item_selected:after {
	background-color: #a5e0ff;
	border: 1px solid #73bfe6;
	box-shadow: 0 0 5px 1px #73bfe6;
	content: " ";
	height: 3px;
	left: 0;
	margin: 0 auto;
	position: absolute;
	right: 0;
	top: -3px;
	transform: rotate(45deg);
	width: 3px;
}

.character_gauge_icon {
	background-image: url("./images/figures/sprite_figures.png");
	background-size: cover;
	display: block;
	height: 27px;
	position: absolute;
	top: -3px;
	width: 27px;
}

.character_gauge_left {
	left: -29px;
}

.character_gauge_right {
	right: -29px;
}

.character_gauge_height .character_gauge_left { background-position: -135px 0; } /* Petit */
.character_gauge_height .character_gauge_right {  background-position: -27px 0; } /* Grand */
.character_gauge_build .character_gauge_left { background-position: -81px 0; } /* Mince */
.character_gauge_build .character_gauge_right { background-position: -54px 0; } /* Gros */
.character_gauge_muscles .character_gauge_left { background-position: 0 0; } /* Faible */
.character_gauge_muscles .character_gauge_right { background-position: -108px 0; } /* Muscle */

.distinctive_signs {
	display: flex;
	left: 10%;
	position: absolute;
	top: 305px;
	width: 80%;
}

.distinctive_sign {
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 53px 53px;
	height: 53px;
	flex: 1 1 33%;
	justify-content: center;
	position: relative;
}

.distinctive_signs .character_tooltiptext {
	top: 102%;
}

.character_tattoos.empty { background-image: url("./images/gems/tattoo_empty.png"); }
.character_tattoos.filled { background-image: url("./images/gems/tattoo_filled.png"); }

.character_tattoos .character_tooltiptext {
	margin-left: 15px;
}

.character_scars.empty { background-image: url("./images/gems/scars_empty.png"); }
.character_scars.filled { background-image: url("./images/gems/scars_filled.png"); }
.character_magic_aura.empty { background-image: url("./images/gems/magic_aura_empty.png"); }
.character_magic_aura.filled { background-image: url("./images/gems/magic_aura_filled.png"); }

.character_magic_aura .character_tooltiptext {
	margin-left: -15px;
}

/* Tooltip text */
.character_tooltiptext {
    visibility: hidden;
    width: 110px;
    background-color: rgba(0, 0, 0, 0.85);
	border: 1px solid rgba(79, 121, 124, 0.7);
	box-shadow: 0 0 7px #000;
    color: #ccc;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
	top: 120%;
	left: 50%;
	left: calc(50% - 55px);
	z-index: 999;
}

.character_tooltiptext hr {
	border-image: radial-gradient(ellipse at center, rgba(202, 171, 104, 0.5), rgba(0, 0, 0, 0.1));
	border-image-slice: 1;
	margin: 1px auto;
	width: 80%;
}

/* Show the tooltip text when you mouse over the tooltip container */
.character_tooltip:hover .character_tooltiptext {
    visibility: visible;
}

@media (max-width: 700px) {
	.character_draw_backface {
		display: none;
	}
	.character_primary {
		top: 25px;
		left: 10px;
	}
	.character_secondary_1 {
		top: 15px;
		left: 95px;
	}
	.character_secondary_2 {
		top: 51px;
		left: 120px;
	}
	.character_secondary_3 {
		top: 87px;
		left: 95px;
	}
	.character_gauge_height {
		top: 134px;
	}
	.character_gauge_build {
		top: 162px;
	}
	.character_gauge_muscles {
		top: 190px;
	}
	.distinctive_signs {
		left: 47%;
		top: 45px;
		width: 50%;
	}
	.character_gauge_container .character_tooltiptext {
		top: -230%;
	}
	.character_tattoos .character_tooltiptext {
		margin-left: 0;
	}
	.character_magic_aura .character_tooltiptext {
		margin-left: -20px;
	}
}


/*** CUSTOM RADIO ***/

#character_orders {
	float: left;
	margin-bottom: 10px;
	max-width: 260px;
	width: 23%;
}

#character_orders fieldset, #character_filters fieldset {
	border: 1px solid #1c2f37;
	padding: 5px 10px;
}

#character_orders fieldset {
	margin-left: 2px;
	margin-right: 10px;
}

#character_orders fieldset legend, #character_filters fieldset legend {
	background-color: #47585e;
    color: #000;
	margin-left: 15px;
	padding: 3px 6px;
}

/* The container */
.custom-radio {
	color: #999;
    display: block;
    position: relative;
    padding-left: 25px;
    margin: 6px 0;
    cursor: pointer;
    font-size: 12px;
	text-align: left;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: #1b2930;
    border-radius: 50%;
}
.checkmark.checkmark_special {
	left: 50%;
	left: calc(50% - 7px);
}

/* On mouse-over, add a grey background color */
.custom-radio:hover input ~ .checkmark {
    background-color: #243740;
}

/* When the radio button is checked, add a blue background */
.custom-radio input:checked ~ .checkmark {
    background-color: #69837f;
	background-image: linear-gradient(145deg, #293140 0%,#69837f 50%,#293140 100%);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.custom-radio input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.custom-radio .checkmark:after {
 	top: 4px;
	left: 4px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #121212;
}

@media (max-width: 700px) {
	#character_orders {
		max-width: 100%;
		width: 100%;
	}
	#character_orders fieldset {
		margin: 0;
		max-height: 20px;
		overflow: hidden;
		transition: max-height 0.2s ease-out;
	}
}


/*** CUSTOM SELECT ***/

#character_filters {
	float: left;
	max-width: 870px;
	width: 77%;
}

/*the container must be positioned relative:*/
.custom-select {
	float: left;
	margin: 5px 2px 2px 2px;
	position: relative;
	width: 250px;
}
.custom-select label {
	color: #999;
	padding-left: 5px;
}
.custom-select select {
	display: none; /*hide original SELECT element:*/
}
.custom-select .select-selected, #character_avatar, #character_linktosheet, #fc_linktosheet {
	background-color: #1b2930;
	border: 1px solid #69837f;
	border-image: linear-gradient(145deg, #293140 0%,#69837f 50%,#293140 100%);
	border-image-slice: 1;
	font-size: 12px;
	margin-top: 2px;
}
.custom-select .select-selected:hover {
	background-color: #243740;
}
/*style the arrow inside the select element:*/
.select-selected:after {
	position: absolute;
	content: "";
	top: 24px;
	right: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #69837f transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
	border-color: transparent transparent #69837f transparent;
	top: 17px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
	color: #ccc;
	padding: 3px 16px;
	border: 1px solid transparent;
	border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
	cursor: pointer;
}
/*style items (options):*/
.select-items {
	position: absolute;
	background-color: rgba(18, 18, 18, 0.9);
	top: 100%;
	left: 0;
	overflow-y: auto;
    max-height: 460px;
	right: 0;
	z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
	display: none;
}
.select-items div:hover, .same-as-selected {
	background-color: #243740;
}

@media (max-width: 700px) {
	#character_filters {
		max-width: 100%;
		width: 100%;
	}
	#character_filters fieldset {
		margin-bottom: 10px;
		max-height: 20px;
		overflow: hidden;
		transition: max-height 0.2s ease-out;
	}
	#character_filters .custom-select {
		width: 100%;
	}
	.character_titles {
		width: 50%;
	}
	.custom-select {
		width: 65%;
	}
}

@media (max-width: 425px) {
	#character_create .character_avatar_none, #character_create .character_avatar {
		display: none;
	}
	#character_create .custom-select {
		width: 100%;
	}
}

#raz {
	background-color: #1b2930;
	border: 1px solid #69837f;
	border-image: linear-gradient(145deg, #293140 0%,#69837f 50%,#293140 100%);
	border-image-slice: 1;
	float: left;
	margin: 20px 2px 0 2px;
	padding: 4px 10px;
}

#raz:hover {
	background-color: #243740;
}

#raz:focus {
	outline: none;
}

.character_create_select {
	margin: 0 0 10px 0;
	padding: 0;
	text-align: left;
}
@media (min-width: 700px) {
	.character_create_select {
		width: 100%;
	}
}
.character_create_select .select-selected {
	background: none;
	border: none;
	padding: 0 10px;
}
.character_create_select .select-selected:after {
	top: 6px;
}
.character_create_select .select-selected.select-arrow-active:after {
	top: 0;
}
.character_create_select .select-selected:hover {
	background: none;
}
.character_create_select .select-items {
	height: 150px;
	overflow-y: scroll;
}

.character_input {
	background: none;
	border: none;
	text-align: center;
}
.character_input:focus {
	outline: none;
}
.character_input#character_fullname {
	font-size: 14px;
	margin: 5px 0 2px 0;
	
}
.character_input#character_nickname {
	color: #a28a5e;
	font-size: 12px;
	height: 16px;
}
.character_input#fc_tag {
	font-size: 14px;
	height: 16px;
	margin: 3px 0 0 0;
}
.character_input#character_linktosheet, .character_input#fc_linktosheet {
	width: 424px;
}

.character_input#character_fullname::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgba(204, 204, 204, 0.5);
}
.character_input#character_fullname::-moz-placeholder { /* Firefox 19+ */
  color: rgba(204, 204, 204, 0.5);
}
.character_input#character_fullname:-ms-input-placeholder { /* IE 10+ */
  color: rgba(204, 204, 204, 0.5);
}
.character_input#character_fullname:-moz-placeholder { /* Firefox 18- */
  color: rgba(204, 204, 204, 0.5);
}

.character_input#character_nickname::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgba(162, 138, 94, 0.5);
}
.character_input#character_nickname::-moz-placeholder { /* Firefox 19+ */
  color: rgba(162, 138, 94, 0.5);
}
.character_input#character_nickname:-ms-input-placeholder { /* IE 10+ */
  color: rgba(162, 138, 94, 0.5);
}
.character_input#character_nickname:-moz-placeholder { /* Firefox 18- */
  color: rgba(162, 138, 94, 0.5);
}

#character_create .character_gauge_item:hover::before {
	border: 1px solid #ae9d6d;
	height: 7px;
	top: -5px;
	width: 7px;
}

.character_gauge_clicker {
	position: absolute;
	top: -13px;
	right: 0;
	bottom: -12px;
	left: 0;
	cursor: pointer;
	z-index: 2;
}

#character_create .character_primary, #character_create .character_secondary, .character_primary_choice, .character_secondary_choice, #character_create .distinctive_sign {
	cursor: pointer;
}

.character_primary_choices, .character_secondary_choices, .character_primary_choices_explain, .character_secondary_choices_explain {
	background-color: rgba(18, 18, 18, 0.9);
	border: 1px solid #293140;
	box-shadow: 0 0 5px #000;
	display: none;
	margin: 0;
}

.character_primary_choices {
	width: 208px;
}

.character_secondary_choices {
	/* text-align: center; */
	width: 208px;
}

.character_primary_choices_explain, .character_secondary_choices_explain {
	padding: 4px;
	position: absolute;
	width: 290px;
}

.character_primary_choice, .character_secondary_choice {
	background-size: cover;
	display: inline-block;
	height: 26px;
	width: 26px;
}

.character_primary_choice:after, .character_secondary_choice:after {
	background-size : cover;
	content: "";
	height: 26px;
	position: absolute;
	width: 26px;
}

.character_primary_choice:hover:before, .character_secondary_choice:hover:before {
	background-image: radial-gradient(ellipse, #50697b 0%, #121212 80%);
	content: "";
	height: 26px;
	position: absolute;
	width: 26px;
}

.character_explaination {
	display: inline-block;
	height: 452px;
	width: 178px;
	position: relative;
	text-align: left;
	vertical-align: top;
}
.character_fifty_left, .character_fifty_right {
	display: inline-block;
	min-width: 425px;
	margin: 2px 0;
	position: relative;
	width: 49%;
}
.character_fifty_left {
	padding-right: 2px;
	text-align: right;
}
.character_fifty_right {
	padding-left: 2px;
	text-align: left;
}
@media (max-width: 500px) {
	.character_fifty_left, .character_fifty_right {
		text-align: center;
		min-width: 0;
		width: 100%;
	}
	.character_input#character_linktosheet, .character_input#fc_linktosheet {
		width: 100%;
	}
}
.character_explaination_left {
	margin-right: 5px;
}
.character_explaination_right {
	margin-left: 5px;
}

#character_block p.character_explains {
	margin: 2px 0 2px 0;
}

.character_explaination p.character_explains_plus {
	color: #999;
	font-size: 1em;
	margin: 0;
}

.character_explaination p.character_verify_avatar, .character_explaination p.character_verify_fullname {
	color: #7acc52;
	margin: 0;
}

.character_explain_avatar {
	position: absolute;
	top: 23px;
}

.character_explain_gender {
	position: absolute;
	top: 230px;
}

.character_explain_inactivity {
	position: absolute;
	top: 303px;
}

.character_explain_fc_tag {
	position: absolute;
	top: 404px;
}

.character_explain_primary {
	position: absolute;
	top: 30px;
}

.character_explain_secondary {
	position: absolute;
	top: 115px;
}

.character_explain_physical {
	position: absolute;
	top: 190px;
}

.character_explain_distinctive {
	position: absolute;
	top: 305px;
}

@media (max-width: 700px) {
	.character_explaination, .character_draw_explaination_left, .character_draw_explaination_right {
		display: none;
	}
}

#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable li { display: inline-block; }

#characters_notification {
	background-image: url("./images/notification.png");
    display: block;
	height: 8px;
	width: 8px;
	position: absolute;
	top: 7px;
	left: 181px;
}