:root {
	--yellowMessage: orange;
	--redMessage: red;
	--greenMessage: limegreen;
	--darkForeGround: #839794;
	--lightBackGround: #AD9E3C;
	--lightBoxBackGround: #f3f3f3;
}

.navbar {
	background-color: white;
	border-bottom: solid 2px var(--darkForeGround);
}

.nav > li > a {
	color: var(--darkForeGround);
}

	.nav > li > a:hover {
		color: #FFF;
		background-color: var(--darkForeGround);
	}

.nav > li:hover,
.nav > li:hover a {
	color: #FFF;
	background-color: var(--darkForeGround);
}

ul.SecondaryMenuItemsContainer {
	background-color: var(--darkForeGround);
	color: #FFF;
	margin-top: 0px;
	text-align: left;
	float: left;
	padding: 30px 0 10px 0;
	position: absolute;
	z-index: 9999;
	top: 50px;
	left: 0;
	margin: 0;
	width: 200px;
	list-style-type: none;
	background-color: var(--darkForeGround);
}

	ul.SecondaryMenuItemsContainer a {
		display: block;
		color: #FFF;
		padding: 5px 10px;
		border-left: solid 1px var(--darkForeGround);
		border-right: solid 1px var(--darkForeGround);
	}

		ul.SecondaryMenuItemsContainer a:hover {
			text-decoration: none;
			color: var(--darkForeGround);
			background-color: #FFF;
		}


.navbar-brand img {
	height: 25px;
}

.BigLogo {
	width: 100%;
	margin-bottom: 25px;
}

footer {
	display: block;
	padding-top: 20px;
	width: 100%;
	position: sticky;
	background-color: white;
	bottom: 0px;
}

	footer * {
		color: var(--darkForeGround);
	}

	footer p {
		display: block;
		border-top: solid 2px var(--darkForeGround);
		padding-top: 20px;
	}


.jumbotron {
	border: solid 1px var(--darkForeGround);
	background-color: var(--lightBoxBackGround);
}

.TeaserRow {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin-top: 10px;
}

.Teaser {
	border: solid 1px var(--darkForeGround);
	border-radius: 5px;
	flex-grow: 1;
	width: 30%;
}

h2 {
	margin-bottom: 30px;
	color: var(--darkForeGround);
}

table.RadioButtonList td {
	padding: 10px;
}

	table.RadioButtonList td input {
		margin-right: 10px;
	}

div.InputEntryRow {
	margin-bottom: 20px;
	display: flex;
	flex-direction: row;
}

	div.InputEntryRow > div {
		margin-right: 20px;
	}

input[type=submit] {
	margin-right: 10px;
}


table.Transactions {
	margin-bottom: 30px;
}

	table.Transactions th,
	table.Transactions td {
		padding: 5px 10px;
	}

	table.Transactions th {
		text-align: center;
	}

	table.Transactions td {
		font-size: 10px;
	}

		table.Transactions td.MonthlyAmountColumn {
			text-align: right;
			width: 70px;
		}

table#MainContent_EvaluationDataCategorySummary,
table#MainContent_EvaluationDataGroupSummary,
table#MainContent_EvaluationDataTypeSummary {
	padding: 10px;
	margin: 10px;
	border-width: 0px;
}

	table#MainContent_EvaluationDataCategorySummary td,
	table#MainContent_EvaluationDataGroupSummary td,
	table#MainContent_EvaluationDataTypeSummary td {
		padding: 10px;
		font-size: 16px;
		font-weight: bold;
		border-width: 0px;
	}

	table#MainContent_EvaluationDataCategorySummary tr td:nth-child(even),
	table#MainContent_EvaluationDataGroupSummary tr td:nth-child(even),
	table#MainContent_EvaluationDataTypeSummary tr td:nth-child(even) {
		text-align: right;
	}

	table#MainContent_EvaluationDataCategorySummary th.NoDisplay,
	table#MainContent_EvaluationDataGroupSummary th.NoDisplay,
	table#MainContent_EvaluationDataTypeSummary th.NoDisplay {
		display: none;
	}

.ResultText {
	display: block;
	margin: 10px;
	font-weight: bold;
	font-size: 16px;
}

	.ResultText.green {
		color: var(--greenMessage);
	}

	.ResultText.red {
		color: var(--redMessage);
	}

	.ResultText.yellow {
		color: var(--yellowMessage);
	}



.EvaluationSelection {
	margin-top: 20px;
}

input.EvaluationSelector {
	border: solid 2px var(--darkForeGround);
	background-color: var(--darkForeGround);
	padding: 5px 20px;
	margin: 0px 5px;
	color: white;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	margin-bottom: -2px;
}

	input.EvaluationSelector.Active {
		background-color: var(--lightBackGround;
	}

table.SummaryTable {
	border: none;
	min-width: 400px;
}

	table.SummaryTable th,
	table.SummaryTable td {
		border: none;
		border-bottom: solid 1px var(--darkForeGround);
		padding: 2px;
		padding-left: 2px;
		padding-right: 20px;
		width: auto;
	}

	table.SummaryTable th {
		border-bottom-width: 2px;
	}

		table.SummaryTable th.RateColumn,
		table.SummaryTable td.RateColumn,
		table.SummaryTable th.AmountColumn,
		table.SummaryTable td.AmountColumn {
			text-align: right;
			padding-left: 30px;
		}

	table.SummaryTable td.ButtonColumn {
		width: 100px;
		border-bottom-width: 0px;
		padding-right: 0px;
		padding-left: 20px;
	}

		table.SummaryTable td.ButtonColumn input[type=submit] {
			border: solid 2px var(--darkForeGround);
			background-color: transparent;
			padding: 2px 10px;
			margin: 1px;
			color: var(--darkForeGround);
			border-radius: 5px;
			font-size: 10px;
		}

.TransactionInputPanel {
	padding: 10px;
	display: block;
}

/*  Chat-Styles  */
.MessageRow {
	border-color: blue;
	position: relative;
	display: flex;
	flex-direction: column;
}

.BotMessage,
.ChatMessage {
	display: block;
	justify-content: flex-start;
	width: 80%;
	padding: 5px 10px;
	margin-bottom: 10px;
	border: solid 2px var(--darkForeGround);
	border-radius: 10px;
	font-size: 16px;
}

.BotMessage {
	background-color: var(--darkForeGround);
	color: #FFF;
	text-align: left;
	width: 80%;
	border-top-left-radius: 0px;
}

.ChatMessage {
	background-color: var(--lightBackGround;
	color: var(--darkForeGround);
	text-align: right;
	width: 80%;
	margin-left: auto;
	border-top-right-radius: 0px;
}

.BotMessage i {
	padding-left: 5px;
	padding-right: 5px;
	font-weight: bold;
}

.ChatMessage .CommonButton {
	background-color: var(--darkForeGround);
	color: white;
	min-width: 200px;
	min-height: 30px;
	max-width: 80%;
	font-size: 16px;
	border: none;
	margin-bottom: 5px;
}

	.ChatMessage .CommonButton.UsedItem {
		background-color: grey;
	}


.navbar-toggle {
	background-image: url("Icons/BurgerMenuIcon.svg");
	height: 24px;
	width: 24px;
}


.ButtonToolTipImage {
	display: inline;
}

.ToolTipTextLabel {
	display: none;
	position: relative;
	border: solid 1px gray;
	padding: 10px;
	margin: 0px 5px 10px;
}

input[type=text].TextBoxAmount {
	width: 100px;
	font-size: 16px;
	text-align: right;
}

.DataPanel {
	/*border: solid 2px var(--darkForeGround);*/
	margin-top: 0px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	/*padding: 20px;*/
}

	.DataPanel select {
		padding: 5px 10px;
	}

	.DataPanel .DetailPanel {
		/*width: 100%;*/
		margin: 0px 10px 20px 10px;
		padding-bottom: 20px;
		/*border-bottom: solid 1px var(--darkForeGround);*/
		display: flex;
		flex-wrap: wrap;
	}

		.DataPanel .DetailPanel img {
			width: 100% !important;
			max-width: 500px !important;
			object-fit: scale-down;
		}


	.DataPanel dd {
		display: none;
	}

		.DataPanel dd.initial-open {
			display: block;
		}

	.DataPanel .EnlargePanel {
		display: block;
		border: solid 2px var(--darkForeGround);
		margin-bottom: 20px;
	}

		.DataPanel .EnlargePanel .Head {
			display: block;
			background-color: var(--lightBackGround;
			text-align: right;
			padding: 2px;
		}

	.DataPanel .closed {
	}

	.DataPanel .open {
	}

.EvaluationHint {
	display: block;
	margin-top: 20px;
}

.navbar-right {
	border-top: solid 1px var(--darkForeGround);
}


.jumbotron {
	border: none;
	background-color: white;
	margin-bottom: 0px;
}

.MessageText {
	color: var(--yellowMessage);
}

@media screen and (min-width: 768px) {
	.jumbotron {
		border: solid 1px var(--darkForeGround);
		border-radius: 5px;
	}

	.Teaser {
		width: 32%;
	}

	.navbar-right {
		border-top: none;
	}
}