/*** Altes CSS ***/

body {
  padding:0;
  margin:0;
  overflow:hidden
}

#feh {
  font-family: Arial, Verdana, sans-serif;
  font-size:1em;
  color:#444;
  background:#fff;
}

/*** Headline ***/
#feh .feh-headline {
  font-size: 1.6em;
  font-weight: bold
}

/*** Headline ***/
#feh .feh-headline2 {
  font-size: 1.1em;
  font-weight: bold
}

#feh .feh_clear {
  clear:both;
}

#feh #feh_news div.feh_archiv {
  margin:10px 0 0 0
}

/* Styling für den Newsarchiv-Button */
#feh #feh_news .news-archive-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1.2em;
  color: #fff;
  border: none;
  border-radius: 0.25em;
  text-decoration: none;
  cursor: pointer;
  background-color: #999999;
}

#feh #feh_charts #feh_menu {
  margin:0;
  background-color:transparent;
}

#feh #dataDifferentPeriods .loader,
#feh #dataParallelYears .loader,
#feh #chart_container .loader,
#feh .chart_container .loader {
  background-image: url("/images/loading.gif");
  background-repeat: no-repeat;
  background-position:50% 50%;
  height: 100%;
  display:none;
}

#feh #feh_charts .chart_container {
  /*min-width: 300px;*/ 
  height: 450px; 
  margin: 0 auto
}

#feh #feh_charts #dataParallelYears .highcharts-tooltip {
  width:140px;
}

#feh #feh_news .feh_trennlinie_news:last-of-type {
  display: none; 
}

/* Styling für das Dropdown-Container-Element */
#feh #feh_dropdown_chart_selection, 
#feh #feh_dropdown_period_selection {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
  margin-top: 10px;
}

/* Styling für das Label-Element */
#feh #feh_dropdown_chart_selection label, 
#feh #feh_dropdown_period_selection label {
  display: block;
  margin-bottom: 5px;
  font-size: 1.1em;
  position: absolute;
  background-color: #fff;
  top: -12px;
  left: 8px;
  padding-left: 10px;
  padding-right: 10px;
}

/* Styling für das Select-Element */
#feh #feh_dropdown_chart_selection select, 
#feh #feh_dropdown_period_selection select {
  width: 100%;
  padding: 10px 16px;
  font-size: 1.1em;
  background-color: #fff;
  border: 1px solid #444;
  border-radius: 0.25em;
  appearance: none; /* Einheitliche Darstellung für alle Browser (NEU) */
}
      
/*** Neues CSS ***/

/*** Body im iFrame; hierauf referenzieren Container-Queries ***/
.feh-body {
  container-type: inline-size;
  margin-right: 1px
}

/*** Row ***/
#feh .feh-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/*** Cols für XS ***/
#feh .feh-col-1 { flex: 0 0 8.33%; max-width: 8.33%; }
#feh .feh-col-2 { flex: 0 0 16.66%; max-width: 16.66%; }
#feh .feh-col-3 { flex: 0 0 25%; max-width: 25%; }
#feh .feh-col-4 { flex: 0 0 33.33%; max-width: 33.33%; }
#feh .feh-col-5 { flex: 0 0 41.66%; max-width: 41.66%; }
#feh .feh-col-6 { flex: 0 0 50%; max-width: 50%; }
#feh .feh-col-7 { flex: 0 0 58.33%; max-width: 58.33%; }
#feh .feh-col-8 { flex: 0 0 66.66%; max-width: 66.66%; }
#feh .feh-col-9 { flex: 0 0 75%; max-width: 75%; }
#feh .feh-col-10 { flex: 0 0 83.33%; max-width: 83.33%; }
#feh .feh-col-11 { flex: 0 0 91.66%; max-width: 91.66%; }
#feh .feh-col-12 { flex: 0 0 100%; max-width: 100%; }

/*** Cols für SM ***/
@container (min-width: 576px) {
  #feh .feh-col-sm-1 { flex: 0 0 8.33%; max-width: 8.33%; }
  #feh .feh-col-sm-2 { flex: 0 0 16.66%; max-width: 16.66%; }
  #feh .feh-col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  #feh .feh-col-sm-4 { flex: 0 0 33.33%; max-width: 33.33%; }
  #feh .feh-col-sm-5 { flex: 0 0 41.66%; max-width: 41.66%; }
  #feh .feh-col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  #feh .feh-col-sm-7 { flex: 0 0 58.33%; max-width: 58.33%; }
  #feh .feh-col-sm-8 { flex: 0 0 66.66%; max-width: 66.66%; }
  #feh .feh-col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  #feh .feh-col-sm-10 { flex: 0 0 83.33%; max-width: 83.33%; }
  #feh .feh-col-sm-11 { flex: 0 0 91.66%; max-width: 91.66%; }
  #feh .feh-col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/*** Cols für MD ***/
@container (min-width: 768px) {
  #feh .feh-col-md-1 { flex: 0 0 8.33%; max-width: 8.33%; }
  #feh .feh-col-md-2 { flex: 0 0 16.66%; max-width: 16.66%; }
  #feh .feh-col-md-3 { flex: 0 0 25%; max-width: 25%; }
  #feh .feh-col-md-4 { flex: 0 0 33.33%; max-width: 33.33%; }
  #feh .feh-col-md-5 { flex: 0 0 41.66%; max-width: 41.66%; }
  #feh .feh-col-md-6 { flex: 0 0 50%; max-width: 50%; }
  #feh .feh-col-md-7 { flex: 0 0 58.33%; max-width: 58.33%; }
  #feh .feh-col-md-8 { flex: 0 0 66.66%; max-width: 66.66%; }
  #feh .feh-col-md-9 { flex: 0 0 75%; max-width: 75%; }
  #feh .feh-col-md-10 { flex: 0 0 83.33%; max-width: 83.33%; }
  #feh .feh-col-md-11 { flex: 0 0 91.66%; max-width: 91.66%; }
  #feh .feh-col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/*** Cols für LG ***/
@container (min-width: 992px) {
  #feh .feh-col-lg-1 { flex: 0 0 8.33%; max-width: 8.33%; }
  #feh .feh-col-lg-2 { flex: 0 0 16.66%; max-width: 16.66%; }
  #feh .feh-col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  #feh .feh-col-lg-4 { flex: 0 0 33.33%; max-width: 33.33%; }
  #feh .feh-col-lg-5 { flex: 0 0 41.66%; max-width: 41.66%; }
  #feh .feh-col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  #feh .feh-col-lg-7 { flex: 0 0 58.33%; max-width: 58.33%; }
  #feh .feh-col-lg-8 { flex: 0 0 66.66%; max-width: 66.66%; }
  #feh .feh-col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  #feh .feh-col-lg-10 { flex: 0 0 83.33%; max-width: 83.33%; }
  #feh .feh-col-lg-11 { flex: 0 0 91.66%; max-width: 91.66%; }
  #feh .feh-col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/*** Cols für XL ***/
@container (min-width: 1200px) {
  #feh .feh-col-xl-1 { flex: 0 0 8.33%; max-width: 8.33%; }
  #feh .feh-col-xl-2 { flex: 0 0 16.66%; max-width: 16.66%; }
  #feh .feh-col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  #feh .feh-col-xl-4 { flex: 0 0 33.33%; max-width: 33.33%; }
  #feh .feh-col-xl-5 { flex: 0 0 41.66%; max-width: 41.66%; }
  #feh .feh-col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  #feh .feh-col-xl-7 { flex: 0 0 58.33%; max-width: 58.33%; }
  #feh .feh-col-xl-8 { flex: 0 0 66.66%; max-width: 66.66%; }
  #feh .feh-col-xl-9 { flex: 0 0 75%; max-width: 75%; }
  #feh .feh-col-xl-10 { flex: 0 0 83.33%; max-width: 83.33%; }
  #feh .feh-col-xl-11 { flex: 0 0 91.66%; max-width: 91.66%; }
  #feh .feh-col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/*** Text-Align für xs ***/
#feh .feh-text-left { text-align: left; }
#feh .feh-text-center { text-align: center; }
#feh .feh-text-right { text-align: right; }

/*** Text-Align für sm ***/
@container (min-width: 576px) {
  #feh .feh-text-sm-left { text-align: left; }
  #feh .feh-text-sm-center { text-align: center; }
  #feh .feh-text-sm-right { text-align: right; }
}

/*** Text-Align für md ***/
@container (min-width: 768px) {
  #feh .feh-text-md-left { text-align: left; }
  #feh .feh-text-md-center { text-align: center; }
  #feh .feh-text-md-right { text-align: right; }
}

/*** Text-Align für lg ***/
@container (min-width: 992px) {
  #feh .feh-text-lg-left { text-align: left; }
  #feh .feh-text-lg-center { text-align: center; }
  #feh .feh-text-lg-right { text-align: right; }
}

/*** Text-Align für xl ***/
@container (min-width: 1200px) {
  #feh .feh-text-xl-left { text-align: left; }
  #feh .feh-text-xl-center { text-align: center; }
  #feh .feh-text-xl-right { text-align: right; }
}

/*** Margin für xs ***/
#feh .feh-m-0 { margin: 0 !important; }
#feh .feh-mt-0 { margin-top: 0 !important; }
#feh .feh-mr-0 { margin-right: 0 !important; }
#feh .feh-mb-0 { margin-bottom: 0 !important; }
#feh .feh-ml-0 { margin-left: 0 !important; }

#feh .feh-m-1 { margin: 0.25em !important; }
#feh .feh-mt-1 { margin-top: 0.25em !important; }
#feh .feh-mr-1 { margin-right: 0.25em !important; }
#feh .feh-mb-1 { margin-bottom: 0.25em !important; }
#feh .feh-ml-1 { margin-left: 0.25em !important; }

#feh .feh-m-2 { margin: 0.5em !important; }
#feh .feh-mt-2 { margin-top: 0.5em !important; }
#feh .feh-mr-2 { margin-right: 0.5em !important; }
#feh .feh-mb-2 { margin-bottom: 0.5em !important; }
#feh .feh-ml-2 { margin-left: 0.5em !important; }

#feh .feh-m-3 { margin: 1em !important; }
#feh .feh-mt-3 { margin-top: 1em !important; }
#feh .feh-mr-3 { margin-right: 1em !important; }
#feh .feh-mb-3 { margin-bottom: 1em !important; }
#feh .feh-ml-3 { margin-left: 1em !important; }

#feh .feh-m-4 { margin: 1.5em !important; }
#feh .feh-mt-4 { margin-top: 1.5em !important; }
#feh .feh-mr-4 { margin-right: 1.5em !important; }
#feh .feh-mb-4 { margin-bottom: 1.5em !important; }
#feh .feh-ml-4 { margin-left: 1.5em !important; }

#feh .feh-m-5 { margin: 3em !important; }
#feh .feh-mt-5 { margin-top: 3em !important; }
#feh .feh-mr-5 { margin-right: 3em !important; }
#feh .feh-mb-5 { margin-bottom: 3em !important; }
#feh .feh-ml-5 { margin-left: 3em !important; }

/*** Margin für md ***/
@container (min-width: 768px) {
  #feh .feh-m-md-0 { margin: 0 !important; }
  #feh .feh-mt-md-0 { margin-top: 0 !important; }
  #feh .feh-mr-md-0 { margin-right: 0 !important; }
  #feh .feh-mb-md-0 { margin-bottom: 0 !important; }
  #feh .feh-ml-md-0 { margin-left: 0 !important; }
  
  #feh .feh-m-md-1 { margin: 0.25em !important; }
  #feh .feh-mt-md-1 { margin-top: 0.25em !important; }
  #feh .feh-mr-md-1 { margin-right: 0.25em !important; }
  #feh .feh-mb-md-1 { margin-bottom: 0.25em !important; }
  #feh .feh-ml-md-1 { margin-left: 0.25em !important; }
  
  #feh .feh-m-md-2 { margin: 0.5em !important; }
  #feh .feh-mt-md-2 { margin-top: 0.5em !important; }
  #feh .feh-mr-md-2 { margin-right: 0.5em !important; }
  #feh .feh-mb-md-2 { margin-bottom: 0.5em !important; }
  #feh .feh-ml-md-2 { margin-left: 0.5em !important; }
  
  #feh .feh-m-md-3 { margin: 1em !important; }
  #feh .feh-mt-md-3 { margin-top: 1em !important; }
  #feh .feh-mr-md-3 { margin-right: 1em !important; }
  #feh .feh-mb-md-3 { margin-bottom: 1em !important; }
  #feh .feh-ml-md-3 { margin-left: 1em !important; }
  
  #feh .feh-m-md-4 { margin: 1.5em !important; }
  #feh .feh-mt-md-4 { margin-top: 1.5em !important; }
  #feh .feh-mr-md-4 { margin-right: 1.5em !important; }
  #feh .feh-mb-md-4 { margin-bottom: 1.5em !important; }
  #feh .feh-ml-md-4 { margin-left: 1.5em !important; }
  
  #feh .feh-m-md-5 { margin: 3em !important; }
  #feh .feh-mt-md-5 { margin-top: 3em !important; }
  #feh .feh-mr-md-5 { margin-right: 3em !important; }
  #feh .feh-mb-md-5 { margin-bottom: 3em !important; }
  #feh .feh-ml-md-5 { margin-left: 3em !important; }
}

/*** Padding für xs ***/
#feh .feh-p-0 { padding: 0 !important; }
#feh .feh-pt-0 { padding-top: 0 !important; }
#feh .feh-pr-0 { padding-right: 0 !important; }
#feh .feh-pb-0 { padding-bottom: 0 !important; }
#feh .feh-pl-0 { padding-left: 0 !important; }

#feh .feh-p-1 { padding: 0.25em !important; }
#feh .feh-pt-1 { padding-top: 0.25em !important; }
#feh .feh-pr-1 { padding-right: 0.25em !important; }
#feh .feh-pb-1 { padding-bottom: 0.25em !important; }
#feh .feh-pl-1 { padding-left: 0.25em !important; }

#feh .feh-p-2 { padding: 0.5em !important; }
#feh .feh-pt-2 { padding-top: 0.5em !important; }
#feh .feh-pr-2 { padding-right: 0.5em !important; }
#feh .feh-pb-2 { padding-bottom: 0.5em !important; }
#feh .feh-pl-2 { padding-left: 0.5em !important; }

#feh .feh-p-3 { padding: 1em !important; }
#feh .feh-pt-3 { padding-top: 1em !important; }
#feh .feh-pr-3 { padding-right: 1em !important; }
#feh .feh-pb-3 { padding-bottom: 1em !important; }
#feh .feh-pl-3 { padding-left: 1em !important; }

#feh .feh-p-4 { padding: 1.5em !important; }
#feh .feh-pt-4 { padding-top: 1.5em !important; }
#feh .feh-pr-4 { padding-right: 1.5em !important; }
#feh .feh-pb-4 { padding-bottom: 1.5em !important; }
#feh .feh-pl-4 { padding-left: 1.5em !important; }

#feh .feh-p-5 { padding: 3em !important; }
#feh .feh-pt-5 { padding-top: 3em !important; }
#feh .feh-pr-5 { padding-right: 3em !important; }
#feh .feh-pb-5 { padding-bottom: 3em !important; }
#feh .feh-pl-5 { padding-left: 3em !important; }

/*** Padding für md ***/
@container (min-width: 768px) {
  #feh .feh-p-md-0 { padding: 0 !important; }
  #feh .feh-pt-md-0 { padding-top: 0 !important; }
  #feh .feh-pr-md-0 { padding-right: 0 !important; }
  #feh .feh-pb-md-0 { padding-bottom: 0 !important; }
  #feh .feh-pl-md-0 { padding-left: 0 !important; }
  
  #feh .feh-p-md-1 { padding: 0.25em !important; }
  #feh .feh-pt-md-1 { padding-top: 0.25em !important; }
  #feh .feh-pr-md-1 { padding-right: 0.25em !important; }
  #feh .feh-pb-md-1 { padding-bottom: 0.25em !important; }
  #feh .feh-pl-md-1 { padding-left: 0.25em !important; }
  
  #feh .feh-p-md-2 { padding: 0.5em !important; }
  #feh .feh-pt-md-2 { padding-top: 0.5em !important; }
  #feh .feh-pr-md-2 { padding-right: 0.5em !important; }
  #feh .feh-pb-md-2 { padding-bottom: 0.5em !important; }
  #feh .feh-pl-md-2 { padding-left: 0.5em !important; }
  
  #feh .feh-p-md-3 { padding: 1em !important; }
  #feh .feh-pt-md-3 { padding-top: 1em !important; }
  #feh .feh-pr-md-3 { padding-right: 1em !important; }
  #feh .feh-pb-md-3 { padding-bottom: 1em !important; }
  #feh .feh-pl-md-3 { padding-left: 1em !important; }
  
  #feh .feh-p-md-4 { padding: 1.5em !important; }
  #feh .feh-pt-md-4 { padding-top: 1.5em !important; }
  #feh .feh-pr-md-4 { padding-right: 1.5em !important; }
  #feh .feh-pb-md-4 { padding-bottom: 1.5em !important; }
  #feh .feh-pl-md-4 { padding-left: 1.5em !important; }
  
  #feh .feh-p-md-5 { padding: 3em !important; }
  #feh .feh-pt-md-5 { padding-top: 3em !important; }
  #feh .feh-pr-md-5 { padding-right: 3em !important; }
  #feh .feh-pb-md-5 { padding-bottom: 3em !important; }
  #feh .feh-pl-md-5 { padding-left: 3em !important; }
}

/*** Card ***/
#feh .feh-card {
  border-radius: 0.25em;
  border: 1px solid #444;
  padding: 1em;
  margin: 1em 0;
}

/*** Error Box und Error Text ***/
#feh .feh-error-box {
  border: 1px solid #b00;
  background-color: #bb000020;
  border-radius: 0.25em;
  margin-bottom: 1em;
  padding: 1em;	
}

#feh .feh-error-text {
  color: #444;
  font-weight: normal;
}

/*** Standard-Text ***/
#feh .feh-text {
  margin: 1em 0;
  font-weight: normal;
  color: #444
}

#feh .feh-text-small {
  font-weight: normal;
  color: #444;
  font-size:1em;
}

/*** Styles für Preisfaktoren und Preistrend ***/
.feh_heizoel_preis .feh_icon_right-big,
.feh_heizoel_preis .feh_icon_up-big,
.feh_heizoel_preis .feh_icon_down-big {
  font-size: 15px;
}

.feh_heizoel_preis .feh_icon_big .feh_icon_right-big,
.feh_heizoel_preis .feh_icon_big .feh_icon_up-big,
.feh_heizoel_preis .feh_icon_big .feh_icon_down-big {
  font-size: 30px;
}

.feh_heizoel_preis .feh_icon_right-big {
  color: #ffa41b;
}

.feh_heizoel_preis .feh_icon_up-big {
  color: #b00;
}

.feh_heizoel_preis .feh_icon_down-big {
  color: #396;
}

.feh_heizoel_preis .feh_date {
  font-size: 0.9em;
  color: #666;
  line-height: 1.7em;
}

@container (min-width: 768px) {
  .feh_preistrends_class, .feh_preisfaktoren_class {
    border-left: 1px solid #ccc;
    padding-left: 1em;
    height: 100%;
    margin-left: 1em
  }
}