/* :::::::::::::::::::::::::::::::::::
 * Author:        Damiano Barboni <barboni@meeo.it>
 * Description:   Temporal bar
 * Changelog:     Thu Apr  7 15:32:26 CEST 2016
 *                First Version
 * ::::::::::::::::::::::::::::::::::: */

 #temporal_bar {
  /*position: absolute;*/
  /*height: 10%;*/
  bottom: 0em;
  background-color: transparent;
  /*color: rgb(51,51,51);*/
  color: rgb(255,255,255);
  width: 55%;
  z-index: 10;
  font-size: .88rem;
 }

#temporal_bar .temporal_bar-divider {
  border-style: solid;
  border-color: #fff;
  border-radius: 0px 30px 30px 0px;
}

#temporal_bar .temporal_bar-products {
  color: #fff;
  display: inline-flex;
  max-width: 100%;
  overflow-x: hidden;
  margin-bottom: 2px;
}

#temporal_bar .temporal_bar-product {
  display: inline-flex;
  cursor: pointer;
  padding: 0px 15px 0px 8px;
  width: fit-content;
  width: -moz-fit-content;
  margin-left: 0.7em;
  justify-content: space-between;
}

#temporal_bar .temporal_bar-product.selected-product {
  background-color: #212529;
  border-radius: 15px;
}

#temporal_bar .temporal_bar-product .temporal_bar-product-color {
  display: inline;
  height: .8rem;
  width: .8rem;
  background-color: unset;
  border: 1px solid #fff;
  margin-top: .25rem;
}

#temporal_bar .temporal_bar-product .temporal_bar-product-name {
  display: inline-flex;
  white-space: pre;
}

#temporal_bar .temporal_bar-selector-date {
  padding: 0em .5em 0em .5em;
  border-right-width: 2px;
  border-right-color: #fff;
  border-right-style: solid;
}

#temporal_bar .temporal_bar-selector-timeframe {
  margin-left: .5em;
}

#temporal_bar .temporal_bar-selector-date,
#temporal_bar .temporal_bar-selector-timeframe {
  display: inline-block;
  color: #fff;
  padding-bottom: 3px;
}

#temporal_bar .temporal_bar-selector-timeframe-year,
#temporal_bar .temporal_bar-selector-timeframe-month,
#temporal_bar .temporal_bar-selector-timeframe-day {
  display: inline-block;
  cursor: pointer;
  padding: 0px 14px 0px 14px;
}

#temporal_bar .temporal_bar-selector-timeframe-year.selected-timeframe,
#temporal_bar .temporal_bar-selector-timeframe-month.selected-timeframe,
#temporal_bar .temporal_bar-selector-timeframe-day.selected-timeframe {
  background-color: #212529;
  border-radius: 15px;
}

#temporal_bar .temporal_bar-calendar{
  text-align: center;
}

#temporal_bar .temporal_bar-calendar .temporal_bar-row {
  height: 100%;
  width: 100%;
}

#temporal_bar .temporal_bar-calendar .temporal_bar-row > div {
  display: inline-flex;
  vertical-align: middle;
}

#temporal_bar .temporal_bar-scroll-left {
  color: #fff;
  width: 1%;
  height: 3em;
  margin-right: 4px;
  cursor: pointer;
}

#temporal_bar .temporal_bar-scroll-right {
  color: #fff;
  width: 1%;
  height: 3em;
  margin-left: 4px;
  cursor: pointer;
}

#temporal_bar .temporal_bar-scroll-left > span,
#temporal_bar .temporal_bar-scroll-right > span {
  margin-top: .5rem;
}

#temporal_bar .temporal_bar-row-content {
  overflow-x: hidden;
  height: 100%;
  width: 96%;
  justify-content: space-between;
}

#temporal_bar .temporal_bar-row-content.fill-row {
  width: 100%;
}

#temporal_bar .y_element_legend,
#temporal_bar .m_element_legend,
#temporal_bar .d_element_legend {
  height: 20%;
}

#temporal_bar .y_element_legend > div,
#temporal_bar .m_element_legend > div,
#temporal_bar .d_element_legend > div {
  display: inline-block;
  vertical-align: top;
}

#temporal_bar .y_element,
#temporal_bar .m_element,
#temporal_bar .d_element {
  padding: .5rem;
  cursor: not-allowed;
}

#temporal_bar table td{
  text-align: center;
}

#temporal_bar .enabled{
  cursor: pointer;
  background: transparent;
  color: rgb(255,255,255);
}
#temporal_bar .enabled:hover{
  /*font-weight: bold;*/
  text-shadow: #343a40 -1px 0px, #343a40 0px 1px, #343a40 1px 0px, #343a40 0px -1px;
}

#temporal_bar .selected{
  font-weight: bolder;
}

#temporal_bar .loaded{
  font-weight: bolder;
  color: #343a40;
  text-shadow: #f8f9fa -1px 0px, #f8f9fa 0px 1px, #f8f9fa 1px 0px, #f8f9fa 0px -1px;
}

#temporal_bar .loaded:hover{
  font-weight: bolder;
}

@media (max-width: 1200px) {
  #temporal_bar {
    width: 50vw;
    bottom: 0;
  }

  #temporal_bar .temporal_bar-row-content {
    width: 44vw;
  }
}

@media (max-width:992px) {
  #temporal_bar {
    width: 78vw;
    bottom: 0;
  }

  #temporal_bar .temporal_bar-row-content {
    width: 71.5vw;
  }
}

@media (max-width:768px) {
  #temporal_bar {
    width: 88vw;
    bottom: 0;
  }

  #temporal_bar .temporal_bar-row-content {
    width: 80vw;
  }
}