.ff-chart-legend,
.ff-chart {
	--ff-c-tooltip-start-color: #444;
	--ff-c-tooltip-ende-color: #444;
	--line-0-color: #E5B56D;
	--line-1-color: #924B49;
	--line-2-color: #918448;
	--line-3-color: #478E7A;
	--line-4-color: #465F8C;
}

.ff-chart {
	position: relative;
}

.ff-chart svg {
	overflow:hidden;
	display: block;
}

.ff-chart-venn svg {
	margin: auto;
	display: block;
}

.venn-intersection text {
	display: none;
}

.ff-chart text {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	fill: var(--text-color);
}

.ff-chart-multidonut text {
	white-space: pre;
	font-size: 12px;
	line-height: 18px;
}

.ff-chart.ff-chart-zinskurve text {
	font-size: 12px;
}

.ff-chart-zinskurve .ff-chart-info {
	padding: 20px;
}

.rates-zinskurve-model {
	cursor: pointer;
}

.rates-zinskurve-model.invisible {
	opacity: 0;
	visibility: hidden;
}

.ff-chart-scatter .ff-c-axis line,
.ff-chart-scatter .ff-c-grid line,
.ff-chart-scatter .ff-c-axis path,
.ff-chart-scatter .ff-c-grid path {
	stroke: var(--text-color);
}

.ff-chart-zinskurve .rates-zinskurve-example {
	opacity: 0.5;
}

.ff-chart-scatter .ff-c-item {
	opacity: 1;
	fill: white;
	stroke: black;
	stroke-width: 0.5px;
}

.ff-chart-scatter .ff-c-item.highlight {
	z-index: 3;
	position: relative;
	stroke: rgba(var(--neutral-11-rgb),0.4);
	stroke-width: 16px;
}

.ff-chart-scatter .ff-c-item.active,
.ff-chart-zinskurve .rates-zinskurve-example.active {
	opacity: 1;
}

.ff-chart-zinskurve .invisible .rates-zinskurve-example {
	opacity: 0;
	visibility: hidden;
}

.ff-chart-zinskurve .rates-zinskurve-example:hover {
	opacity: 1;
	stroke: black;
	stroke-width: 1;
}

.ff-chart-table-open .ff-chart-zinskurve .example-highlight .rates-zinskurve-example,
.ff-chart-table-open .ff-chart-zinskurve .rates-zinskurve-model {
	opacity: 0.2;
}

.ff-chart-table-open .ff-chart-zinskurve .rates-zinskurve-model.example-highlight,
.ff-chart-table-open .ff-chart-zinskurve .rates-zinskurve-example.highlight,
.ff-chart-table-open .ff-chart-zinskurve .rates-zinskurve-model.highlight {
	opacity: 1;
}

.ff-c-grid .tick {
	stroke: lightgrey;
}

.ff-c-grid path {
	stroke-width: 0;
}

.ff-c-grid path,
.ff-c-grid line,
.ff-c-axis path,
.ff-c-axis line {
	fill: none;
	stroke: var(--chart-grid);
	shape-rendering: crispEdges;
}

.ff-c-axis-labels path {
	display: none;
}

.ff-c-axis-labels text {
	white-space: pre;
}

.ff-c-line-focus-0 { fill: var(--line-0-color); }
.ff-c-line-focus-1 { fill: var(--line-1-color); }
.ff-c-line-focus-2 { fill: var(--line-2-color); }
.ff-c-line-focus-3 { fill: var(--line-3-color); }
.ff-c-line-focus-4 { fill: var(--line-4-color); }

.ff-c-line {
	fill: none;
	stroke-width: 1px;
}

.ff-c-line-area {
	fill: none;
	stroke: transparent;
	stroke-width: 10px;
}

.ff-c-line-0 { stroke:var(--line-0-color); }
.ff-c-line-1 { stroke:var(--line-1-color); }
.ff-c-line-2 { stroke:var(--line-2-color); }
.ff-c-line-3 { stroke:var(--line-3-color); }
.ff-c-line-4 { stroke:var(--line-4-color); }



.ff-chart-legend {
	display: flex;
}

.ff-chart-legend li {
	flex: 1;
	text-align: center;
}

.ff-chart-legend li::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 1px solid black;
}

.ff-chart-legend li:nth-child(1)::before { background-color: var(--line-0-color); }
.ff-chart-legend li:nth-child(2)::before { background-color: var(--line-1-color); }
.ff-chart-legend li:nth-child(3)::before { background-color: var(--line-2-color); }
.ff-chart-legend li:nth-child(4)::before { background-color: var(--line-3-color); }
.ff-chart-legend li:nth-child(5)::before { background-color: var(--line-4-color); }

.ff-chart .ff-chart p.error {
	border: 1px solid rgba(255,0,0,0.3);
    color: red;
	font-weight:bold;
    line-height: 400px;
    text-align: center;
}

.ff-chart .ff-c-tooltip {
	position: absolute;
	text-align: left;
	padding: 5px 20px;
	background: var(--chart-tooltip-background);
	border: 1px solid var(--chart-tooltip-border);
	border-radius: 3px;
	pointer-events: none;
	white-space:pre;

	text-align: center;
	box-sizing: border-box;
	margin-left: -5px;
	transform: translateY(-28px) translateX(-50%);
	
	font-size: 16px;
	line-height: 25px;
	z-index: 1;
}

.ff-compact .ff-chart .ff-c-tooltip {
	border-color: var(--item-color);
}

.ff-compact .ff-chart .ff-c-tooltip h5 {
	color: var(--item-color);
	font-weight: bold;
}

.ff-compact .ff-chart .ff-c-tooltip h5,
.ff-compact .ff-chart .ff-c-tooltip h6 {
	font-size: 12px;
	line-height: 18px;
	margin: 0;
}

.ff-compact .ff-chart .ff-c-tooltip {
	font-size: 12px;
	line-height: 18px;	
}

.ff-compact .ff-chart .ff-c-tooltip.ff-c-tooltip-default::after {
	border-top-color: var(--item-color);
}

.ff-chart-multiline .ff-c-item {
	stroke-width: 10px;
	stroke: transparent;
	fill: var(--group-color);
	opacity: 0.5;
}

.ff-chart-multiline .ff-c-item.ff-c-item-compact {
	fill:transparent;
	stroke-width: 0;
}

.ff-chart-multiline .ff-c-item.focused {
	opacity: 1;
	transition: 0.2s ease-in opacity;
}

.ff-chart-scatter .ff-c-tooltip,
.ff-chart-multiline .ff-c-tooltip,
.ff-chart-multibar .ff-c-tooltip {
	transform: translate(-50%, -100%);
	margin-top: -15px;
}

.ff-chart-multidonut .ff-c-arc {
	transition:	all 0.2s ease-in;
}

.ff-chart-multidonut.hasFocus .ff-c-arc {
	opacity: 0.3;
}

.ff-chart-multidonut .ff-c-arc.focused {
	opacity: 1;
	stroke: black;
	stroke-width:0.5px;
}

.ff-chart-multidonut .ff-c-tooltip {
	transform: none;
	margin: 0;
	left: 0;
	top: 0;
	text-align: left;
	width: 250px;
	overflow: hidden;
	text-overflow: ellipsis;
	/*
	transform: translate(0);
	width: 300px;
	box-sizing: border-box;
	margin-left: -156px;
	margin-top: -45px;
	transform-origin: 156px 45px;
	*/
}

.ff-chart-multidonut .ff-c-tooltip::after {
	display: none !important;
}

.ff-chart .ff-c-tooltip-hidden { opacity:0; transition: all 1s ease 0.5s; }

.ff-chart .ff-c-tooltip-0 { border-color:var(--line-0-color); }
.ff-chart .ff-c-tooltip-1 { border-color:var(--line-1-color); }
.ff-chart .ff-c-tooltip-2 { border-color:var(--line-2-color); }
.ff-chart .ff-c-tooltip-3 { border-color:var(--line-3-color); }
.ff-chart .ff-c-tooltip-4 { border-color:var(--line-4-color); }

@media screen and (max-width : 700px) {
	.ff-chart .ff-c-tooltip {
		padding: 5px;
	}
	
	.ff-chart text {
		font-size: 13px;
	}
}

.ff-chart {
	position: relative;
}

.ff-chart.loading {
	position: relative;
}

.ff-chart.loading svg {
	opacity: 0.5;
	transform: scale(0.97);
}

.ff-chart.loading:before {
	z-index: 1;
	position: absolute;
	left: calc(50% - 15px);
	top: calc(50% - 15px);
	
	content: " ";
	display: block;
	width: 30px;
	height: 30px;
	margin: 8px;
	border-radius: 50%;
	border: 6px solid var(--highlight-color);
	border-color: var(--highlight-color) transparent var(--highlight-color) transparent;
	animation: graph-loading 1.2s linear infinite;
}

@keyframes graph-loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
	
.ff-chart .ff-c-line-focus-default,
.ff-chart .ff-c-line-focus-ende,
.ff-chart .ff-c-line-focus-start {
	display:none;
}

.ff-chart .ff-c-tooltip::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent transparent transparent;
}

.ff-chart .ff-c-tooltip::after {
	bottom: -10px;
	border-width: 10px 5px 0 5px;
}

.ff-chart .ff-c-tooltip.ff-c-tooltip-default::after {
	border-top-color: var(--chart-tooltip-border);
}

.ff-chart .ff-c-tooltip.ff-c-tooltip-0::after { border-top-color: var(--line-0-color); }
.ff-chart .ff-c-tooltip.ff-c-tooltip-1::after { border-top-color: var(--line-1-color); }
.ff-chart .ff-c-tooltip.ff-c-tooltip-2::after { border-top-color: var(--line-2-color); }
.ff-chart .ff-c-tooltip.ff-c-tooltip-3::after { border-top-color: var(--line-3-color); }
.ff-chart .ff-c-tooltip.ff-c-tooltip-4::after { border-top-color: var(--line-4-color); }

.ff-chart .ff-c-tooltip.ff-c-tooltip-start::after {
	border-top-color: var(--ff-c-tooltip-start-color);
}

.ff-chart .ff-c-tooltip.ff-c-tooltip-ende::after {
	top: -10px;
	border-width: 0 5px 10px 5px;
	border-bottom-color: var(--ff-c-tooltip-ende-color);		
}

.ff-chart .ff-c-tooltip.ff-c-tooltip-ende {
	border-color: var(--ff-c-tooltip-ende-color);
	transform: translateY(31px) translateX(-50%);
}

.ff-chart .ff-c-tooltip.ff-c-tooltip-start {
	border-color: var(--ff-c-tooltip-start-color);
}

.ff-chart-info tr.active > * {
	background-color: rgb(0, 76, 109);
	color: #FFF;
}

.ff-chart-info tr.current > * {
	background-color: rgb(255, 0, 70);
	color: #FFF;
}

.ff-chart-box-group {
	margin-bottom: 50px;
	
	display: flex;
	flex-wrap: wrap;
}

.ff-chart-box .ff-chart-title {
	display: block;
	text-align: left;
	margin: 10px;
	margin-top: 20px;
}

.ff-chart-box .ff-chart-title h3 {
	font-size: larger;
}

.ff-chart-box {
	position: relative;
	min-width: 450px;
	background-color: var(--box-background);
	padding: 10px;
	box-sizing: border-box;
	margin: 5px;
}

.ff-chart-box-standalone {
	margin: auto;
}

.ff-chart-box-standalone .ff-chart {
	min-height: min(50vh,500px);
}

.ff-chart-drop-target {
	position: absolute;
	top: 0;
	left: -6px;
	height: 100%;
	
	transition: all 0.2s ease-in;
}

.ff-chart-box.drop-disabled .ff-chart-drop-target,
.ff-chart-box.dragging .ff-chart-drop-target {
	display: none;
}

.ff-chart-drop-line {
	width: 2px;
	height: 100%;
}

.dragging-enabled .ff-chart-drop-target {
	border-bottom-color: rgba(0,0,0,0.5);
	border-top-color: rgba(0,0,0,0.5);
	
	margin-left: -50px;
	margin-right: -50px;
	padding-left: 50px;
	padding-right: 50px;
	z-index: 1;
}

.ff-chart-box-empty .ff-chart-drop-target {
	top: -5px;
	left: -11px;
	height: calc( 100% + 10px)
}

.dragging-enabled .ff-chart-drop-line {
	background-color: rgba(0,0,0,0.5);
}

.dropping-enabled .ff-chart-drop-line {
	background-color: rgba(255,0,0,0.8);
}

.ff-chart-action {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 30px;
    cursor: pointer;
	display: flex;
	color: var(--link-color);
	margin-right: 5px;
}

.ff-chart-action .ff-i {
	width: 30px;
    height: 30px;
    text-align: center;
	margin-right: -3px;
}

.ff-chart-action > span {
	flex: 1;
	font-size: 10px;
}

.ff-chart-action:hover > span {
	text-decoration: underline;
}

.ff-chart-toolbar {
	display: flex;
	flex-direction: row;
	justify-content: right;
}

.ff-chart-toolbar-floating {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 75%;
}

.ff-chart-toolbar .ff-chart-action {
	position: static;
}

.ff-chart-data-table .ff-chart-toolbar {
	margin: -30px -30px 10px 5px;
}

.ff-chart-data-trigger {
	right: 20px;
}

.ff-drag-handle {
    cursor: move;
}

.ff-chart-box:hover .ff-chart-action:hover {
	opacity: 1;
}

.ff-chart-box-empty {
	background: rgba(var(--neutral-0-rgb),0.3);
	border: 5px dashed rgba(var(--neutral-11-rgb),0.3);
	transition: all 0.2s ease-in;
	min-height: 400px;
}

.ff-chart-box-empty:hover {
	background: rgba(var(--neutral-0-rgb),0.8);
}

.ff-chart-box-empty .form-group {
	justify-content: center;
	height: 100%;
}

.ff-chart-box-empty .btn-group {
	width: 100%;
	justify-content: center;
}

.ff-chart {
	min-height: 350px;
}

.ff-chart-multidonut {
	width: 300px;
	margin: auto;
}

.ff-compact.ff-chart-box {
	margin: 5px;	
}

.ff-chart-box-1 {
	flex: calc(25% - 10px);
	min-width: 320px;
}

.ff-chart-box-standalone.ff-chart-box-1 {
	width: calc(25% - 10px);
}

.ff-chart-box-2 {
	flex: calc(50% - 10px);
}

.ff-chart-box-standalone.ff-chart-box-2 {
	width: calc(50% - 10px);
}

.ff-chart-box-3 {
	flex: calc(75% - 10px);
}

.ff-chart-box-standalone.ff-chart-box-3 {
	width: calc(75% - 10px);
}

.ff-chart-box-4 {
	flex: 100%;
}

.ff-chart-box-standalone.ff-chart-box-4 {
	width: 100%;
}

.ff-chart-box .form-group {
	display: flex;
	flex-direction: column;
}
.ff-chart-box .ff-chart {
	text-align: center;
}
.ff-chart-box .ff-chart-input {
	height: 100%;
}

.ff-chart-input {
	position: relative;
}

.ff-chart-data {
	white-space: nowrap;
	width: 100%;
}

.ff-chart-data th,
.ff-chart-data td {
	padding: 2px 10px;
	font-weight: normal;
	
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}



.ff-chart-data tbody tr:nth-child(2n+1) {
	background-color: var(--configurator-box-background);
}

.ff-chart-data tbody tr:hover,
.ff-chart-data tbody tr.highlight {
	outline: 1px solid var(--highlight-color);
}

.ff-chart-data tbody td {
	text-align: right;
}

.ff-chart-data thead td,
.ff-chart-data th {
	color: var(--title-color);
	font-weight: bold;
}

.ff-chart-data thead td {
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
}

.ff-chart-data-viewer {
	max-width: calc(100vw - 100px);
	overflow: auto;
	background: var(--box-background);
	margin-top: 10px;
}

.ff-chart-info,
.ff-chart-data-wrapper {
	position: fixed;
	z-index: 1;
	display: none;
	
	overflow:hidden;
	overflow-x: auto;
	
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	max-height: calc(100vh - 280px);
	max-width: calc(100vw - 100px);
	margin-top: 100px;
	overflow: auto;
	padding: 40px;
	box-shadow: 0 0 0 50vw rgba(var(--neutral-11-rgb),0.1);
	background: var(--box-background);
}

.ff-chart-venn .ff-c-tooltip {
	margin-left: -5px;
	margin-bottom: -18px;
}

.ff-chart-venn .venn-area.over path {
	stroke: black;
	stroke-width: 0.5px;
}

.ff-chart-venn .venn-area.focused path {
	stroke: black;
	stroke-width: 1px;
}

.ff-chart-info.open,
.ff-chart-data-wrapper.open {
	display: block;
}

.ff-ci-mod {
	font-size: 10px;
}

.ff-ci-mod.abschlag {
	color: var(--success-color);
}

.ff-ci-mod.zuschlag {
	color: var(--warning-color);
}

.ff-chart-data.fixed-first-column th {
	position: absolute;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	background: white;
}

.ff-chart-data.fixed-first-column td:first-of-type {
	padding-left: 100px;
}

.hypotizer-chart {
	min-height: 250px;
	background-color: var(--form-foreground);
	margin-top: 10px;
	margin-bottom: 20px;
}

.hypotizer-chart svg {
	shape-rendering:crispEdges;
}

.hypotizer-chart path,
.hypotizer-chart circle {
	shape-rendering:geometricprecision;
	stroke: var(--chart-grid);
}

.hypotizer-chart text {
	white-space: pre;
	fill: var(--text-color);
}

.hypotizer-chart .x.axis line,
.hypotizer-chart .x.axis path,
.hypotizer-chart .y.axis line,
.hypotizer-chart .y.axis path {
	stroke: var(--chart-grid);
	fill: none;
	stroke-width: 1px;
	opacity: 0.5;
}

.ff-c-item {
	fill: var(--group-color)
}

.ff-c-legend-group-marker {
	fill: var(--group-color)
}

.ff-c-legend-group-label {
	font-weight: bold;
}