// main: midgard5.less
@borderGroove: 2px groove #eeede0;
@attributeBorderColor: rgba(0, 0, 0, 0.5);

.midgard5 {
	.flexbox {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.flexcolumn {
		flex-wrap: wrap;
		flex-direction: column;
	}

	.flexcolumn-1 {
		flex-basis: 100%;
		flex-wrap: wrap;
	}

	.flexcolumn-2 {
		flex-basis: 50%;
		flex-wrap: wrap;
	}

	.flexcolumn-3 {
		flex-basis: 33%;
		flex-wrap: wrap;
	}

	.flexcolumn-4 {
		flex-basis: 25%;
		flex-wrap: wrap;
	}

	.flexcolumn-5 {
		flex-basis: 20%;
		flex-wrap: wrap;
	}

	.flexpart {
		gap: 0;
		padding: 0;
		margin: 2px;
		background-color: beige;
		border-collapse: separate;
		border-radius: 10px;
		border: 2px solid black;
	}

	.flexpart-header {
		font-weight: bold;
		font-size: large;
		text-align: center;
		color: black;
	}

	.flexpart-icon {
		height: 2rem;
		float: left;
		border: 0px solid transparent;
	}

	.flexrow {
		align-items: center;
	}

	h3 {
		padding: 0.5rem 0.5rem 0.5rem 0.5rem;
		margin-top: 0.5rem;
		margin-bottom: 0;
		text-align: left;
		font-weight: bold;
		background-color: #eeede0;
		color: black;
		border-collapse: separate;
		border: 2px solid black;
		border-radius: 10px;
	}

	.profile-img {
		display: block;
		margin-left: auto;
		margin-right: auto;
		height: 100%;
		width: auto;
		border: 0px solid black;
	}

	.sheet.character {
		form {
			display: flex;
			flex-direction: column;
		}

		.sheet-content {
			height: 100%;
			display: flex;
			flex-direction: column;

			.editor {
				height: 100%;
			}
		}

		.description {
			flex: 0 0 100%;
			margin: 0;
		}
	}

	.sheet-navigation {
		margin: 4px 0;
		background-color: lightgrey;
		border-top: 2px solid black;
		border-bottom: 2px solid black;
	}

	.sheet-navigation .item {
		padding: 8px 12px 8px 12px;
		color: black;
		font-weight: bold;
		font-size: large;
	}

	.sheet-navigation .active {
		background-color: darkgrey;
	}

	.level-display {
		text-align: right;
		font-weight: bold;
	}

	table {
		background-color: beige;
		border: 0px solid transparent;
		&.bordered {
			border-collapse: separate;
			border: 2px solid black;
			border-radius: 10px;
			font-size: larger;
			font-weight: bolder;
		}
	}

	td,
	th {
		padding: 0 0.5rem 0 0.5rem;
		text-align: left;

		&.center {
			text-align: center;
		}

		&.fixed-value {
			width: 3rem;
			text-align: center;
		}

		&.attribute {
			text-align: center;
			font-weight: bold;
		}

		&.attribute-value {
			background: url(/icons/svg/d20-grey.svg) no-repeat;
			background-size: 50px 50px;
			background-position: center;
			color: black;
			text-align: center;
			font-weight: bold;
			height: 50px;
			width: 50px;
		}

		&.title {
			padding: 0.5rem 0.5rem 0.5rem 0.5rem;
			text-align: left;
			font-weight: bold;
		}

		&.highlight {
			font-weight: bold;
			font-style: italic;
		}
	}

	.table-icon {
		height: 1rem;
		width: 1rem;
		float: left;
		border: 0px solid transparent;
	}

	input {
		border: 0px solid black;
	}

	input.skill {
		width: 5rem;
	}

	input.fixed {
		width: 5rem;
	}

	input.checkbox {
		width: 1rem;
		height: 1rem;
	}

	.new-skill {
		font-style: italic;
		background: rgba(0, 0, 0, 0.3);
		color: rgba(255, 255, 255);
	}

	.roll-button {
		background: url(/icons/svg/d20-black.svg) no-repeat;
		background-size: 1rem 1rem;
		border: #000000 solid 0px;
		width: 1rem;
		height: 1rem;
	}

	.wide-button {
		margin: 0.25rem 0;
	}

	.learn-button {
		padding: 0;
		margin: 0;
		height: 1rem;
		width: 4rem;
		background: rgba(255, 255, 255, 0.5);
		font-size: smaller;
		text-align: center;
		line-height: 0.8rem;
	}

	span.spell-process {
		color: rgb(93, 93, 93);
		font-style: italic;
	}

	.filler {
		flex: 1 1 auto;
	}

	.health-bar {
		height: 1rem;
		background-color: rgba(0, 0, 0, 0.8);
		display: flex;
		flex-direction: row;
		gap: 1px;
		padding: 1px;
		//align-items: stretch;

		input,
		.max-value {
			flex: 0 0 2rem;
			text-align: center;
			height: 100%;
			background-color: rgba(109, 108, 102, 1);
			color: rgba(255, 255, 255, 1);
			font-weight: bold;
			border-radius: 0;
		}

		.lp-bar-item-empty,
		.ap-bar-item-empty {
			flex-grow: 1;
			background-color: white;
		}

		.lp-bar-item {
			flex-grow: 1;
			background-color: lightgreen;
		}

		.ap-bar-item {
			flex-grow: 1;
			background-color: lightblue;
		}

		.negative-bar-item {
			flex-grow: 1;
			background-color: red;
		}
	}

	.biography {
		margin: 0.5rem 0.5rem 0.5rem 0.5rem;
		height: 180px;
		background-color: #eaead7;
		.editor {
			height: 100%;
			width: 100%;
		}
	}

	.attributes {
		padding: 0.5rem 0.5rem 0.5rem 0.5rem;
		display: flex;
		flex-direction: row;
		margin-bottom: 0.5rem;
		background-color: beige;
		flex-wrap: wrap;
		justify-content: center;

		.attribute {
			flex: 0 0 6rem;
			margin: 0;
			border: 1px solid @attributeBorderColor;
			//border-bottom: none;
			border-radius: 10;

			display: flex;
			flex-direction: column;

			.attribute-header {
				display: flex;
				align-items: center;
				text-align: center;
				justify-content: center;

				font-weight: bold;
				background-color: @attributeBorderColor;
				color: rgba(255, 255, 255, 1);

				//font-size: 1.0rem;
				height: 2.5rem;
			}

			.attribute-main {
				padding: 0.2rem;

				.attribute-main-value {
					text-align: center;
					vertical-align: middle;
					font-size: 2rem;
				}

				.attribute-main-bonus {
					text-align: center;
					vertical-align: middle;
					font-size: 1rem;
				}
			}

			.attribute-footer {
				display: flex;
				flex-direction: row;
				gap: 0.3rem;
				padding: 0.3rem;
				background-color: @attributeBorderColor;

				input {
					flex-grow: 1;
					text-align: center;
					background-color: rgba(255, 255, 255, 0.8);
				}
			}
		}
	}

	.chip {
		display: inline-block;
		padding: 0 25px;
		height: 35px;
		font-size: 16px;
		line-height: 35px;
		border-radius: 25px;
		background-color: #f1f1f1;
	}

	.closebtn {
		padding-left: 10px;
		color: #888;
		font-weight: bold;
		float: right;
		font-size: 20px;
		cursor: pointer;
	}

	.closebtn:hover {
		color: #000;
	}

	.pp-listing {
		margin: 0 2rem;
		flex: 1 0 16%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
	}
}