/* ======================================================================================== */
/*                                 Main Wrapper, Spacer, Title                              */
/* ======================================================================================== */

/* In this section only elements and properties are listed
   which are relevant for the whole statistics page in general. */

/* ======================================================= Variables */

:root {
  --PageWidth: 1355px;
}

/* ======================================================= Body */

body{
  font-family: var(--NonSerifFont);
  font-size: 10pt;
}

/* ======================================================= Main Page Content Wrapper */

div.MainWrap {
  position: relative;
  max-width: var(--PageWidth);
  transition: max-width 1s;
  overflow-x: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  /*border: 1px solid blue; */
}
div.MainWrap-ShadowContent{
  padding: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
}
div.MainWrap-NoPaddingLeft{
  padding-left: 0px;
}

/* General Scrollbar Design */
/* Firefox: */
div.MainWrap{scrollbar-color: #EEEEEE #F8F8F8;}
/* Chrome: */
div.MainWrap::-webkit-scrollbar{background: #F8F8F8;}
div.MainWrap::-webkit-scrollbar-thumb{background: #E8E8E8; border: 4px solid #F8F8F8;}

/* Horizontally Stretched Main Wrapper */
div.MainWrap-HStrech{
  max-width: 100vw;
}

/* Additional Properties for Explanation Sections */
div.MainWrap-Expl{
  text-align: right; /* such that the ?-button is on the right */
}

/* ======================================================= Spacer */

div.Spacer    {margin-bottom: 100px;}
div.HalfSpacer{margin-bottom:  50px;}

/* ======================================================= Statistics Titles, Back-To Links */

/* Table properties */
table.titleTable{
  width: calc(100% - 10px);
  border-collapse: collapse;
  margin-left: 10px;
}

/* Cell Properties */
table.titleTable td.title, table.DWrap-Table td.title{
  color: var(--TourColor);
  font-size: 18pt;
  font-weight: normal;
  text-align: left;
}
table.DWrap-Table td.title{
  padding-left: 10px;
}

table.DWrap-Table td.title{padding-bottom: 20px;}
table.titleTable td.backTop, table.titleTable td.backToStatPage{
  vertical-align: middle;
  padding-right: 12px;
}
table.titleTable td.backTop{
  text-align: right;
}
table.titleTable a{
  color: var(--TourColor);
  font-weight: 500;
}

/* ======================================================================================== */
/*                                 SVG-Diagram Properties                                   */
/* ======================================================================================== */

.bar{
  fill: var(--TourColor);
  transition: 0.2s;
}

.axis, path.tick{
  stroke: #D9D9D9;
  stroke-width: 1px;
  transition: 0.2s;
  fill: none;
}
.grid, .grid-major{
  stroke: #EEEEEE;
  stroke-width: 1px;
  transition: 0.2s;
}
.grid-minor{
  stroke: #EEEEEE;
  stroke-width: 0.35px;
  transition: 0.2s;
}

path.stageSpan{
  stroke: #B4B4B4;
  stroke-width: 2px;
}

.label{
  transition: 0.2s;
  fill: black;
  stroke: none;
  font-size: 9pt;
}
.label-bottom, .label-top, .label-inner{text-anchor: middle;}
.label-left{text-anchor: end;}
.label-right{text-anchor: start;}
.label-shadow{
  stroke: rgba(255, 255, 255, 0.85) !important;
  stroke-width: 4.5px;
}

path.hMarkerLine{
  opacity: 0;
  stroke-width: 1px;
  stroke-dasharray: 2,2;
  stroke: #AA0000;
  transition: 0.2s;
}
text.hMarkerLabel{
  fill: #AA0000;
  transition: 0.2s;
}

/* ======================================================================================== */
/*                       General Fixed Tooltip Properties                                   */
/* ======================================================================================== */

div#CaleD-Tooltip,
div#CorrD-Tooltip{
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
  transition: 0.2s;
  overflow: hidden;
}
div#CaleD-Tooltip{
  position: absolute;
  left: 900px;
  width: 450px;
  height: 80px;
  margin-top: 4px;
}
div#CorrD-Tooltip{
  position: relative;
  width: 220px;
  height: 160px;
  margin-bottom: 5px;
}

div#CaleD-Tooltip div,
div#CorrD-Tooltip div{
  position: absolute;
  height: 100%;
  /*background-image: url("../../graphics/reports/B999-Fakeordner/13IST-D0008-SeNo-I0002.JPG");*/
  background-size: cover;
  background-position: center;
  /*transition: 0.2s;*/
}
div#CaleD-Tooltip div{width: 200px; height: 100%;}
div#CorrD-Tooltip div{width: 220px; height: 80px;}
div#CaleD-Tooltip table,
div#CorrD-Tooltip table{
  border-collapse: collapse;
  position: absolute;
}
div#CaleD-Tooltip table{
  top: 15px;
  left: 215px;
  width: 220px;
}
div#CorrD-Tooltip table{
  top: 95px;
  left: 5px;
  width: 200px;
}
div#CaleD-Tooltip table td,
div#CorrD-Tooltip table td{
  vertical-align: middle;
  /*border: 1px solid red;*/
}
div#CaleD-Tooltip table svg,
div#CorrD-Tooltip table svg{
  color: #B4B4B4;
  width: 10px;
  margin-left: 15px;
}
svg#CaleD-Tooltip-Close, svg#CorrD-Tooltip-Close{cursor: pointer;}
div.CaleD-Tooltip-Hidden{opacity: 0;}
div.CorrD-Tooltip-Hidden{height: 0 !important;}
div#CaleD-Tooltip table svg:hover,
div#CorrD-Tooltip table svg:hover{
  color: var(--TourColor);
}
td#CaleD-Tooltip-FromTo img,
td#CorrD-Tooltip-FromTo img{
  display: inline-block;
  height: 10px;
  margin-right: 4px;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
}
td#CaleD-Tooltip-day, td#CaleD-Tooltip-date,
td#CorrD-Tooltip-day, td#CorrD-Tooltip-date{
  color: var(--TourColor);
  font-weight: 400;
}
td#CaleD-Tooltip-day,
td#CorrD-Tooltip-day{
  width: 30%;
}
td#CaleD-Tooltip-date,
td#CorrD-Tooltip-date{
  width: 70%;
}
td#CaleD-Tooltip-date, span#CaleD-Tooltip-StatQuant,
td#CorrD-Tooltip-date, span#CorrD-Tooltip-StatQuant{
  text-align: right;
}
td#CaleD-Tooltip-FromTo, td#CaleD-Tooltip-Stat,
td#CorrD-Tooltip-FromTo, td#CorrD-Tooltip-Stat{
  text-align: left;
}
td#CorrD-Tooltip-Stat{padding-right: 15px;}
span#CaleD-Tooltip-StatQuant,
span#CorrD-Tooltip-StatQuant{padding-right: 3px;}

a.CaleD-Ttip-Link,
a.CorrD-Ttip-Link{
    display: block;
    position: absolute;
    bottom: 10px;
    height: 25px;
    width: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
a#CaleD-MapLink,
a#CorrD-MapLink{
    right: 35px;
    background-image: url('../../graphics/navigation/page-icons/MapIconBr.svg');
}
a#CaleD-StatTableLink,
a#CorrD-StatTableLink{
    right: 15px;
    background-image: url('../../graphics/navigation/page-icons/StatIconBr.svg');
}
a#CaleD-MapLink:hover,
a#CorrD-MapLink:hover{
  background-image: url('../../graphics/navigation/page-icons/MapIconRot.svg');
}
a#CaleD-StatTableLink:hover,
a#CorrD-StatTableLink:hover{
  background-image: url('../../graphics/navigation/page-icons/StatIconRot.svg');
}

path.CaleD-MarkerLine, text.CaleD-MarkerLabel,
path.CorrD-MarkerLine, text.CorrD-MarkerLabel{
    opacity: 0;
}

/* ======================================================================================== */
/*                                 Dropdown Properties                                      */
/* ======================================================================================== */

div.dropdown{
  width: 220px;
  cursor: pointer;
  position: relative;
  margin-bottom: 5px;
  transition: 0.2;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
}
div.dropdown img{
  height: 15px;
  position: absolute;
  left: 5px;
  top: 5px;
}
span.quant-active, span.quant-active-icon{
  line-height: 25px;
  margin-left: 5px;
  color: black;
}
span.quant-active-icon{
  margin-left: 25px;
}
div.dropdown svg{
  display: block;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 13px;
  transition: 0.2s;
  color: #D2D2D2;
}
div.dropdown:hover svg{
  color: var(--TourColor);
}
div.dropdown div{
  border-top: 1px solid transparent;
  background-color: white;
  height: 0px;
  overflow: auto;
  max-height: 200px;
  transition: 0.2s;
}
div.dropdown p{
  margin-left: 14px;
  color: #B4B4B4;
}
div.dropdown span.bull{
  color: transparent;
}
div.dropdown p:hover,
div.dropdown p.quant-active,
div.dropdown p.quant-active span.bull{
  color: var(--TourColor);
}

div.expanded{
  padding-bottom: 0px;
}
div.expanded svg{
  color: var(--TourColor);
  transform: rotate(180deg);
}
div.expanded div{
  border-top: 1px solid #E2E2E2;
  padding-top: 5px;
}
div.expanded div p:last-child{
  margin-bottom: 10px;
}

span.no-quant{font-style: italic;}
span.curQuant.no-quant{color: #D2D2D2;}

/* ======================================================================================== */
/*                                 Individual Statistics Properties                         */
/* ======================================================================================== */

/* ======================================================= ST-NoSta */

div.ST-NoSta-sec{
  margin-top: 50px;
  margin-bottom: 200px;
}
div.ST-NoSta-sec p{
  font-size: 10pt;
  padding: 20px;
}
div.ST-NoSta-sec a{
  color: var(--TourColor);
}

/* ======================================================= ST-LaUpd */

div.ST-LaUpd-sec{
  text-align: right;
  font-size: 10pt;
  color: #888888;
  font-family: var(--NonSerifFont);
  font-weight: 300;
  margin-bottom: 25px;
}

div.ST-LaUpd-sec table{
  display: inline-block;
  text-align: left;
  /*box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.075);*/
  margin-right: 10px;
  margin-top: 10px;
  padding: 10px;
  font-size: 8pt;
}

div.ST-LaUpd-sec td.title{
  /* title class is set by python if we leave the CET/CEST */
  padding-bottom: 10px;
}

div.ST-LaUpd-sec table td{
  padding-left: 5px;
  padding-right: 5px;
}

div.ST-LaUpd-sec img{
  height: 11px !important;
  margin-right: 4px;
  vertical-align: middle;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4); 
}

/* ======================================================= ST-BaDat */

/* Wrapper of the major and minor base data elements */
div.ST-BaDat-major{text-align: center;}
div.ST-BaDat-minor{text-align: center; margin-top: 50px;}

/* Wrapper of the individual base date elements */
div.ST-BaDat-major div, div.ST-BaDat-minor div{
  position: relative;
  display: inline-block;
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 10px;
  min-height: 75px;
}
div.ST-BaDat-major div{
  text-align: left;
  margin-left: 75px;
}
div.ST-BaDat-minor div{
  vertical-align: top;
}

/* Icons */
div.ST-BaDat-major img{
  position: absolute;
  height: 75px;
}
div.ST-BaDat-minor img{
  height: 50px;
}

/* Titles */
div.ST-BaDat-major p:not(.statNum), div.ST-BaDat-minor p:not(.statNum){
  color: var(--TourColor);
}
div.ST-BaDat-major p{
  font-size: 14pt;
  padding-left: 85px;
}

/* Tables */
div.ST-BaDat-major table, div.ST-BaDat-minor table{
  text-align: left;
}
div.ST-BaDat-major table{
  margin-left: 85px;
  font-size: 11pt;
 }
div.ST-BaDat-major table td.rpl, div.ST-BaDat-minor table td.rpl{
  text-align: right;
  padding-left: 10px;
}

/* ======================================================= ST-AltiD */

div#AltiD-Wrap{
  direction: rtl;
  margin-bottom: 0px;
  padding-bottom: 0px;
  font-size: 0pt;
}

div#AltiD-note div{margin-left: 10px;}
div#AltiD-note a{color: var(--TourColor);}

div#AltiD-NaviFlag-WrapWrap{
  overflow: visible;
  margin-top: 0px;
  padding-top: 5px;
  height: 30px;
}

div.AltiD-NaviFlag-Wrap{
  height: 3px;
  padding-top: 0px;
  cursor: pointer;
  position: absolute;
  border-left: 4px solid white;
  border-right: 4px solid white;
}
div.AltiD-NaviFlag-Wrap-First{border-left: 4px solid transparent;}
div.AltiD-NaviFlag-Wrap-Last{border-right: 4px solid transparent;}

div.AltiD-NaviFlag-Wrap img{
  display: block;
  position: absolute;
  left: 50%;
  top: 8px;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  transition: 0.2s;
}
div.AltiD-NaviFlag-Wrap:Hover img{
  -webkit-box-shadow: 0px 0px 4px 2px var(--TourColor);
  -moz-box-shadow: 0px 0px 4px 2px var(--TourColor);
  box-shadow: 0px 0px 4px 2px var(--TourColor);
}

div#AltiD-shiftBar{
  position: absolute;
  left: 0px;
  height: 3px;
  background-color: var(--TourColor);
}
div#AltiD-shiftBarBackground{
  position: absolute;
  left: 0px;
  width: 100%;
  height: 3px;
  background-color: #EEEEEE;
}

div#AltiD-SmallDiagWrap{
  background-color: #EEEEEE;
  height: 37px;
  margin-bottom: 0px;
  margin-top: 5px;
  overflow: hidden;
}

svg#AltiD-overview{
  width: 100%;
  height: 40px;
  position: relative;
  top: -3px;
  z-index: 10;
  fill: white;
}
svg#AltiD-overview rect{
  fill: url(#AltiD-overview_hatch);
}

img#AltiD-smallDiag{
  position: relative;
  width: 100%;
  height: 40px;
  top: -3px;
  z-index: 10;
}
div#AltiD-smallDiag-shiftBar{
  position: absolute;
  left: 0px;
  height: 40px;
  background-color: var(--TourColor);
  z-index: 5;
}

/* SVG Elements */

#AltiD-main-diagram{
  direction: ltr;
  font-size: 9pt;
}

.AltiD-altline{
  stroke-width: 2.6;
  fill: none;
}
path#AltiD-altline_filling{fill: rgba(238, 169, 0, 0.45)}
path#AltiD-main_line{stroke: #EEA900;}
#AltiD-dist_unpaved_p_line{stroke: rgb(192, 133, 0);}
#AltiD-Ferry_line{stroke: rgb(46, 117, 182);}
#AltiD-Car_line, #AltiD-Taxi_line, #AltiD-Bus_line, #AltiD-Train_line,
#AltiD-Flight_line, #AltiD-Hitchhiking_line{stroke: grey;}
#AltiD-Flight_line{stroke-dasharray: 3,3;}

#AltiD-day_lines path{
  stroke-width: 1.5;
  stroke: #EEA900;
}
#AltiD-day_lines text{
  fill: #EEA900;
  stroke: none;
  font-family: var(--NonSerifFont);
}
#AltiD-border_lines path{
  stroke-width: 1.5;
  stroke: grey;
  stroke-dasharray: 9,3,1.5,3;
}
#AltiD-border_lines image, #AltiD-hori_labels image{
  -webkit-filter: drop-shadow( 0px 0px 1.5px rgba(0, 0, 0, .4));
  filter: drop-shadow( 0px 0px 1.5px rgba(0, 0, 0, .4));
  width: 44px; /* 2.75*height (that's wider than the widest flag of Qatar) */
  height: 16px; /*height given in python times rescaling factor */
}

#AltiD-vert_labels, #AltiD-hori_labels{
  stroke: none;
  font-family: var(--NonSerifFont);
}
#AltiD-hori_labels{text-anchor: middle;}
#AltiD-hori_labels path{stroke-width: 1.5;}
.AltiD-label-Town{fill: rgb(89, 89, 89);}
.AltiD-label-City{font-size: 10pt;}
.AltiD-label-Capital{
  font-size: 10pt;
  text-decoration: underline;
  font-weight: bold;
}
.AltiD-label-Waterbody{fill: rgb(46, 117, 182);}
.AltiD-label-Swim{fill: rgb(46, 117, 182);}
.AltiD-label-POI{fill: rgb(112, 173, 71);}
.AltiD-label-Ferry{fill: rgb(46, 117, 182);}
.AltiD-label-Waterbody path{stroke: rgb(46, 117, 182);}
.AltiD-label-POI path{stroke: rgb(112, 173, 71);}
.AltiD-label-Border path{stroke: grey; stroke-dasharray: 9,3,1.5,3;}
.AltiD-label-POI rect{fill:rgb(112, 173, 71); stroke: none;}
.AltiD-icons image{
  width: 30px;
}

/* ======================================================= ST-CaleD */

/* SVG Elements */

rect.monthBlockEvenTrue{
  fill: white;
}
rect.monthBlockEvenFalse{
  fill: #F2F2F2;
}

/* Dropdown */

#CaleD-dropdown-wrapper{
  overflow-y: visible;
  height: 90px;
}

#CaleD-dropdown{
  position: absolute;
  margin: 32px;
}

/* ======================================================= ST-MnthD */

#MnthD-Wrap table{
  margin-bottom: 10px;
  width: var(--PageWidth);
}
#MnthD-Wrap td{
  text-align: center;
  vertical-align: top;
  /*border: 1px red solid;*/
  
}
#MnthD-Wrap td:first-child, #MnthD-Wrap td:last-child{
  width: 70px;
}
#MnthD-dist-label{width: 748px;}
#MnthD-right-label{width: 462px; font-size: 0;}
#MnthD-dropdown-wrap{
  display: inline-block;
  overflow-y: visible;
  width: 220px;
}
#MnthD-dropdown{
  position: absolute;
  z-index: 10000;
  font-size: 10pt;
}
#MnthD-dropdown div{
  text-align: left;
}

/* SVG Elements */

#MnthD-Wrap .axis rect{fill: white; stroke: none;}
#MnthD rect{transition: 0.2s;}

rect.c0, rect.image{fill: rgb(238, 169, 0);}
rect.c1, rect.video{fill: rgb(251, 194, 64);}
rect.days_rain{fill: #0070C0;}
.MnthD-right_grid_el{transition: 0.1s;}


/* ======================================================= ST-CompD */

svg#CompD-Dist path{
  fill: none;
}

table#CompD-Wrapper{
  width: 1350px;
}
table#CompD-Wrapper td{
  text-align: center;
  vertical-align: middle;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
}
table#CompD-Wrapper tr.CompD-Titles td{
  padding-bottom: 15px;
}

/* Bar colors */
path.CompD-paved{stroke: var(--TourColor);}
path.CompD-unpaved{stroke: rgb(192, 133, 0);}
/*path.CompD-Ferry{stroke: rgb(46, 117, 182);}
path.CompD-Hitchhiking{stroke: #D0D0D0;}
path.CompD-Taxi{stroke: #A0A0A0;}
path.CompD-Bus{stroke: #808080;}
path.CompD-Train{stroke: #505050;}
path.CompD-Flight{stroke: #202020;}
*/
path.CompD-dist_up{stroke: #FD6464;}
path.CompD-dist_even{stroke: rgba(230, 230, 230);}
path.CompD-dist_down{stroke: #5CCE5C;}
path.CompD-days_riding{stroke: #700;}
path.CompD-days_rest{stroke: #e00;}
path.CompD-otherDays{stroke: #f99;}
path.CompD-ridtime{stroke: var(--TourColor);}
path.CompD-breaktime{stroke: #FDD87C;}
rect.CompD-EverestBar{fill: var(--TourColor);}
path.CompD-alt_max{stroke-width: 2px;}

/* Legends */
table#CompD-Wrapper div{
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
}
span.CompD-paved,
span.CompD-unpaved,
span.CompD-Ferry,
span.CompD-Hitchhiking,
span.CompD-Taxi,
span.CompD-Bus,
span.CompD-Train,
span.CompD-Flight,
span.CompD-dist_up,
span.CompD-dist_even,
span.CompD-dist_down,
span.CompD-days_riding,
span.CompD-days_rest,
span.CompD-otherDays,
span.CompD-ridtime,
span.CompD-breaktime,
span.CompD-asc,
span.CompD-alt_max{
  display: inline-block;
  height: 10px;
  width: 10px;
}
span.CompD-paved{background-color: var(--TourColor);}
span.CompD-unpaved{background-color: rgb(192, 133, 0);}
/*span.CompD-Ferry{background-color: rgb(46, 117, 182);}
span.CompD-Hitchhiking{background-color: #D0D0D0;}
span.CompD-Taxi{background-color: #A0A0A0;}
span.CompD-Bus{background-color: #808080;}
span.CompD-Train{background-color: #505050;}
span.CompD-Flight{background-color: #202020;}*/
span.CompD-dist_up{background-color: #FD6464;}
span.CompD-dist_even{background-color: rgba(230, 230, 230);}
span.CompD-dist_down{background-color: #5CCE5C;}
span.CompD-days_riding{background-color: #700;}
span.CompD-days_rest{background-color: #e00;}
span.CompD-otherDays{background-color: #f99;}
span.CompD-ridtime{background-color: var(--TourColor);}
span.CompD-breaktime{background-color: #FDD87C;}
span.CompD-asc{background-color: var(--TourColor);}
span.CompD-alt_max{background-color: #AA0000;}

/* ======================================================= ST-MoEvD */

img.MoEvD-img{
  width: var(--PageWidth);
}

/* ======================================================= ST-NighD/ST-WethD */

table.DWrap-Table-NighD{
  float: left;
  margin-right: 20px;
}
img.NighD-img{
  margin-top: 10px;
  margin-bottom: 10px;
}
img.WethD-img{
  height: 235px;
}

table.DWrap-Table td.switch{
  /*padding-bottom: 15px;*/
  vertical-align: middle;
}

@media only screen and (max-width: 1378px) {
	table.DWrap-Table-NighD{
		margin-bottom: 50px;
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
}

td.pie-diag-scope{
  padding-top: 10px;
  font-size: 8pt;
  color: #999;
}

/* ======================================================= ST-HistD */

table#ST-HistD-WrapperTable td{
  padding: 12px;
  vertical-align: top;
}

svg#HistD-Windrose-Diagram circle{
  fill: none;
  stroke: #aaa;
}
svg#HistD-Windrose-Diagram #HistD-ctick2{
  stroke: #ddd;
}

#HistD-clabel1{
  fill: #555;
}
#HistD-clabel2{
  fill: #666;
}

/* ======================================================= ST-StgeD */

img.StgeT-NighD-img{height: 90px;}
img.StgeT-wethD-img{height: 41px;}

a.StgeT-MapIcon{
  display: inline-block;
  height: 28px;
  width: 21px;
  margin-top: -15px;
  margin-bottom: -5px;
  vertical-align: sub;
  background-image: url("../../graphics/navigation/page-icons/MapIconBr.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
a.StgeT-MapIcon:hover{
  background-image: url("../../graphics/navigation/page-icons/MapIconRot.svg");
}

/* ======================================================= ST-DailT */

table#CounT-cmpl tr.CounT-current td.flag img{
  -webkit-box-shadow: 0px 0px 8px 5px rgb(238, 169, 0);
  -moz-box-shadow: 0px 0px 8px 5px rgb(238, 169, 0);
  box-shadow: 0px 0px 8px 5px rgb(238, 169, 0);
}

/* ======================================================= ST-DailT */

table.PrecipationLegend img{height: 15px;}
td.feltTemp{width: 150px;}

/* Gallery */
div.dayGalleryWrapper{
  width: calc(100% - 5px);
  overflow: hidden;
  vertical-align: middle;
  width: 55px;
  padding-left: 5px;
  padding-bottom: 3px;
  padding-top: 3px;
  font-size: 0;
  mask-image: -webkit-gradient(linear, left top, right top,
			color-stop(0.0,  rgba(0,0,0,1)),
			color-stop(0.6,  rgba(0,0,0,1)),
			color-stop(0.9,  rgba(0,0,0,0)));
}
a.galleryThumb{
  display: inline-block;
  vertical-align: bottom;
  height: 15px;
  width: 28px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
}
a.galleryThumb:hover{
  -webkit-box-shadow: 0px 0px 4px 1px rgba(238,169,0);
  -moz-box-shadow: 0px 0px 4px 1px rgba(238,169,0);
  box-shadow: 0px 0px 4px 1px rgba(238,169,0);
}
a.maskedGalleryThumb{
  margin-left: 4px;
  margin-right: -18px;
  width: 28px;
}

a.DailT-CellLink{
  display: block;
  height: 100%;
  width: 100%;
}

td.DailT-MapIconCell{
  width: 20px;
  background-image: url("../../graphics/navigation/page-icons/MapIconBr.svg");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
}
td.DailT-MapIconCell:hover{
  background-image: url("../../graphics/navigation/page-icons/MapIconRot.svg");
}

td.DailT-MapIconCell a, td.DailT-ReportIconCell a{
  display: block;
  width: 20px;
  height: 21px;
}

td.DailT-ReportIconCell{
  width: 20px;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
}
td.DailT-ReportIconCell-Art{background-image: url('../../graphics/navigation/page-icons/ArtIconBr.svg');}
td.DailT-ReportIconCell-Pod{background-image: url('../../graphics/navigation/page-icons/PodIconBr.svg');}
td.DailT-ReportIconCell-Bil{background-image: url('../../graphics/navigation/page-icons/BilIconBr.svg');}
td.DailT-ReportIconCell-ArtPod{background-image: url('../../graphics/navigation/page-icons/ArtPodIconBr.svg');}
td.DailT-ReportIconCell-ArtBil{background-image: url('../../graphics/navigation/page-icons/ArtBilIconBr.svg');}
td.DailT-ReportIconCell-PodBil{background-image: url('../../graphics/navigation/page-icons/PodBilIconBr.svg');}
td.DailT-ReportIconCell-ArtVid{background-image: url('../../graphics/navigation/page-icons/ArtVidIconBr.svg');}
td.DailT-ReportIconCell-BilVid{background-image: url('../../graphics/navigation/page-icons/BilVidIconBr.svg');}
td.DailT-ReportIconCell-PodVid{background-image: url('../../graphics/navigation/page-icons/PodVidIconBr.svg');}
td.DailT-ReportIconCell-ArtPodBil{background-image: url('../../graphics/navigation/page-icons/ArtPodBilIconBr.svg');}
td.DailT-ReportIconCell-ArtBilVid{background-image: url('../../graphics/navigation/page-icons/ArtBilVidIconBr.svg');}
td.DailT-ReportIconCell-ArtPodVid{background-image: url('../../graphics/navigation/page-icons/ArtPodVidIconBr.svg');}
td.DailT-ReportIconCell-PodBilVid{background-image: url('../../graphics/navigation/page-icons/PodBilVidIconBr.svg');}
td.DailT-ReportIconCell-ArtPodBilVid{background-image: url('../../graphics/navigation/page-icons/ArtPodBilVidIconBr.svg');}

td.DailT-ReportIconCell-Art:Hover{background-image: url('../../graphics/navigation/page-icons/ArtIconRot.svg');}
td.DailT-ReportIconCell-Pod:Hover{background-image: url('../../graphics/navigation/page-icons/PodIconRot.svg');}
td.DailT-ReportIconCell-Bil:Hover{background-image: url('../../graphics/navigation/page-icons/BilIconRot.svg');}
td.DailT-ReportIconCell-ArtPod:Hover{background-image: url('../../graphics/navigation/page-icons/ArtPodIconRot.svg');}
td.DailT-ReportIconCell-ArtBil:Hover{background-image: url('../../graphics/navigation/page-icons/ArtBilIconRot.svg');}
td.DailT-ReportIconCell-PodBil:Hover{background-image: url('../../graphics/navigation/page-icons/PodBilIconRot.svg');}
td.DailT-ReportIconCell-ArtVid:Hover{background-image: url('../../graphics/navigation/page-icons/ArtVidIconRot.svg');}
td.DailT-ReportIconCell-BilVid:Hover{background-image: url('../../graphics/navigation/page-icons/BilVidIconRot.svg');}
td.DailT-ReportIconCell-PodVid:Hover{background-image: url('../../graphics/navigation/page-icons/PodVidIconRot.svg');}
td.DailT-ReportIconCell-ArtPodBil:Hover{background-image: url('../../graphics/navigation/page-icons/ArtPodBilIconRot.svg');}
td.DailT-ReportIconCell-ArtBilVid:Hover{background-image: url('../../graphics/navigation/page-icons/ArtBilVidIconRot.svg');}
td.DailT-ReportIconCell-ArtPodVid:Hover{background-image: url('../../graphics/navigation/page-icons/ArtPodVidIconRot.svg');}
td.DailT-ReportIconCell-PodBilVid:Hover{background-image: url('../../graphics/navigation/page-icons/PodBilVidIconRot.svg');}
td.DailT-ReportIconCell-ArtPodBilVid:Hover{background-image: url('../../graphics/navigation/page-icons/ArtPodBilVidIconRot.svg');}

a.fancyBoxCaptionIcon{
  display: inline-block;
  background-image: url("../../graphics/navigation/page-icons/MapIconBr.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 15px;
  height: 20px;
  vertical-align: top;
}
a.fancyBoxCaptionIcon:hover{
  background-image: url("../../graphics/navigation/page-icons/MapIconRot.svg");
}

td.barBackgr{
  background-image: url("../../graphics/statistics/DailT/backgroundBar.svg");
  background-repeat: no-repeat;
  background-position: right;
  background-size: 0% 80%;
  transition: 0.2s;
}

/* ======================================================= ST-CorrD */

div.CorrD-TitleWrapper{
  top: 50px;
  margin-top: -50px;
  z-index: 1000;
}

td#CorrD-QuantSelects,
td#CorrD-DiagramCell{
  vertical-align: top;
  /*border: 1px solid red;*/
}

td#CorrD-DiagramCell div{
  position: relative;
}
td#CorrD-QuantSelects{
  padding-top: 60px;
  padding-left: 12px;
  padding-right: 30px;
}

svg#CorrD-Diagram, div#CorrD-DiagArea{
  transition: 0.2s;
}

td#CorrD-DiagramCell div#CorrD-DiagArea{
  position: absolute;
}

/* Data Points */

div.CorrD-DataPoint{
  border-radius: 100%;
  background-color: var(--TourColor);
  position: absolute !important;
  width: 10px;
  height: 10px;
  transition: 0.2s;
  background-size: auto calc(100% + 4px);
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid transparent;
}
div.CorrD-DataPoint-country{
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
  box-shadow: 0px 0px 4px 0px rgba(119, 119, 119, 0.4);
}
div.CorrD-DataPoint-Marked{border: 2px solid #AA0000;}
div.CorrD-DataPoint-Active:not(.CorrD-DataPoint-country){
  background-image: url("../../graphics/statistics/CorrD/activeMarker.svg");
  background-size: max(2px, 50%);
  background-position: center;
  background-repeat: no-repeat;
}

circle.sScaleCircle{
  transition: 0.2s;
  fill: var(--TourColor);
}

div#CorrD-dd-d img{height: 5px; left: 10px; top: 10px;}
div#CorrD-dd-d span img{
  display: inline-block;
  position: relative;
  height: 10px;
  margin-right: 4px;
  top: 0; left: 0;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
}

/* ======================================================= ST-FinaD */

/* Diagram itself */
/* for general properties see 'SVG-Diagram Properties' above */

svg#FinaD-Diagram rect.bar{
  stroke: transparent;
  stroke-width: 0;
  transition: 0.2;
}

svg#FinaD-Diagram rect.bar:hover,
svg#FinaD-Diagram rect.bar.preactive{
  stroke: #AA0000;
  stroke-width: 2;
  cursor: pointer;
}

svg#FinaD-Diagram text.catAmounts{
  fill: #AA0000;
  opacity: 0;
  transition: 0.2s;
}

svg#FinaD-Diagram path.meanLine,
svg#FinaD-Diagram path.meanLineCats{
  stroke: #C08500;
  stroke-width: 2;
  transition: 0.2s;
  opacity: 0;
}
svg#FinaD-Diagram path.meanLineCats{
  stroke: #800000;
}
svg#FinaD-Diagram text.meanLabel{
  opacity: 0;
  transition: 0.2s;
  fill: #C08500;
}
svg#FinaD-Diagram text.meanLabelCats{
  fill: #AA0000;
}

/* Button Bar */

div#FinaD-ButtonBar, div#FinaD-Ttip{
  margin: 10px;
  margin-bottom: 20px;
  padding: 10px;
  padding-left: 15px;
  width: max(420px, calc(100% - 440px));
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
}
div#FinaD-ButtonBar *{
  transition: 0.2s;
}

span.FinaD-StatButton{
  margin-left: 3px;
  margin-right: 3px;
  font-size: 30pt;
  font-weight: 200;
  color: #D2D2D2;
  cursor: pointer;
}
span.FinaD-StatButton.FinaD-ActiveButton, span.FinaD-StatButton:hover{
  color: #F9AD00;
}

div.FinaD-IndivNameButton{
  display: inline-block;
  vertical-align: bottom;
  height: 50px;
  width: 50px;
  margin-left: 3px;
  margin-right: 3px;
  border-radius: 25px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.8);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.8);
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.8);
  cursor: pointer;
}
div#FinaD-TotalButton{display: inline-block;  vertical-align: bottom;}
div#FinaD-TotalButton-b, div#FinaD-BelindaButton{background-image: url("../../graphics/portraits/belindaSq.jpg");}
div#FinaD-TotalButton-t, div#FinaD-TizianButton{background-image: url("../../graphics/portraits/tizianSq.jpg");}
div#FinaD-ButtonBar div#FinaD-TotalButton-b{
  margin-left: -16px;
}
div.FinaD-NameButton.FinaD-ActiveButton:not(#FinaD-TotalButton),
div.FinaD-IndivNameButton:hover,
div.FinaD-NameButton.FinaD-ActiveButton div#FinaD-TotalButton-b,
div.FinaD-NameButton.FinaD-ActiveButton div#FinaD-TotalButton-t,
div#FinaD-TotalButton:hover div#FinaD-TotalButton-b,
div#FinaD-TotalButton:hover div#FinaD-TotalButton-t{
  -webkit-box-shadow: 0px 0px 3px 3px var(--TourColor);
  -moz-box-shadow: 0px 0px 3px 3px var(--TourColor);
  box-shadow: 0px 0px 3px 3px var(--TourColor);
}

div.FinaD-ButtonSep-V, div.FinaD-ButtonSep-H{
  background-color: #E7E7E7;
}
div#FinaD-ButtonBar div.FinaD-ButtonSep-V{
  display: inline-block;
  vertical-align: bottom;
  margin-left: 15px;
  margin-right: 15px;
  height: 50px;
  width: 2px;
}
div#FinaD-ButtonBar div.FinaD-ButtonSep-H{
  height: 2px;
  margin-top: 10px;
  margin-bottom: 10px;
}

svg.FinaD-MeanLineBut{
  height: 50px;
  vertical-align: bottom;
  cursor: pointer;
}
svg.FinaD-MeanLineBut rect.bar{fill: #F9AD00;}
/*svg.FinaD-MeanLineBut rect.stageBar{fill: #BFBFBF;}*/
svg.FinaD-MeanLineBut rect.meanLine{fill: #C08500; fill-opacity: 0.25;}
svg.FinaD-MeanLineBut:hover rect.meanLine,
svg.FinaD-MeanLineBut.FinaD-ActiveButton rect.meanLine{fill: #C08500; fill-opacity: 1;}

svg.FinaD-CatIcon, img#FinaD-CatIcon-Expl{
  height: 50px;
  color: #F9AD00;
  vertical-align: bottom;
  border: 2px solid transparent;
  border-radius: 3px;
}
svg.FinaD-CatIcon{
  margin-left: 1px;
  margin-right: 1px;
}
svg.FinaD-CatIcon.preactive{
  border: 2px solid #AA0000;
  cursor: pointer;
}
svg.FinaD-CatIcon.FinaD-ActiveButton{
  color: #AA0000;
}
svg.FinaD-CatIcon.sleep{
  color: #D9D9D9;
}


/* Fixed Tooltip */

div#FinaD-Ttip{
  position: absolute;
  width: 350px;
  /*right: 0px;*/
  left: max(460px, calc(100% - 400px));
  top: 0px;
  opacity: 0;
  transition: 0.2s;
}
td#FinaD-Ttip-Icon{
  vertical-align: top;
  padding-right: 5px;
}

/* ======================================================= ST-TourT */

img.TourT-NighD-img{height: 90px;}
img.TourT-wethD-img{height: 41px;}

td.logo img{
  height: 90px;
}


/* ======================================================================================== */
/*                                       Explanations                                       */
/* ======================================================================================== */

/* ======================================================= Main Wrapper */

/* Specific properties of the Main Page Content Wrapper of Explanations */
/* div.MainWrap-Expl{} >>> See "Main Wrapper, Spacer, Title"! */

/* ======================================================= Main Collapse Div */

div.Expl-OuterWrap{
  max-width: var(--PageWidth);
  max-height: 0;
  text-align: left;
  overflow: hidden;
  transition: max-height 0.2s linear;
  -webkit-box-shadow: inset 0px 0px 8px 2px rgba(0,0,0,0.3);
  -moz-box-shadow:    inset 0px 0px 8px 2px rgba(0,0,0,0.3);
  box-shadow:         inset 0px 0px 8px 2px rgba(0,0,0,0.3);
}

/* A padding in the outer wrapper would cause problems when collapsed */
div.Expl-InnerWrap{margin: 20px;}

/* ======================================================= Collapse Button */

button.Expl-Collapse{
  background-color: white;
  max-width: var(--PageWidth);
  padding: 5px;
  text-align: left;
  color: var(--TourColor);
  font-weight: 500;
  cursor: pointer;
  border: none;
  outline: none;
  font-family: var(--NonSerifFont);
  font-size: 10pt;
  margin-left: 20px;
}

/* Little Arrow */
button.Expl-Collapse svg{
  display: inline-block;
  width: 13px;
  margin-right: 8px;
  transition: 0.2s;
  color: #D2D2D2;
  vertical-align: middle;
  /*border: 1px solid red;*/
}
button.Expl-Collapse:Hover svg{color: var(--TourColor);}
button.Expl-Active svg{
  transform: rotate(180deg);
  color: var(--TourColor);
}

/* ?-Button */
/* For the main properties of this button see class "lowRightButton" in >>> Miscellaneuos */
button.Expl-Collapse:Hover div{color: var(--TourColor);}
button.Expl-Active div{
  background-color: var(--TourColor);
  color: white;
}
button.Expl-Active:Hover div{
  background-color: var(--TourColor);
  color: white;
}

/* ======================================================= Spacer */

div.Expl-Spacer{
  height: 20px;
}
div.Expl-HalfSpacer{
  height: 10px;
}
div.Expl-QuarterSpacer{
  height: 5px;
}

/* ======================================================= Paragraphs */

div.Expl-InnerWrap p{
  text-align: justify;
}
p.smallTitle{
  font-weight: 500;
  color: var(--TourColor);
}
p.Term, span.Term{
  font-weight: 500;
}
p.legal{
  color: #AAAAAA;
  font-size: 8pt;
}
p.legal a{color: #888888;}
p.indent{margin-left: 20px;}
p.explIcons{margin-left: 20px;}
p.explIcons img{margin-right: 8px; width: 35px;}
p.unrec_countries{color: #AA0000;}

/* ======================================================= Lists */

div.Expl-InnerWrap ul{
  margin-left: 20px;
  text-align: justify;
}

/* ======================================================================================== */
/*                                        Miscellaneuos                                     */
/* ======================================================================================== */

/* ======================================================= Weather Icons */

/* this affects ALL icons (in statistic tables, legend tables, explanation) */

img.weatherIcon, img.windIcon, img.tempIcon,
td.weatherIcon img, td.windIcon img, td.tempIcon img{
  height: 20px;
  vertical-align: middle;
  margin-top: 0px;
  margin-bottom: 0px;
}
img.tempIcon, td.tempIcon img{
  margin-left: 5px;
  margin-right: 5px;
}

/* ======================================================= Flags */

/* Small flags */
img.flag, div.sec-DailT td.flag img, table#DailT-cmpl td.flag img,
div.sec-StgeT td.flag img{
  height: 16px !important;
  margin-top: 2px;
  margin-bottom: 0px;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
}
img.Flag, div.sec-DailT td.flag img, table#DailT-cmpl td.flag img{
  margin-left: 10px;
  margin-right: 10px;
}
div.sec-StgeT td.flag img{
  margin-right: 5px;
}

/* Big flags */
img.BigFlag, div.sec-CounT td.flag img, table#CounT-cmpl td.flag img{
  height: 50px !important;
  margin: 2px;
  -webkit-box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.4);
  box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.4);
}

/* ======================================================= Lower-Right Buttons */

div.lowRightButton{
  display: inline-block;
  width: 20px;
  height: 19px;
  padding-top: 1px;
  background-color: white;
  color: #D2D2D2;
  font-size: 12pt;
  text-align: center;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  transition: 0.2s;
  vertical-align: middle;
  cursor: pointer;
}
div.lowRightButton:Hover{
  color: var(--TourColor);
}
div.lowRightButton-Active{
  color: white;
  background-color: var(--TourColor);
}
div.lowRightButton-Active:Hover{
  color: white;
  background-color: var(--TourColor);
}

div.lowRightButton svg{
  max-width: 18px;
  max-height: 18px;
}

/* For the Hover Properties of the ?-Buttons for expanding the
   explanations see >>> Explanations */

/* ======================================================= Widen-Wrapper Button */

@media only screen and (max-width: 1455px) {
	div.widenWrapButton{display: none;}
}

/* ======================================================= Switch Buttons */

/* Switch styles that are currently used:
	S01: alle Tage - nur Fahrtage
	S02: alle - Fahrtage
	S03: all Days - only Riding Days
	S04: all - Riding Days
*/

div.switchWrap-S01, div.switchWrap-S02,
div.switchWrap-S03, div.switchWrap-S04{
  position: relative;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  height: 12px;
  border: 1px solid #BFBFBF;
  cursor: pointer;
}

div.switchWrap-S01{width: 115px;}
div.switchWrap-S02{width: 72px;}
div.switchWrap-S03{width: 124px;}
div.switchWrap-S04{width: 76px;}

div.switchMarker{
  display: block;
  position: absolute;
  background-color: var(--TourColor);
  top: -2px;
  height: 16px;
  /*border-radius: 1px;*/
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
  transition: 0.2s;
}

div.switchText{
  display: block;
  position: absolute;
  left: auto;
  right: auto;
  text-align: center;
  transition: 0.2s;
  font-size: 8pt;
  font-weight: normal;
}
div.switchTextActive{color: white;}
div.switchTextInactive{color: #BFBFBF;}

/* Individual Switch Positions: */

div.switch-S01-P0{width: 49px; left: -1px;}
div.switch-S02-P0{width: 22px; left: -1px;}
div.switch-S03-P0{width: 43px; left: -1px;}
div.switch-S04-P0{width: 18px; left: -1px;}
div.switch-S05-P0{width: 70px; left: -1px;}
div.switch-S06-P0{width: 18px; left: -1px;}

div.switch-S01-P1{width: 66px; left: 50px;}
div.switch-S02-P1{width: 51px; left: 23px;}
div.switch-S03-P1{width: 81px; left: 44px;}
div.switch-S04-P1{width: 58px; left: 19px;}