.char input, button { font-size: 0.8em; }

.chardata {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 1em;
	flex-wrap: wrap;
}
.chard {
	white-space: nowrap;
	margin: 0.3em;
}
.chard span {
	padding-right: 0.5em;
}
.chardata input {
	width: 10em;
}

.chardata .xp, .chardata .dragonxp { width: 5em; }
.chardata .xpfree, .chardata .xpused { padding: 0; }

.configuration { cursor: pointer; }

.h2block {
	margin: 0 0 0.3em 0;
}

.attributesblock {
	border: 3px solid black;
	border-radius: 0.4em;
	background-color: white;
	padding: 0.4em;
	margin-bottom: 1em;
}
.attributes {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}
.att {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.att span {
	padding-right: 0.5em;
}
.att > div {
	display: inline-block;
}


.addhp { margin-bottom: 0.2em; }
.addhp > i { 
	cursor: pointer; 
	margin: 0 0.1em 0.1em 0; 
}
.damage > i { 
	cursor: pointer; 
}
.damage {
	padding: 0.2em;
	border: 1px solid black;
	border-radius: 0.2em;
	background-color: lightgrey;

	display: flex;
	flex-direction: row;
	gap: 0.1em;
	flex-wrap: wrap;
}
.health { width: 4em; }
.healthinputblock {
	margin-bottom: 0.2em;
}
.addhp, .damage { font-size: 1.2em; }


.blockrow {
	display: flex;
	flex-direction: row;
	gap: 0.4em;
}
.blockcolumn {
	flex: 30%;
	display: flex;
	flex-direction: column;
}
.block {
	border: 3px solid black;
	border-radius: 0.4em;
	background-color: white;
	padding: 0.4em;
	margin-bottom: 0.4em;
}


.willpowerblock > div > div {
	display: inline-block;
}

.abillities {
	display: flex;
	flex-direction: column;
	width: 14em;
}
.ability {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	white-space: nowrap;
}
.ability span {
	display: inline-block;
	padding-right: 0.5em;
	text-transform: capitalize;
}
.ability .points {
	display: inline-block;
}
.points { cursor:pointer; }
.points i:hover { color:red; }
.abillitiesoptions { cursor:pointer; float: right; }
.abHideBox { display: none; }

.addspecialisation {
	cursor: pointer;
	border: 1px solid black;
	background-color: white;
	text-align: center;
}
.addspecialisation:hover {
	background-color: lightgrey;
}
.specialisations > div {
	white-space: nowrap; 
	margin-bottom: 0.2em;
}
.specialisations input {
	width: 85%;
	margin-right: 0.2em;
}

.essenceblock > div { 
	white-space: nowrap; 
	margin-bottom: 0.2em;
} 
.esslevel, .excelenceused { display: inline-block; }
.essence {
	width: 70%;
}



.merits {
	display: flex;
	flex-direction: column;
}
.meritrow {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	white-space: nowrap;
	gap: 0.3em;
	margin-bottom: 0.2em;
}
.meritrow span {
	display: inline-block;
	text-transform: capitalize;
}

.addmerit, .addintemacy, .addcharm, .addspell, .addspecialability, .addritual {
	cursor: pointer;
	border: 1px solid black;
	background-color: white;
	text-align: center;
	padding: 0 0.5em 0 0.5em;
}
.addmerit:hover, .addintemacy:hover, .addcharm:hover, .addspell:hover, .addspecialability:hover, .addritual:hover {
	background-color: lightgrey;
}

.attname { width: 11em; }

.specialxp { display:flex; gap: 0.2em; margin-bottom: 0.2em; }
.sxpxp { width: 4em; }
.sxpname { width: 100%; }

.defense > div, .essencediv {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	white-space: nowrap;
	gap: 0.3em;
	margin-bottom: 0.2em;
}

.red { color:red; }

.charmrow {
	margin-bottom: 0.2em;
	/* padding: 0.2em; */
}

.charmrow input { 
	background-color: transparent;
	border: 1px solid grey; 
}

.charmrow > div {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	white-space: nowrap;
	gap: 0.2em;
	/* margin-bottom: 0.1em; */
}
.charmrow:nth-child(even) {
	background-color: lightgrey;
}

.charmth { text-align: right; }
.charmth > div { display: inline-block; font-size: 1em; text-align: left; }
.charmth div:nth-child(1) { width: 91px; }
.charmth div:nth-child(2) { width: 63px; }
.charmth div:nth-child(3) { width: 90px; }
.charmth div:nth-child(4) { width: 16px; }
.charmth div:nth-child(5) { width: 94px; }

.charms .name, .charms .name_ger { width: 100%; }
.charms .type { width: 7em; }
.charms .essence { width: 4em; }
.charms .group { width: 7em; }
.charms .notice { width: 100%; display: block; }

.charmrow span { cursor: pointer; }
.charmrow span:hover { color:red; }
.moveposition { cursor: move !important; }


.charmSetModal, .configurationModal, .charmDescriptionModal {
	display: none;
	justify-content: center;
	align-items: center;
	align-content: center;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-color: rgba(255,255,255,0.7);
	z-index: 210;
}
.charmSetModal > div, .configurationModal > div, .charmDescriptionModal > div {
	background-color: white;
	border: 3px solid black;
	border-radius: 0.5em;
	padding: 0.5em;
	width: 90%;
	max-width: 1024px;
	max-height: 90%;
	justify-content: center;
	align-items: center;
	overflow-y: auto;
}
.charmsForSet {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em;
	margin-top: 0.5em;
}
.charmsForSet > div {
	border: 1px solid grey;
	padding: 0.3em 0.2em 0.1em 0.2em;
	flex: 1 1 0px;
	white-space: nowrap;
	cursor: pointer;
}
.charmsForSet > div:hover { background-color: lightgrey; }
.charmSetModal button { border: 1px solid grey; border-radius: 0.2em; font-weight: bold; }
.charmSetApply { background-color: #7f7; float: right; margin-left: 1em;  }
.charmSetCancel { background-color: #f77; float: right; margin-left: 1em; }
.h2charms { display: inline-block; }
.charmSetSelector { display: inline-block; float: right; }
.charmSetSelector i { cursor:pointer; }

.charmDescriptionModal > div {
	height: 90%;
	position: absolute;
}
.charmDescriptionModal textarea {
	width: 100%;
	overflow: hidden;
}
.cdClose {
	z-index: 220;
	position: absolute;
	display: inline-block;
	padding: 0.5em;
	border: 3px solid black;
	border-width: 0 0 3px 3px;
	border-radius: 0 0 0 0.4em;
	top: 0;
	right: 0;
	width: 2.5em;
	height: 2.5em;
	font-weight: bold;
	cursor: pointer;
	text-align: center;
}
.cdClose:hover { background-color: red; }

.ui-state-highlight { height: 2em; line-height: 2em; background-color: orange; margin-bottom: 0.2em; }

.selectormodal {
	display: none;
	border: 3px solid black;
	border-radius: 0.5em;
	z-index:100;
	background-color: white;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
.selectormodal > div {
	width: 100%;
	padding: 0.3em 0.3em 0.2em 0.3em;
	border: 0px solid lightgrey;
	border-bottom-width: 1px;
}
.selectormodal .typUnknown { border-bottom-width: 0 !important; }
.selectormodal > div:hover {
	background-color: orange;
}

.spellrow {
	margin-bottom: 0.2em;
	padding: 0.2em;
}
.spellrow input { 
	background-color: transparent;
	border: 1px solid grey; 
}

.spellrow > div {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	white-space: nowrap;
	gap: 0.3em;
	margin-bottom: 0.1em;
}
.spellrow:nth-child(even) {
	background-color: lightgrey;
}

.spellth { text-align: right; }
.spellth > div { display: inline-block; font-size: 1em; text-align: left; }
.spellth div:nth-child(1) { width: 25px; }
.spellth div:nth-child(2) { width: 25px; }
.spellth div:nth-child(3) { width: 95px; }
.spellth div:nth-child(4) { width: 130px; }

.spells .name { width: 100%; }
.spells .milestones { width: 2em; }
.spells .willpower { width: 2em; }
.spells .distortion { width: 7em; }
.spells .duration { width: 8em; }
.spells .notice { width: 100%; display: block; }


.ritualrow {
	margin-bottom: 0.2em;
	padding: 0.2em;
}
.ritualrow input { 
	background-color: transparent;
	border: 1px solid grey; 
	width: 100%;
}
.ritualrow textarea { 
	background-color: transparent;
	border: 1px solid grey; 
	width:100%;
}
.ritualrow > div {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	white-space: nowrap;
	gap: 0.3em;
	margin-bottom: 0.1em;
}
.ritualrow:nth-child(even) {
	background-color: lightgrey;
}


.speichern {
	cursor: pointer;
	border: 1px solid black;
	background-color: lightgreen;
	text-align: center;
	padding: 0.5em;
}

.inventory {
	width: 100%;
	height: 14em;
}

.delete { cursor: pointer; }
.delete:hover { color:red; }

.dicemachine {
	display: none;
	justify-content: center;
	align-items: center;
	align-content: center;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-color: rgba(255,255,255,0.7);
	z-index: 210;
}
.dicemachine > div {
	background-color: white;
	border: 3px solid black;
	border-radius: 0.5em;
	padding: 0.5em;
	width: 280px;
	max-width: 90%;
	position: relative;
}
.dicemachinebtn {
	font-size: 0.8em;
	cursor: pointer;
}
.dicemachine h2 { margin-top: 0; }
.dicemachine input {
	width: 4em;
}
.dicemachineclose {
	position: absolute;
	right: 0; top: 0;
	padding: 0.3em 0.4em;
	font-size: 1.3em;
	font-weight: bold;
	border: 3px solid black;
	border-width: 0 0 3px 3px;
	cursor: pointer;
}
.dicemachineclose:hover { background-color: red; }
.dicemachinerollbtn {
	font-size: 0.8em;
	background-color: yellow;
	border-width: 1px;
	cursor: pointer;
}
.dicemachinerollbtn:hover { background-color: lightgreen; }
.dicesuccesses {
	font-size: 2em;
	font-weight: bold;
	margin: 0.5em 0 0.5em 0;
	color: green;
}

.dicemachine table { border-collapse: collapse; }
.dicemachine td {
	border: 1px solid lightgrey;
	padding: 0.2em 0.3em 0.1em 0.3em;
}

.upload {
	border: 1px solid lightgrey;
	background-color: white;
	padding: 0.3em;
	margin-top: 0.3em;	
}
.upload button {
	width: 100%;
}
#buttonvault {
	display: flex;
	margin-top: 0.5em;
	justify-content: flex-end;
	flex-wrap: wrap;
}
#buttonvault button {
	padding: 0.3em 0.5em;
	font-size: 1em;
	cursor: pointer;
}
#buttonvault button:hover {
	background-color: #e5007d;
	color: white;
}
#buttonvault > * {
	margin-left: 0.3em;
}

/* ========================================================================== */
/* Fensterbreiten */
/* ========================================================================== */
/* 1em = 16px */
@media screen and (max-width:650px) {
	.attributes { flex-direction: column; }
	.attblock { width: 100%; }
	.blockrow { flex-direction: column; }
	.handyrow { 
		flex-direction: row; 
		gap: 0.4em; 
		justify-content: space-between;
	}
	.meritrow input { width: 100%; }
	.defense input { width: 100%; }
	.essenceblock > div { display: flex; gap: 0.3em; }
	.essenceblock input { width: 100%; }
	.essenceblock .essencespend { white-space: normal; }
	.essenceblock .essencecommited { white-space: normal; }
	
	.willpowerblock > div { display: flex; flex-direction: column; }
	.charmrow > div { flex-wrap: wrap; }
	.charms .name, .charms .name_ger { flex-basis: 85% !important; width: 85% !important; }
	.charms .group { width: 4em; }
	.addhp, .damage { font-size: 2em; }
	.charmSetSelector { display: block; float: none; margin-bottom:0.2em; }
}
@media screen and (min-width:650px) {

}
@media screen and (min-width:1050px) {

}

@media print {
	.print, #buttonvault { display: none; }
	body {
		background-color: white;
	}
}