pre {
	font-family: "Roboto Condensed", sans-serif;
}

.ta_search {
	width: 258px;
	line-height: 30px;
	font-size: 20px;
	text-indent: 10px;
	margin: 0 20px;
}

.dialinfo {
	padding: 10px;
	border-radius: 50px 8px 0 0;
	background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.0));
	width: 850px;
	position: relative;
	left: -20px;
	
	.slot {
		display: inline-block;
		background-color: transparent;
	}
}

.slot button {
	position: relative;
	right: 8px;
	width: 16px;
	height: 16px;
	background: url('images/back.png') no-repeat center center;
	background-size: contain;
	border: 0;
}

.head button {
	position: relative;
	right: 4px;
	top: 4px;
	width: 14px;
	height: 14px;
	background: url('images/back.png') no-repeat center center;
	background-size: contain;
	border: 0;
}

.dialinfo .pointvalue .passengers {
	float: right;
}

.dialinfo .pointvalue .right {
	float: right;
	text-align: right;
	margin-right: 1em;
}

.dialinfo .pointvalue .improvements {
	float: left;
	height: 50px;
}

.des_improvements {
	margin: 0 auto;
	text-align: center;
	line-height: 40px;
	
	div {
		border: 4px solid transparent;
		border-radius: 8px;
	}
	
	.imp_type:hover, .tar_type:hover {
		cursor: pointer;
	}
	
	.select {
		background-color: rgba(148,24,255,0.6);
	}
}

.des_targeting {
	border-top: 4px solid rgba(0,0,0,0.1);
	padding-top: 6px;
}

.details {
	display: block;
	padding-left: 40px;
	max-width: 850px !important;
	overflow: hidden;
	transition: max-height linear .6s;
}

.details.hide {
	transition: max-height linear .3s;
}

.details .bottom .dialcontainer {
	//display: flex;
	white-space: nowrap;
	border-radius: 6px;
	position: relative;
	left: -20px;
	
	.oversized {
		background-image: linear-gradient(to right, rgba(0,0,0,0.0) , rgba(0,0,0,0.2));
		padding: 3px;
		border-radius: 0 12px 10px 0;
		box-shadow: 40px 0 40px rgba(0,0,0,0.4);
		margin-right: 10px;
	}
}

.details .bottom .objectcontainer {
	display: flex;
}

.details .bottom .shadow {
	box-shadow: 0 2px 4px #000;
}

.details .bottom .dialcontainer .dial {
	float: left;
	white-space: nowrap;
	padding-right: 3px;
	color: #000;
}

.details .bottom .dialcontainer .dial div {
	font-size: 14px;
}

.details .bottom .dialcontainer .dial .click {	 
	width: 46px;
	display: table-cell;
}

.click_popup .header_select {
	text-align: center;
	line-height: 20px;
	vertical-align: middle;
	font-size: 10px;
	font-weight: bold;
}

.click_popup .header_select div {
	width: 20%;
	display: inline-block;
	border: 1px solid transparent;
}

.click_popup .header_select .selected {
	text-align: center;
	border-color: #DDD;
}

.click_popup .header_select div:hover {
	cursor: pointer;
}

.details .bottom .dialcontainer .dial .click .head,
.click_popup .head {
	width: 43px;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
	text-align: center;
	font-size: 12px;
	color: rgba(255,0,0,0.2);
	font-weight: bold;
	border-left: 5px solid transparent;
	background-color: #FFF;
}

#buildDial .slot, #buildDial .head {
	width: 54px;
	background-position: left center;
}

.details .bottom .dialcontainer .dial .click .head_custom,
.click_popup .head_custom {
	width: 43px;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
	text-align: center;
	font-size: 12px;
	color: rgba(150,150,255,0.6);
	font-weight: bold;
	border-left: 5px solid transparent;
	background-color: #FFF;
}

.details .bottom .dialcontainer .dial .click .slot, .slot {
	width: 43px;
	height: 40px;
	line-height: 40px;
	vertical-align: middle;
	text-align: center;
	border-left: 5px solid transparent;
	background-color: #FFF;
	font-size: 19px;
	background-size: contain;
	background-repeat: no-repeat;
}

.details .bottom .dialcontainer .dial .dialtop {
	display: table-cell;
	vertical-align: top;
	padding-top: 20px;
}

.details .bottom .dialcontainer .dial .dialtop .head {
	width: 30px;
	height: 0px;
	line-height: 0px;
	font-size: 0px;
	color: #FAA;
	border-left: 3px solid transparent;
	background-color: #FFF;
}

.head input {
	width: 30px;
	height: 20px;
	padding: 0;
	margin: 0;
	border: 0;
	line-height: 20px;
	font-size: 12px;
	color: #FAA;
	border-left: 3px solid transparent;
	background-color: #FFF;
	text-align: center;
}

#buildDial .click:nth-of-type(1) .head {
	border-top-left-radius: 10px;
}

.details .bottom .dialcontainer .dial div:last-child .head:first-child,
.details .bottom .dialcontainer .dial div:last-child .head_custom:first-child {
	 border-top-right-radius: 10px; 
}

.details .bottom .dialcontainer .dial div:last-child .slot:last-child {
	border-bottom-right-radius: 8px; 
}

.menu_item {
	height: 16px;
	border: transparent 8px solid;
	margin: 8px;
}

#base_type {
	background-color: transparent;
}

.slot input {
	height: 40px;
	width: 40px;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: center;
	font-size: 19px;
	color: #000000;
}

.rank input {
	font-size: 10px;
}

.power_ko input {
	color: #c00;
	font-weight: bold;
}

.slot:active {
	//background: #000;
}

#buildDial .slot {
	/*background-image: url('images/back.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;*/
}

.power_red input,
.power_orange input,
.power_yellow input,
.power_lime input,
.power_green input,
.power_blue input,
.power_pink input,
.power_gray input,
.power_special input,
.power_orange-red input,
.power_green-red input,
.power_blue-red input {
	color: #000;
}

.power_dark_blue input,
.power_purple input,
.power_brown input,
.power_black input,
.power_purple-red input,
.power_brown-red input,
.power_black-red input {
	color: #FFF;
}

.pointvalue .first_click {
	color: #0C0;
	font-weight: bold;
}

.pointvalue .veteran_click {
	color: #C00;
	font-weight: bold;
}

.pointvalue .experienced_click {
	color: #3533f1;
	font-weight: bold;
}

.pointvalue .rookie_click {
	color: #bebe00;
	font-weight: bold;
}

.pointvalue .alterego_click {
	color: orange;
	font-weight: bold;
}

.pointvalue .retaliation_click {
	color: darkmagenta;
	font-weight: bold;
}

.first_click .slot {
	border-color: #0C0 !important;
}

.veteran_click .slot {
	border-color: #C00 !important;	
}

.experienced_click .slot {
	border-color: #00E !important;	
}

.rookie_click .slot {
	border-color: #EE0 !important;
}

.alterego_click .slot {
	border-color: orange !important;	
}

.retaliation_click .slot {
	border-color: darkmagenta !important;	
}

.powers_popup, .click_popup {
	width: 250px;
	background: rgba(255,255,255,0.8);
	color: #000;
	font-family: sans-serif;
	margin: 1em;
	vertical-align: top;
	border: 1px solid #000;
	border-top: 14px solid #000;
	border-bottom: 14px solid #000;
	border-radius: 10px;
	box-shadow: 0 2px 8px #000;
	padding: 6px 0;
	backdrop-filter: blur(10px);
}

.click_popup {
	width: 180px !important;
}

.power_select {
	line-height: 32px;
}

.power_select:hover {
	background: rgba(148,24,255,0.6);
	cursor: hand;
}

.powers_popup .slot, .click_popup .slot {
	display: inline-block;
	margin-right: .5em;
}

.powers_popup .separator .slot, .click_popup .separator .slot {
	display: inline-block;
	margin-right: 4px;
}

.powers_popup .separator, .click_popup .separator, .attribute_popup .separator, .combat_popup .separator {
	margin: 6px 0;
	border: 1px solid #DDD;
}

.attribute_popup .dial_type .icons img {
	height: 16px;
}

.power_ko {
	font-weight: bold;
	color: #c00;
}

.power_select .power_ko {
	background: transparent;
}

.power_none {
	background: transparent;
}

.power_red {
	background: url('images/powers/red.png') no-repeat center center;
	color: #000;
}

.power_orange {
	background: url('images/powers/orange.png') no-repeat center center;
	color: #000;
}

.power_orange-red {
	background: url('images/powers/orange-red.png') no-repeat center center;
	color: #000;
}

.power_yellow {
	background: url('images/powers/yellow.png') no-repeat center center;
	color: #000;
}

.power_lime {
	background: url('images/powers/lime.png') no-repeat center center;
	color: #000;
}

.power_green {
	background: url('images/powers/green.png') no-repeat center center;
	color: #000;
}

.power_green-red {
	background: url('images/powers/green-red.png') no-repeat center center;
	color: #000;
}

.power_blue {
	background: url('images/powers/blue.png') no-repeat center center;
	color: #000;
}

.power_blue-red {
	background: url('images/powers/blue-red.png') no-repeat center center;
	color: #000;
}

.power_dark_blue {
	background: url('images/powers/dark_blue.png') no-repeat center center;
	color: #FFF;
}

.power_purple {
	background: url('images/powers/purple.png') no-repeat center center;
	color: #FFF;
}

.power_purple-red {
	background: url('images/powers/purple-red.png') no-repeat center center;
	color: #FFF;
}

.power_gray {
	background: url('images/powers/gray.png') no-repeat center center;
	color: #000;
}

.power_black {
	background: url('images/powers/black.png') no-repeat center center;
	color: #FFF;
}

.power_black-red {
	background: url('images/powers/black-red.png') no-repeat center center;
	color: #FFF;
}

.power_brown {
	background: url('images/powers/brown.png') no-repeat center center;
	color: #FFF;
}

.power_brown-red {
	background: url('images/powers/brown-red.png') no-repeat center center;
	color: #FFF;
}

.power_pink {
	background: url('images/powers/pink.png') no-repeat center center;
	color: #000;
}

.power_special {
	background: url('images/powers/special.png') no-repeat center center;
	color: #000;
}

.dialtop div {
	background-size: 30px 30px;
	background-position: center center;
}

.passengers {
	background: url('images/passengers3x.png') no-repeat center center;
	background-size: contain;
	display: inline-block;
	height: 30px;
	width: 30px;
	vertical-align: text-top;
}

.txtTexts{
	font-size: 14px;
	line-height: 30px;
	border: 0;
	background: transparent;
	margin: 0;
}

.one_shot {
	background: url('images/one_shot.png') no-repeat center center;
}

.trait {
	background: url('images/trait3x.png') no-repeat center center;
}

.improved {
	background: url('images/improved3x.png') no-repeat center center;
}

.cardboard {
	background: url('images/base_type/cardboard3x.png') no-repeat center center;
}

.bystander {
	background: url('images/base_type/bystander3x.png') no-repeat center center;
}

.add {
	background: url('images/add.png') no-repeat center center;
	float: right !important;
	cursor: pointer;
}

.setadd {
	background-size: contain;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,0.2);
	background-color: #9418ff;
	background-image: url(images/add.png);
}

.setremove {
	background-size: contain;
	border-radius: 4px;
	margin-left: 8px;
	border: 1px solid rgba(0,0,0,0.2);
	background-color: #A00;
	background-image: url(images/remove.png);
}

.remove {
	background: url('images/remove.png') no-repeat center center;
}

.hori:hover {
	background: transparent !important;
}

.base_2x2 {
	font-size: 12px;
	color: white;
	line-height: 24px;
	background: url('images/base_type/base2x23x.png') no-repeat center center;
}

.base_2x4 {
	font-size: 12px;
	color: white;
	line-height: 24px;
	background: url('images/base_type/base2x43x.png') no-repeat center center;
}

.base_6x3 {
	font-size: 10px;
	color: white;
	line-height: 24px;
	background: url('images/base_type/base6x33x.png') no-repeat center center;
}

.normal {
	background: url('images/base_type/normal3x.png') no-repeat center center;
}

.double {
	background: url('images/base_type/double3x.png') no-repeat center center;
}

.combat_speed, .combat_ {
	background: url('images/combat/speed3x.png') no-repeat center center;
}

.combat_wing {
	background: url('images/combat/wing3x.png') no-repeat center center;
}

.combat_dolphin {
	background: url('images/combat/dolphin3x.png') no-repeat center center;
}

.combat_transport, .combat_speed_transport {
	background: url('images/combat/transport3x.png') no-repeat center center;
}

.combat_wing_transport {
	background: url('images/combat/wing_transport3x.png') no-repeat center center;
}

.combat_dolphin_transport {
	background: url('images/combat/dolphin_transport3x.png') no-repeat center center;
}

.combat_attack {
	background: url('images/combat/attack3x.png') no-repeat center center;
}

.combat_duo {
	background: url('images/combat/duo3x.png') no-repeat center center;
}

.combat_sharpshooter {
	background: url('images/combat/sharpshooter3x.png') no-repeat center center;
}

.combat_team {
	background: url('images/combat/team3x.png') no-repeat center center;
}

.combat_autonomous {
	background: url('images/combat/autonomous3x.png') no-repeat center center;
}

.combat_defense {
	background: url('images/combat/defense3x.png') no-repeat center center;
}

.combat_indomitable {
	background: url('images/combat/indomitable3x.png') no-repeat center center;
}

.combat_damage {
	background: url('images/combat/damage3x.png') no-repeat center center;
}

.combat_giant {
	background: url('images/combat/giant3x.png') no-repeat center center;
}

.combat_colossal {
	background: url('images/combat/colossal3x.png') no-repeat center center;
}

.combat_tiny {
	background: url('images/combat/tiny3x.png') no-repeat center center;
}

.combat_vehicle {
	background: url('images/combat/vehicle3x.png') no-repeat center center;
}

.team_type .icons {
	padding: 0;
}

.team_type .icons input
{
	margin: 0 1em;
}

.specialpowers .power {
	text-align: left !important;
	padding-left: 3em !important;
	width: 100%;
	color: #000 !important;
	border-bottom: 4px solid #333;
}

.specialpowers .trait
{
	background: #BBB url('images/special_powers/trait.png') no-repeat 6px center !important;
	background-size: 24px !important;
}

.specialpowers .speed
{
	background: #BBB url('images/special_powers/speed.png') no-repeat 6px center !important;
	background-size: 24px !important;
}

.specialpowers .attack {
	background: #BBB url('images/special_powers/attack.png') no-repeat 6px center !important;
	background-size: 24px !important;
}

.specialpowers .defense {
	background: #BBB url('images/special_powers/defense.png') no-repeat 6px center !important;
	background-size: 24px !important;
}

.specialpowers .damage {
	background: #BBB url('images/special_powers/damage.png') no-repeat 6px center !important;
	background-size: 24px !important;
}

.details .bottom .dialcontainer .dial .dialtop .slot {
	border-color: transparent !important;
	background-color: transparent;
	background-size: 32px;
}

.details .bottom .element {
	clear: both;
	line-height: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 14px;
	
	i {
		padding: 0 2em;
	}
}

.details .bottom .element .slot {
	width: 16pt;
	height: 16pt;
	background-size: contain;
	line-height: 18px !important;
	float: left;
	margin: 0 4px 0 0;
	border-left: 0;
}

.details .bottom .element input {
	background-color: transparent;
	text-indent: 0.5em;
	border: 0;
	border-radius: 8px;
	font-size: 14px;
	font-weight: bold;
	width: 75%;
	line-height: 24px;
}

.details .bottom .element textarea {
	font-size: 14px;
	line-height: 20px;
	width: 100%;
	background-color: transparent;
	border-radius: 8px;
	border: 0;
}

.rank {
	float: left;
	margin-right: .5em;
	text-align: center;
	font-size: 9pt;
	height: 40px;
	width: 72px;
	background-position: center right;
	background-repeat: no-repeat;
	color: #000;
}

.item .norank,
.item .experienced,
.item .veteran,
.item .event_dial,
.item .promotional,
.experienced input,
.veteran input,
.event-dial input,
.promotional input {
	color: #FFF !important;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5) !important;
}

.rank,
.rank input {
	color: #000;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.item .norank,
.rank_type .icons .norank {
	color: #FFF;
}

.item .norank img {
	opacity: 1.0;
}

.rarity {
	border-radius: 0 50px 50px 0;
	color: black;
	width: 25px;
	line-height: 40px;
	float: left;
	padding-right: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.rarity img, .collapse img, .collapse-dis img {
	margin-top: 12px;
}

.norarity {
	background-image: url('images/rarity-.png');
	color: #000;
}

.common {
	background-color: #FFF;
	color: #000;
}

.uncommon {
	background-color: #0C0;
	color: #000;
}

.rare {
	background-color: #CCD;
	color: #000;
}

.super_rare {
	background-color: #cbaf60;
	color: #000;
}

.exclusive, .chase {
	background-color: #ae6a1b;
	color: #000;
}

.ultra_chase {
	background-color: #408baa;
	color: #000;
}

.special_edition {
	background-color: #6a14c1;
	color: #000;
}

.rankUnique .rarity.common,
.rankUnique .rarity.uncommon,
.rankUnique .rarity.rare,
.rankUnique .rarity.super_rare,
.rankUnique .rarity.exclusive,
.rankUnique .rarity.chase,
.rankUnique .rarity.ultra_chase,
.rankUnique .rarity.special_edition,
.rankLimited_Edition .rarity.common,
.rankLimited_Edition .rarity.uncommon,
.rankLimited_Edition .rarity.rare,
.rankLimited_Edition .rarity.super_rare,
.rankLimited_Edition .rarity.exclusive,
.rankLimited_Edition .rarity.chase,
.rankLimited_Edition .rarity.ultra_chase,
.rankLimited_Edition .rarity.special_edition,
.rankPrime .rarity.common,
.rankPrime .rarity.uncommon,
.rankPrime .rarity.rare,
.rankPrime .rarity.super_rare,
.rankPrime .rarity.exclusive,
.rankPrime .rarity.chase,
.rankPrime .rarity.ultra_chase,
.rankPrime .rarity.special_edition,
.rankPromo .rarity.common,
.rankPromo .rarity.uncommon,
.rankPromo .rarity.rare,
.rankPromo .rarity.super_rare,
.rankPromo .rarity.exclusive,
.rankPromo .rarity.chase,
.rankPromo .rarity.ultra_chase,
.rankPromo .rarity.special_edition {
	margin-right: 10px;
}

.hidden {
	opacity: 0.8;
}

.na {
	color: rgba(255, 255, 255, 0.1);
}

.na img {
	opacity: 0.1;
}

.powers_popup .click:hover, .click_popup .click:hover {
	background: rgba(148,24,255,0.3);
	cursor: pointer;
}

.click_popup .ko {
	background-color: #EEE;
	border-radius: 6px;
	color: #c00;
	border-left: 0;
	margin-left: 6px;
	
}

.click_popup .standard {
	background-color: #FFF;
	border-radius: 0 6px 6px 0;
	border-left: 5px transparent solid;
	margin-left: 6px;
	border-top: 1px solid rgba(0,0,0,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.2);
	border-right: 1px solid rgba(0,0,0,0.2);
}

.click_popup .first {
	background-color: #FFF;
	border-radius: 0 6px 6px 0;
	width: 28px;
	border-left: 5px #0c0 solid;
	margin-left: 6px;
	border-top: 1px solid rgba(0,0,0,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.2);
	border-right: 1px solid rgba(0,0,0,0.2);
}

.click_popup .veteran {
	background-color: #FFF;
	border-radius: 0 6px 6px 0;
	width: 28px;
	border-left: 5px #c00 solid;
	margin-left: 6px;
	border-top: 1px solid rgba(0,0,0,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.2);
	border-right: 1px solid rgba(0,0,0,0.2);
}

.click_popup .experienced {
	background-color: #FFF;
	border-radius: 0 6px 6px 0;
	width: 28px;
	border-left: 5px #00E solid;
	margin-left: 6px;
	border-top: 1px solid rgba(0,0,0,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.2);
	border-right: 1px solid rgba(0,0,0,0.2);
}

.click_popup .rookie {
	background-color: #FFF;
	border-radius: 0 6px 6px 0;
	width: 28px;
	border-left: 5px #EE0 solid;
	margin-left: 6px;
	border-top: 1px solid rgba(0,0,0,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.2);
	border-right: 1px solid rgba(0,0,0,0.2);
}

.click_popup .alterego {
	background-color: #FFF;
	border-radius: 0 6px 6px 0;
	width: 28px;
	border-left: 5px orange solid;
	margin-left: 6px;
	border-top: 1px solid rgba(0,0,0,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.2);
	border-right: 1px solid rgba(0,0,0,0.2);
}

.click_popup .retaliation {
	background-color: #FFF;
	border-radius: 0 6px 6px 0;
	width: 28px;
	border-left: 5px darkmagenta solid;
	margin-left: 6px;
	border-top: 1px solid rgba(0,0,0,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.2);
	border-right: 1px solid rgba(0,0,0,0.2);
}

.combat_popup {
	width: 160px;
	background: rgba(255,255,255,0.8);
	color: #000;
	font-family: sans-serif;
	margin: 1em; 
	display: inline-block;
	vertical-align: top;
	border: 1px solid #000;
	border-top: 14px solid #000;
	border-bottom: 14px solid #000;
	border-radius: 10px;
	box-shadow: 0 2px 8px #000;
	padding: 6px 0;
	backdrop-filter: blur(10px);
}

.attribute_popup {
	width: 200px;
	background: rgba(255,255,255,0.8);
	color: #000;
	font-family: sans-serif;
	margin: 1em; 
	display: inline-block;
	vertical-align: top;
	border: 1px solid #000;
	border-top: 14px solid #000;
	border-bottom: 14px solid #000;
	border-radius: 10px;
	box-shadow: 0 2px 8px #000;
	padding: 6px 0;
	backdrop-filter: blur(10px);
}

.attribute_select, .attribute, .dial_type, .rank_type, .team_type, .rarity_type {
	line-height: 30px;
}

.dial_type {
	position: relative;
	top: 5px;
}

.dial_type .icons {
	display: inline-flex;
	padding: 0 2px;
	margin-right: .5em;
	text-align: center;
	border-radius: 8px;
	cursor: pointer;
}

.dial_type .selected {
	background: rgba(148,24,255,0.6);
}

.rank_type .icons, .rank_type .icons div, .team_type .icons div, .rarity_type .icons, .rarity_type .icons div {
	display: inline-block;
	padding: 0 10px;
	min-width: 24px;
	text-align: center;
	background-position: right center;
	background-repeat: no-repeat;
	border-radius: 0 50px 50px 0;
	margin: 4px .5em 4px 0;
}

.team_type .icons div {
	border-radius: 0;
	min-width: inherit;
	background-size: contain !important;
}

.team_type div:hover {
	background-color: rgba(148,24,255,0.6);
}

.rarity_type .icons {
	padding-left: 0;
}

.dial_type .icons img {
	vertical-align: middle;
}

.attribute input {
	margin: 0 14px;
}

.rank_type:hover, .power_select:hover, .attribute_select:hover, .dial_type:hover, .rarity_type:hover {
	background: rgba(148,24,255,0.3);
	cursor: pointer;
}
}

.dial_type .icons:hover {
	cursor: pointer;
}

.attribute_popup .slot, .combat_popup .slot {
	display: inline-block;
	margin-right: .5em;
}

.attribute_popup .separator .slot, .combat_popup .separator .slot {
	display: inline-block;
	margin-right: 4px;
}

.keyword {
	background-color: rgba(0,0,0,0.2);
	border: 1px solid rgba(0,0,0,0.4);
	border-radius: 50px;
	padding: 3px 8px;
	line-height: 26px;
	cursor: pointer;
	font-weight: bold;
	white-space: nowrap;
}

.generic {
	font-weight: normal;
}

.elements {
	margin-bottom: 1em;
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: rgba(0,0,0,0.1);
	border-radius: 10px;
	padding: 5px;
	width: 40%;
	float: left;
	line-height: 18px;
}

.masonry {
	display: grid;
	grid-template-columns: 50% 50%;
	
	.elements {
		width: initial;
	}
}

.comment {
	float: right;
	width: 45%;
}

.bottom .card {
	margin: 20px 0 !important;
	padding: 0 20px !important;
	color: inherit !important;
}

.bottom .card .head {
	font-size: 14px;
	font-weight: bold;
	line-height: 14px;
	margin-top: 10px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.bottom .card .post {
	line-height: 18px;
	max-height: 100%;
	overflow-y: scroll;
}

.bottom .card .author {
	text-align: right;
	font-style: italic;
	font-size: 16px;
	line-height: 16px;
	cursor: pointer;
}

.bottom .comment textarea {
	width: 100%;
	background: transparent;
	border: 0;
	line-height: initial !important;
}

#real_name input {
	width: 100%;
	font-weight: normal;
	text-indent: 0;
}

.top {
	display: inline-flex;
}

.top .pictures {
	width: 430px;
	float: left;
	text-align: center;
	line-height: inherit;
	margin-top: 20px;
}

.top .pictures img {
	height: 60px;
	box-shadow: 0 1px 5px rgba(0,0,0,0.5);
	margin: 0 1em;
	border-radius: 6px;
}

.top .khw {
	width: 360px;
	float: right;
	background-color: rgba(0,0,0,0.1);
	border-radius: 10px;
	padding: 10px;
	margin: 10px;
	text-align: center;
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}

.top .khw div {
	border: 0 !important;
}

.top .khw button {
	background: transparent;
	border: 0;
	cursor: pointer;
	text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

.top .khw .item {
	float: left;
	width: 100px;
	padding: 0 10px;
	font-size: 14px;
	text-align: center;
	display: block;
}

.object {
	padding-right: 3px;
	color: #000;
	border-radius: 40px 40px 4px 4px;
	background-color: #FFF;
	border: 1px solid rgba(0,0,0,0.1);
	box-shadow: 0 2px 8px rgba(0,0,0,0.4);
	margin-left: 40px;
	
	.head {
		line-height: 40px;
		text-align: center;
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
	}
	.info {
		text-align: center;
		line-height: 60px;
		box-shadow: 0;
		display: table-cell;
	}
	.range {
		width: 75px;
		float: left;
		display: table-cell;
		background-image: linear-gradient(to right, rgba(255,255,255,0.0) , rgba(255,255,255,0.0), rgba(0,0,0,0.1));
		border-radius: 40px 0 0 4px;
		
		div {
			background-size: contain;
			background-position: center center;
			background-repeat: no-repeat;
			display: inline-block;
			height: 20px;
			width: 20px;
			vertical-align: middle;
		}
		
		.bolt {
			background: url('images/target_bolt.png');
			background-size: contain;
			background-position: center center;
			background-repeat: no-repeat;
			display: inline-block;
			vertical-align: middle;
		}
	}
	.damage {
		width: 125px;
		float: left;
		border-left: 1px solid rgba(0,0,0,0.4);
		border-right: 1px solid rgba(0,0,0,0.4);
		background-image: linear-gradient(to right, rgba(0,0,0,0.05) , rgba(255,255,255,0.0), rgba(0,0,0,0.05));
		
		div {
			box-shadow: none;
			border: 0;
		}
		
		.combat_damage {
			background-image: url('images/combat/damage3x.png');
			background-size: cover;
			background-repeat: no-repeat;
			height: 20px;
			width: 20px;
			margin: 10px 0;
			
		}
	}
	.destroy {
		width: 75px;
		float: left;
		background-image: linear-gradient(to left, rgba(255,255,255,0.0), rgba(255,255,255,0.0), rgba(0,0,0,0.1));
		border-radius: 0 40px 4px 0;
		
		div {
			background-color: transparent;
		}
		
		.mindamage {
			width: 20px;
			height: 20px;
			background: url('images/mindamage.png');
			background-size: contain;
			background-position: center center;
			background-repeat: no-repeat;
			display: inline-block;
			vertical-align: middle;
			margin: 10px 0;
		}
	}
	.info {
		display: block;
		font-size: 26px;
		font-weight: bold;
	}
}