@font-face{
	font-family:"MiloWeb W04 Light";
	src:url("../assets/fonts/1474021/529065e7-60a5-499d-9556-2f4f65c5c312.eot?#iefix");
	src:url("../assets/fonts/1474021/529065e7-60a5-499d-9556-2f4f65c5c312.eot?#iefix") format("eot"),url("../assets/fonts/1474021/6203c288-9b1e-42a5-8b18-14287829747c.woff2") format("woff2"),url("../assets/fonts/1474021/0af30fb9-be60-4f8a-9320-9fdeb7ee803e.woff") format("woff"),url("../assets/fonts/1474021/46879ccd-8e3e-4d25-876f-c892effde00c.ttf") format("truetype");
}
@font-face{
	font-family:"MiloWeb W04 Medium";
	src:url("../assets/fonts/1474029/5c2fe151-26c2-4664-aa77-b3006cdb10cd.eot?#iefix");
	src:url("../assets/fonts/1474029/5c2fe151-26c2-4664-aa77-b3006cdb10cd.eot?#iefix") format("eot"),url("../assets/fonts/1474029/62e50b33-f84f-42e7-9e50-2f56a843ee54.woff2") format("woff2"),url("../assets/fonts/1474029/8cc3bd79-32fc-46df-b235-46e68dbaf950.woff") format("woff"),url("../assets/fonts/1474029/d4331d92-59d0-435e-a2c3-12e789e7ca96.ttf") format("truetype");
}

:root {
	--mainColor: #00448a;
	--backgroundColor: #57b9e2;
	--accentColor: #00448a; /*=*/
	--accentBackgroundColor: rgba(0, 68, 138, 0.5);
	--accentInvertColor: white; /* #afd2e6; */
	--accentInvertColor2: #9ccde9;
	--chartBackgroundColor: #80d5cb;
	--disabledColor: gray;
}

html {
	/*font-size: 18px;*/
}

html, body {
	margin: 0;
	padding: 0;
	font-family: "MiloWeb W04 Light", Helvetica, Arial;
	font-size: 1em;
	line-height: 1.2em;
	color: #000000;
	background-color: var(--backgroundColor);
	/* keine Mediävalziffern */
	-moz-font-feature-settings:"lnum" 1; 
	-ms-font-feature-settings:"lnum" 1; 
	-o-font-feature-settings:"lnum" 1; 
	-webkit-font-feature-settings:"lnum" 1; 
	font-feature-settings:"lnum" 1;
}

body {
	padding-top: 70px; /* wegen navbar-fixed-top */
	padding-bottom: 70px; /* wegen navbar-fixed-bottom */
	/*Achtung: Hyphens (Silbentrennung) Attribut lang erforderlich*/
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.h1, h1, 
.h2, h2,
.h3, h3,
.h4, h4 {
	font-family:"MiloWeb W04 Medium";
	color: var(--mainColor);
}

.h3, h3 {
	text-transform: uppercase;
}

.h4, h4 {
	font-size: 1.2rem;
	margin-bottom: 0.2rem;
}

p {
	margin: 0 0 1.2em 0;
}

a, a:hover, a:visited {
	color: var(--accentColor);
	text-decoration: underline;
}
a:focus {
	outline: none;
}

/* Vermeidung sichtbarer Outline-Rahmen in Webkit-Browsern */
:active,
:focus {
	outline:0 none;
}
/* ab Chrome 83+ erscheint ein schwarzer select-Rahmen bei UI-Components */
*, input, select, textarea, option, button {
    outline: none!important;
}

/*DEBUG*/
#info_panel {
	display: none;
	background-color: rgba(255,255,255,0.5);
	position: absolute;
    bottom: 60px;
}

canvas {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;

	margin-bottom: 0px;
	padding-bottom: 0px; /* Kein padding, da sonst in Firefox die Schrift unscharf gerendert wird! */
}

/*#canvas {
    position: relative;
	top: 50px;
	background-color: #406f7d;
}*/

.panel {
	padding: 10px;
	border-radius: 0;
}

.chart-container {
	background-color: var(--chartBackgroundColor);
}

/*----------------------------------------------------------------------------*/
/* Dummy-Chart                                                                */
/*----------------------------------------------------------------------------*/
.chart-container-dummy {
	background-color: var(--chartBackgroundColor);
	padding: 20px;
}
.chart-container-dummy table {
	width: 100%;
	border: 0;
}
.chart-container-dummy table td {
	height: 4em;
	border-right: 1px solid var(--accentColor);
	border-bottom: 1px solid var(--accentColor);
}
.chart-container-dummy table tr:last-child td {
	border-right: 1px solid var(--accentColor);
	border-bottom: 0px;
	height: 10px;
	font-size: 0;
}
.chart-container-dummy table tr td:last-child {
	/*border-right: 0px;*/
}
.ml-dummychart-table-col-1 {
	width: 10px;
}
/*----------------------------------------------------------------------------*/

/*icomoon.io*/
.icon {
	font-size: 2em;
	position: absolute;
	top: 0;
	left: 0;
}
.icon:before {
	/*margin: -6px 0px 0px 1px;*/
	position: absolute;
}

.label {
	color: var(--mainColor);
}

#watchmode_btn {
	position: fixed;
	top: 45%;
	right: 20px;
	/*padding: 1px 0px;*/
	/*font-size: 2.0rem;*/
	width: 40px;
	z-index: 1000;
}
#watchmode_btn .label {
	top: 50px;
	font-size: 13px;
	/*text-shadow: 1px 1px gray;*/
}
#watchmode_btn .label.mode-compare {
	left: -21px;
}
#watchmode_btn .label.mode-single {
	left: -8px;
}

#watchmode_btn.btn-big {
	width: 60px;
	height: 60px;
}
.icon-big {
	font-size: 60px;
	top: -1px;
	left: -1px;
}

/******************************************************************************/
/* Main-Menu                                                                       */
/******************************************************************************/
#menu_btn {
	position: absolute;
	top: 5px;
	right: 5px;
	
	width: 40px;
	height: 40px;
	
	border-radius: 0;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	
	/*wenn nicht als .btn-default*/
	/*
	background-color: transparent !important;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	color: var(--mainColor) !important;
	right: 0px;
	*/
	
	visibility: hidden;
}
#menu_btn .glyphicon {
	top: 3px;
	left: -2px;
}
#menu_content {
	position: fixed;
	top: 50px;
	background-color: var(--accentInvertColor);
	right: 0;
	z-index: 10001;
	
	font-family: inherit;
	font-size: 1.2rem;
	font-weight: bold;
	
	-webkit-box-shadow: -10px 10px 20px -10px rgba(0,0,0,0.30);
	-moz-box-shadow:    -10px 10px 20px -10px rgba(0,0,0,0.30);
	box-shadow:         -10px 10px 20px -10px rgba(0,0,0,0.30);
	/*box-shadow:         0px 5px 20px 0px rgba(0,0,0,0.30);*/ /*Variante 1*/
}
.navbar-nav {
	margin: 0 !important;
}
.navbar-nav>li {
	float: none !important;
}

.nav>li>a {
	text-decoration: none;
	
	color: var(--mainColor);
	
	padding-top: 10px !important;
	padding-bottom: 11px !important;
}
.nav>li>a:focus, .nav>li>a:hover {
	background-color: var(--accentColor);
	color: var(--accentInvertColor);
	opacity: 0.75;
}
.nav>li.active>a {
	background-color: var(--accentColor);
	color: var(--accentInvertColor);
}

/*@media (min-width: 768px) {
	.navbar-toggle {
		display: none;
	}
}*/


#scrollup_btn.btn {
	display: none;
	width: 40px;
	position: fixed;
	bottom: 70px;
	right: 10px;
	z-index: 99;
}

/*Quelle: http://firchow.net/lange-texte-in-html-kurzen-text-overflow-ellipsis/*/
.shorten-long-text {
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
	text-overflow: ellipsis;
}

/* bootstrap override */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	padding-right: 10px;
	padding-left: 10px;
}

/*Bilder*/
img.ml-image {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}
/*caption - wir verwenden figure*/
figure img {
	margin-bottom: 2px !important;
}
figure {
	margin-bottom: 10px;
}
figure figcaption {
	font-size: 0.8em;
}

.ml-youtube-placeholder {
	width: 100%;
	height: auto;
}

.navbar-default {
	font-family:"MiloWeb W04 Medium";
	background-color: #FFFFFF;
    border: none;
	
	-webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.30);
	-moz-box-shadow:    0px 5px 20px 0px rgba(0,0,0,0.30);
	box-shadow:         0px 5px 20px 0px rgba(0,0,0,0.30);
	
	margin-bottom: 0;
}
.navbar-default .navbar-text {
	width: 100%;
	text-align: left;
	color: var(--mainColor);
	font-size: 20px;
	margin-top: 16px;
	margin-bottom: 0px;
	
	margin-right: 15px;
	margin-left: 15px;
	
	padding-right: 60px; /*wegen menu_btn*/
}

footer {
	display: flex;
}

.ml-footer {
	-webkit-box-shadow: 0px -5px 20px 0px rgba(0,0,0,0.30);
	-moz-box-shadow:    0px -5px 20px 0px rgba(0,0,0,0.30);
	box-shadow:         0px -5px 20px 0px rgba(0,0,0,0.30);
	min-height: 50px;
	
	font-family:"MiloWeb W04 Light";
}
.ml-footer p {
	width: 100%;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
}
.ml-footer a {
	cursor: pointer;
	text-decoration: none;
}
.ml-footer a:not(.btn) {
	color: var(--mainColor);
}

#logo-container {
	background-image: url(../assets/img/02_DE-IOEB-Logo_kurz.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
    width: 260px;
	border: 3px solid transparent;
	margin-inline-start: 20px;
}
#link-impressum-container {
	width: 100px;
	display: flex;
    align-items: flex-end;
	margin-inline-end: 10px;
}
#link-impressum-container p {
	display: table-cell;
	vertical-align: bottom;
	padding-bottom: 4px
}

footer,
#logo-container,
#link-impressum-container {
	height: 60px;
}

/* Tabellen */
table.ml-content-table {
	margin-bottom: 1rem;
	border: none !important;
	border-collapse: collapse;
	border-spacing:0;
	width: 100%;
}
table.ml-content-table td {
	vertical-align: top;
	padding: 3px;
	hyphens: auto;
}
.ml-content-table-col-1 {
	width: 25%;
}

/*******************************************************************************
	Modal-Dialog
********************************************************************************/
.modal-dialog {
	margin: 120px auto;
}
.modal-content {
	border-radius: 0;
}

.ml-modal-header-number {
	background-color: #6F236E;
	color: #FFFFFF;
	display: inline-block;
	width: 1.45em;
	text-align: center;
}

.icon-iphone {
	background-image: url(../assets/img/icon_iphone.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

/*
	Scrollbares Modal-Window
	Quelle: http://stackoverflow.com/questions/24166568/set-bootstrap-modal-body-height-by-percentage
*/
.modal-body {
    max-height:65vh; 
    overflow-y: auto;
}

/* Sprechblasen-Nase */
.modal-content:before {  
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 17px;
	top: -30px;
	border: 20px solid;
	border-color: transparent transparent white white;
}
/*******************************************************************************/

#zoom-button-container {
    position: relative;
	text-align: right;
	height: 50px;
    bottom: 10px;
}

.ml-text-newspaper {
	/*border: 1px solid #6F236E;*/
	background-color: #f5f4f0;
	padding: 0 15px;
	margin: 0.7em 0 10px 0;
}
.ml-text-newspaper h4 {
	margin-top: 10px;
	margin-bottom: 0.5em;
	color: #000000;
	text-transform: none; /* reset uppercase */
}

.ml-reference-source {
	font-style: italic;
	font-size: 0.8em;
	margin-top: -8px;
}

.ml-break-word {
	word-wrap:break-word;
}

.btn:focus {
  outline: none;
}
.btn-ml {
	color: #FFFFFF !important;
    background-color: transparent;
    border-color: transparent;
	border-radius: 0px;
}
.btn-ml:hover {
	color: #FFFFFF;
}
.btn.disabled, 
.btn[disabled], 
fieldset[disabled] .btn {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .40 !important;
	color: #FFFFFF;
}

.embed-responsive {
	/*margin-bottom: 1.5em;*/
}

.ml-offline-info {
	margin-top: 2px;
	color: red;
}

.progress-bar-success {
	background-color: var(--accentColor);
}


/* chrome: download-button in video-controls nicht zeigen */
/* Quelle: http://stackoverflow.com/questions/39602852/disable-download-button-for-google-chrome */
video::-webkit-media-controls {
    overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

/******************************************************************************/
/* Bootstrap Components                                                       */
/******************************************************************************/

/* btn */
a.btn {
	text-decoration: none;
}
.btn {
	border-radius: 10px; /* siehe HTML-Tooltips cornerRadius */
	height: 40px;
	font-size: 1.2rem;
	/*box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.30);*/
	-webkit-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.3);
}
.btn.active, .btn:active {
	background-image: none;
	outline: 0;
	-webkit-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.3);
}
.btn-default {
	background-color: var(--accentColor);
	color: var(--accentInvertColor);
	border-color: transparent;
}

.btn-default.active.focus, 
.btn-default.active:focus, 
.btn-default.active:hover, 
.btn-default:active.focus, 
.btn-default:active:focus, 
.btn-default:active:hover, 
.open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
	color: var(--accentColor);
	background-color: var(--accentInvertColor);
	border-color: transparent;
}
/*Sonderfall dropdown: Farben genau umgekehrt als btn-default*/
.dropdown .btn-default.active.focus, 
.dropdown .btn-default.active:focus, 
.dropdown .btn-default.active:hover, 
.dropdown .btn-default:active.focus, 
.dropdown .btn-default:active:focus, 
.dropdown .btn-default:active:hover {
	color: var(--accentColor);
	background-color: var(--accentInvertColor);
}
/*Sonderfall dropdown: Farben genau umgekehrt als btn-default*/
.dropdown.open>.dropdown-toggle.btn-default.focus, 
.dropdown.open>.dropdown-toggle.btn-default:focus,
.dropdown.open>.dropdown-toggle.btn-default:hover {
	color: var(--accentColor);
	background-color: var(--accentInvertColor);
}
.btn-default:hover {
	color: var(--accentColor);
	background-color: var(--accentInvertColor);
	border-color: transparent;
}
.btn-default.focus, .btn-default:focus {
	color: var(--accentColor);
	background-color: var(--accentInvertColor);
	border-color: transparent;
}
.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
	color: var(--accentColor);
	background-color: var(--accentInvertColor);
	border-color: transparent;
}
/*Sonderfall dropdown: Farben genau umgekehrt als btn-default*/
.dropdown .btn-default.active, .dropdown .btn-default:active, .dropdown .open>.dropdown-toggle.btn-default {
	background-color: var(--accentInvertColor);
	color: var(--accentColor);
	border-color: transparent;
}

.btn-default.active {
	color: var(--accentInvertColor);
	background-color: var(--accentColor);
}

/* dropdown component */
.dropdown-toggle-label {
	/*background-color: red;*/
	color: var(--accentColor);
}
/*Sonderfall dropdown: Farben genau umgekehrt als btn-default*/
.dropdown .btn:hover .dropdown-toggle-label {
	color: var(--accentInvertColor);
}
/*Sonderfall dropdown: Farben genau umgekehrt als btn-default*/
.dropdown.open .btn:hover .dropdown-toggle-label {
	color: var(--accentColor);
}

.dropdown {
	font-size: 1.2rem;
	font-weight: bold;
}
/*Sonderfall dropdown: Farben genau umgekehrt als btn-default*/
.dropdown .btn {
	text-align: left;
	padding: 0px 40px 0 14px;
	background-color: var(--accentInvertColor);
	color: var(--accentColor);
	font-weight: inherit;
	box-shadow: none;
}
/*Sonderfall dropdown: Farben genau umgekehrt als btn-default*/
.dropdown .btn:hover {
	background-color: var(--accentColor);
	color: var(--accentInvertColor);
}
.dropdown-menu {
	width: 100%;
	border-radius: 0;
	background-color: var(--backgroundColor);
	margin: 0;
	padding: 0;
	border: none;
	font-size: inherit;
	
	/*Zusatzfleisch wegen des Footers*/
	border-bottom: 100px solid transparent;
	box-shadow: none;
}
.dropdown-menu>li>a {
	font-weight: inherit;
	text-decoration: none;
	color: var(--mainColor);
	/*height: 40px;*/
	font-size: inherit;
	padding: 8px 15px;
	white-space: normal;
	line-height: 1.2em;
	/*white-space: nowrap; wenn einzeilig*/ 
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
	color: var(--accentInvertColor);
	background-color: var(--accentColor);
	opacity: 1;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
	color: var(--accentInvertColor);
	background-color: var(--accentColor);
}
.dropdown-menu>.disabled>a, .dropdown-menu>.disabled>a:focus, .dropdown-menu>.disabled>a:hover {
	/*color: rgb(173, 147, 185);*/ /*= rgb(92, 40, 116, 0.5); alt: #ccc;*/
	color: var(--disabledColor); /*= rgb(92, 40, 116, 0.5); alt: #ccc;*/
}
.ml-caret-btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	
	border-left: 1px solid var(--accentInvertColor);
	font-size: 1.2rem;
}
.ml-caret-btn .caret {
	border-top: 13px dashed;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	
	margin-top: 14px;
	margin-left: 9px;
}

/* 
	Ausnahme! Wenn im dropdown noch nichts gewählt wurde... 
*/
/*
.dropdown[data-selected_index="-1"] .btn {
	color: var(--accentColor);
	background-color: var(--accentInvertColor);
}
.dropdown[data-selected_index="-1"] .ml-caret-btn {
	background-color: var(--accentColor);
	color: var(--accentInvertColor);
}
*/

/*
	Ausnahme! Dropdown keine runde Ecken
*/
.dropdown button.btn {
	border-radius: 0;
}

.ml-legend-container {
	padding: 15px;
}
ul.ml-legend {
	margin: 0;
	padding: 0;
	color: var(--mainColor);
	font-size: 1.0rem;
	user-select: none;
}
.ml-legend li {
	position: relative;
	/*display: inline;*/ /* inline-block li nebeneinander anzeigen */
	display: block;
    list-style-type: none; /* ohne Aufzählungspunkte */
	/*margin: 0 25px 0 0px;*/
	/*padding-right: 5px;*/
	line-height: 1.8em;
	cursor: pointer;
	margin-bottom: 0.2em;
	padding: 0 10px 0 0;
}
.ml-legend li.columns-2 {
	width: 50%;
	float: left;
	padding: 0 10px 0 0;
}
.ml-legend li.columns-3 {
	width: 33.33%;
	float: left;
	padding: 0 10px 0 0;
}
.ml-legend li.columns-4 {
	width: 25%;
	float: left;
	padding: 0 10px 0 0;
}
.ml-legend-shape,
.ml-legend-shape-bg {
	position: absolute;
	top: -1px;
	left: 0;
	margin-right: 10px;
	width: 1.2em;
	height: 1.2em;
	border-radius: 0.6em;
	background-color: orange;
	border: 1px solid red;
	z-index: 3;
}
.ml-legend-shape-bg {
	z-index: 2;
	background-color: white;
	border-color: white;
}
.ml-legend-shape-bg-bridge {
	z-index: 1;
	background-color: transparent;
	border-color: transparent;
	position: absolute;
	width: 20px;
	height: 1.2em;
	border-radius: 0.6em 0 0 0.6em;
}
.ml-legend-item-active .ml-legend-shape-bg-bridge {
	background-color: var(--accentColor);
	border-color: var(--accentColor);
}

.ml-legend-title {
	font-size: 1em;
	line-height: 1.2em;
	color: var(--mainColor);
	margin-bottom: 0.5em;
}
.ml-legend-label {
	padding-left: 5px;
	padding-right: 5px;
	z-index: 1;
	margin: 0 0 0 20px;
	line-height: 1.2em;
}
.ml-legend-item-active .ml-legend-label {
	background-color: var(--accentColor);
	color: var(--accentInvertColor);
	/*border-radius: 0.6em 0 0 0.6em;*/
}

/******************************************************************************/
/* Chart-Tooltip                                                              */
/******************************************************************************/
#chartjs-tooltip {
	opacity: 1;
	/*opacity: 1 !important;*/ /*debugging*/
	position: absolute;
	background: var(--mainColor);
	color: white;
	border-radius: 0.6em;
	-webkit-transition: all .1s ease;
	transition: all .1s ease;
	pointer-events: none;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	
	font-family: "MiloWeb W04 Light", Helvetica, Arial !important;
	font-size: 1rem;
	line-height: 1.2rem;
	z-index: 10;
}
#chartjs-tooltip th {
	text-align: left;
}
.chartjs-tooltip-key {
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	border-radius: 0.6em;
	margin-right: 10px;
}
.chartjs-tooltip-text {
	position: relative;
	padding-left: 25px;
	top: 0px;
}
.chartjs-tooltip-value {
	/*word-break: break-all;*/
}
#chartjs-tooltip table tr,
#chartjs-tooltip table td {
	padding: 1px 0;
}
#chartjs-tooltip .chartjs-tooltip-custom-text {
	display: inline-block;
	padding-top: 1px;
}
/******************************************************************************/
/* Range Slider                                                               */
/******************************************************************************/
.slider {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.slider.slider-horizontal {
	height: 80px;
	width: 100%;
	background-color: white;
}
.slider-handle {
	top: 30px;
	background-color: var(--mainColor);
	background-image: none;
	cursor: pointer;
}
.slider-track {
	background-color: var(--accentBackgroundColor);
	background-image: none;
	box-shadow: none;
}
.slider-selection {
	background-color: var(--accentColor);
	background-image: none;
	box-shadow: none;
}
.slider-handle:nth-child(odd) {
	/*background-color: red !important;*/
	margin-left: 0px !important;
}
.slider-handle:nth-child(even) {
	/*background-color: blue !important;*/
	margin-left: -20px !important;
}

body:before {
	display: none;
	content: "xs";
}


#sternchen_info {
	color: var(--mainColor);
	text-align:left; 
	display:none;
	font-weight: bold;
}


@media (orientation: portrait){
/*	#watchmode_btn {
		top: 5px;
		right: 10px;
	}
	.navbar-text { wegen #watchmode_btn
		padding-right: 60px;
	}*/

	#watchmode_btn .label {
		color: var(--mainColor);
		/*text-shadow: 1px 1px white;*/
	}
}
@media (max-width: 480px) and (orientation: portrait){
	#chart-container-dummy table td {
		height: 2em;
	}
	
	.icon-big {
		font-size: 38px;
		top: 0;
		left: 0;
	}
	#watchmode_btn.btn-big {
		width: 40px;
		height: 40px;
	}
	
	#watchmode_btn {
		top: 140px;
	}
	
	#watchmode_btn .label {
		font-size: 8px;
		top: 30px;
	}
	#watchmode_btn .label.mode-compare {
		left: -17px;
	}
	
	/*Dropdown*/
	.dropdown-menu>li>a,
	.btn {
		font-size: 1rem !important;
	}
	
	/*HTMLLegende*/
	.ml-legend-title {
		font-size: 0.8em;
		line-height: 1rem;
	}
	.ml-legend-label {
		font-size: 0.8em;
		line-height: 1rem;
	}
	.ml-legend-shape,
	.ml-legend-shape-bg {
		width: 1em;
		height: 1em;
		border-radius: 0.5em;
	}
	.ml-legend-shape-bg-bridge {
		width: 20px;
		height: 1em;
	}
	
	#chartjs-tooltip {
		font-size: 0.8rem;
		line-height: 1.0rem;
	}
}
@media (min-width: 480px) and (max-width: 767px){
	body:before { 
		content: "sm"; 
	}
}
@media (min-width: 768px) {
	body:before { 
		content: "md"; 
	}
	.ml-text-newspaper {
		text-align: justify;
		
		/*Achtung: Hyphens (Silbentrennung) Attribut lang erforderlich*/
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}
}
@media (min-width: 992px) {
	body:before { 
		content: "md"; 
	}
/*	.navbar-default .navbar-text {
		font-size: 30px;
		margin-top: 15px;
	}*/
	
/*	footer,
	#logo-container,
	#link-impressum-container {
		height: 57px;
	}*/
	
	.ml-text-newspaper {
		text-align: justify;
	}
	
}
@media screen and (min-width: 1200px) {
	body:before { 
		content: "lg"; 
	}
/*	.navbar-default .navbar-text {
		text-align: left;
		padding-left: 20px;
		font-size: 40px;
		margin-top: 15px;
	}*/
	
/*	footer,
	#logo-container,
	#link-impressum-container {
		height: 77px;
	}*/
	
	.ml-text-newspaper {
		text-align: justify;
	}
}


@media (max-height: 480px) and (orientation: landscape){
	/* Header und Footer bei Smartphones landscape ausblenden */
	.navbar {
		display: none;
	}
	body {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}