.characteristics-panel
	.tab
		padding: 4px

.species
	font-size: 13px
	margin: 4px 1rem 0 1rem
	text-align: justify
	a
		margin-right: 1rem

.mgt2
	.characteristics
		flex-basis: 138px
		flex-grow: 0
		flex-shrink: 0
		position: relative

	.characteristics-header
		color: var(--mgt2-color-primary)
		background: var(--mgt2-bgcolor-primary)
		font-family: "Rubik", monospace
		font-style: normal
		font-size: 1rem
		line-height: 2rem
		text-transform: uppercase

	.characteristic-row
		display: flex
		flex-direction: row
		align-items: center
		justify-content: center
		position: relative

	.characteristic-minmax
		display: flex
		flex-direction: row
		align-items: center
		justify-content: center
		flex-wrap: nowrap

	.characteristic-dm
		span
			&.label
				font-size: 0.8rem
				font-weight: 600

	.characteristic-label
		font-family: "Barlow Condensed", sans-serif
		font-size: 1.2rem
		font-weight: 600
		font-style: italic
		text-align: center
		position: relative
		& > a
			&.roll
				color: black
				position: absolute
				left: 0
		a
			&.cfg-characteristic
				display: none
				font-size: 12px
				position: absolute
				right: 0
				top: 0
		&:hover
			a
				&.cfg-characteristic
					display: block

	.characteristic-input
		color: var(--mgt2-bgcolor-primary)
		text-align: center
		font-size: 1.5rem
		font-weight: 500
		width: 2.4rem
		height: 2rem
		box-sizing: border-box
		border: none
		outline: none
		background: linear-gradient(45deg, #0000 5.66px, #000 0 calc(5.66px + 2px), #0000 0 calc(100% - 5.66px - 2px), #000 0 calc(100% - 5.66px), #0000 0), linear-gradient(-45deg, #0000 5.66px, #000 0 calc(5.66px + 2px), #0000 0 calc(100% - 5.66px - 2px), #000 0 calc(100% - 5.66px), #0000 0), linear-gradient(90deg, #000 4px, #0000 0) -2px 50%/100% calc(100% - 16px) repeat-x, linear-gradient(#000 4px, #0000 0) 50% -2px/calc(100% - 16px) 100% repeat-y

	.characteristic-dm
		color: var(--mgt2-color-dm)
		background-color: transparent
		text-align: center
		font-size: 1rem
		width: 1.5rem
		height: 1.4rem
		padding: 0
		outline: none
		border: none
		margin: 0
		position: absolute
		right: 0
		background-color: var(--mgt2-bgcolor-dm)
		border-radius: 9px
		margin-right: 2px
		&:focus
			outline: none
			box-shadow: none

	.characteristic-dm-minmax
		&:focus
			outline: none
			box-shadow: none

	.minmaxwrapper
		display: flex
		flex-direction: row
		flex-wrap: nowrap
		justify-content: center
		justify-content: center
		align-items: center
		margin: 0 0.5rem
		box-sizing: border-box
		background: linear-gradient(45deg, #0000 7.07px, #000 0 calc(7.07px + 2px), #0000 0 calc(100% - 7.07px - 2px), #000 0 calc(100% - 7.07px), #0000 0), linear-gradient(-45deg, #0000 7.07px, #000 0 calc(7.07px + 2px), #0000 0 calc(100% - 7.07px - 2px), #000 0 calc(100% - 7.07px), #0000 0), linear-gradient(90deg, #000 4px, #0000 0) -2px 50%/100% calc(100% - 20px) repeat-x, linear-gradient(#000 4px, #0000 0) 50% -2px/calc(100% - 20px) 100% repeat-y
		input
			display: inline-block
			color: black
			background-color: transparent
			text-align: center
			font-size: 1.5rem
			width: 2rem
			height: 2rem
			border: none
			outline: none
			&:focus
				outline: none
				box-shadow: none
			&:first-child
				margin-left: 5px
			&:last-child
				margin-right: 5px
		span
			font-size: 1.5rem
			font-weight: 500
.computer-overload,
.computer-overload i
	color: var(--mgt2-color-warning) !important
ul
	&.softwares
		list-style: none
		margin: 0
		padding: 0
		li
			display: inline-block
			color: var(--mgt2-color-software)
			background-color: var(--mgt2-bgcolor-software)
			padding: 3px 7px
			border-radius: 8px
			a
				display: none
				&:first-child
					margin: 0 0.5rem
			&:hover
				a
					display: inline-block

.character-header
	display: flex
	margin-top: 8px
	margin-right: 8px
	flex-direction: row
	flex-wrap: nowrap
	flex-grow: 0
	flex-shrink: 0
	justify-content: flex-start
	align-items: flex-start
.character-header-img
	flex-basis: 138px
	flex-grow: 0
	flex-shrink: 0
	text-align: center
.character-summary
	flex: 0 0 100%
	margin: 0
	padding: 0
	list-style: none
	border-top: 5px double var(--mgt2-bgcolor-primary)
	li
		float: left
		margin: 0
		padding: 0
		color: var(--mgt2-color-primary-light)
	input
		display: block
		border: none
		font-weight: bold
		font-family: "Roboto Condensed", sans-serif
		background-color: #fff
		font-size: 0.8rem
		border: 1px solid #fff
		&:hover
			border: 1px solid #111
.character-header-body
	display: flex
	flex-direction: column
	flex-wrap: nowrap
	justify-content: flex-start
	legend
		font-size: 0.7rem
		text-transform: uppercase
		text-wrap: nowrap
		i
			margin-right: 0.25rem
.character-body
	display: flex
	flex-direction: row
	align-content: flex-start
	flex-wrap: nowrap
	.tab
		width: 100%


.lifes
	height: 100%
	display: flex
	flex-direction: row
	justify-content: center
	align-items: center
	div
		font-size: 2rem
.character-states
	margin: 0
	padding: 0
	list-style: none
	display: flex
	flex-direction: column
	justify-content: flex-start
	align-items: flex-start
	width: 100%
	float: right
	li
		display: flex
		margin: 0
		padding: 0
		color: #4b4a44
		justify-content: space-between
		align-items: center
		width: 100%
		font-size: 0.7rem
		line-height: 1.1rem

.encumbrance-normal
	color: var(--mgt2-encumbrance-normal)!important

.encumbrance-heavy
	color: var(--mgt2-encumbrance-heavy)!important
	font-weight: bold

.character-body
	height: 100%
	overflow: hidden
	display: flex
	flex-direction: row
	width: 100%
	justify-content: flex-start
	align-items: flex-start
	border-top: 3px solid black

.actor-footer
	bottom: 0
	color: var(--mgt2-color-primary)
	background-color: var(--mgt2-bgcolor-primary)
	width: 100%
	margin: 0 -8px
	height: 1.5rem
	justify-content: space-between
	align-items: center
	padding: 0 1rem
	flex-grow: 0
	flex-shrink: 0
	display: flex
	flex-direction: row
