.trading .data-container {
  display: flex;
  margin-left: 3%;
  margin-right: 0 !important;
  width: 97%;
}

.trading .panel-right-container {
  width: 315px !important;
  height: 452px !important;
  min-width: 315px !important;
  padding-left: 0;
  margin-left: 40px;
  padding-top: 0 !important;
}

.trading .max-border {
  width: 94% !important;
}

.trading .item-stacked-labels {
  cursor: pointer;
}

.trading .stacked-bars {
  cursor: pointer;
}

.trading [role=tooltip] {
  top: 40px !important;
}

.trading [role=tooltip] .arrow::before {
  border-top-color: #065D78 !important;
}

.trading .tooltip-inner {
  border-radius: 40px !important;
  background-color: #065D78 !important;
}

.trading [role=tooltip] .tooltip-container {
  display: flex;
  justify-content: space-around;
  width: 75px !important;
}

.trading .label-close {
  height: 15px;
}

.trading .label-close img{
  height: 15px;
  margin-right: 10px;
  vertical-align: inherit;
}


/* Update Header css on desktop */
.trading .value-container > div > div:first-child {
  font-weight: bold;
  display: flex;
  align-items: flex-end;
}

.trading .value-container > div > div > div:last-child {
  font-family: NunitoSansSemiBold;
  font-size: 12px;
  line-height: 27px;
}


/* Hide pourcent on desktop */
.trading .value-container .pourcent {
  display: none;
}


.trading .ui-state-active-period-td-normal, 
.trading .ui-state-active-period-td-start, 
.trading .ui-state-active-period-td-end, 
.trading .ui-state-active-period-td-monday, 
.trading .ui-state-active-period-td-sunday {
  background: #00ceff !important;
}

.trading .ui-state-active-period-td-start, 
.trading .ui-state-active-period-td-monday {
  border-radius: 50% 0 0 50%;
}

.trading .ui-state-active-period-td-end, 
.trading .ui-state-active-period-td-sunday {
  border-radius: 0 50% 50% 0;
}

.trading .ui-state-active-period-td-normal a {
  background: #00ceff !important;
  font-weight: normal;
  color: #ffffff !important;
  text-align: center;
  border: none !important;
}

.trading .ui-state-active-period-td-start a, 
.trading .ui-state-active-period-td-monday a, 
.trading .ui-state-active-period-td-end a, 
.trading .ui-state-active-period-td-sunday a {
  background: transparent !important;
  font-weight: normal;
  color: #ffffff !important;
  text-align: center;
  border: none !important;
}

.trading .ui-state-active-period-td-start a, 
.trading .ui-state-active-period-td-end a {
  border: solid 2px #0c3949 !important;
  border-radius: 50%;
}

.trading .line-two .left-panel {
  flex-flow: wrap;
}

.trading .legend-button {
  min-width: 155px;
}

.trading .legend-date {
  padding-left: 0;
}

.trading #legend-container {
  margin-top: 11px;
}

.trading .legend-graph {
   margin-left: 0;
}

.trading .label-bullet {
  height: 15px;
  width: 15px;
  min-width: 15px;
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trading g[id^=item] {
  cursor: pointer;
}

.trading .icon-trading {
  cursor: pointer;
  padding-top: 40px;
  padding-bottom: 15px;
  padding-right: 20px;
  border-bottom: 5px solid transparent;
  display: flex;
  flex-flow: column;
  cursor: pointer;
}

.trading .icon-trading .label-bullet {
  background-repeat: no-repeat !important;
  transform: rotate(0deg);
}

.trading .icon-trading .label-bullet.import {
  transform: rotate(180deg);
}


/* Carte */
.trading .map-container{
  background-image: url("/themes/swi/images/components/graph/map.png");
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 100%;
  width: 100%;
}

.trading .map-container div.image-container {
  background-image: url('/themes/swi/images/components/graph/arrow-export-direction-map.svg');
  height: 30px;
  width: 30px;
}

.trading .map-container div.image-container.import {
  background-image: url('/themes/swi/images/components/graph/arrow-import-direction-map.svg');
}

.trading .map-info.visibility-reduced {
  opacity: 0.2;
}

.trading .map-info .value-country-container span {
  font-size: 11px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #ffffff;
  padding: 3px;
  opacity: 0.5;
  border-radius: 2px;
  background-color: #15252c;
}

.trading .map-container .map-info {
  position: relative;
}

.trading .map-container .map-info .image-container {
  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 25%);
  border-radius: 50%;
}

.trading .map-container .map-info .arrow-country-container {
  cursor: pointer;
}

.trading #trading_GB{
  top: 70px;
  left: 86px;
  width: 100px;
  height: 70px;
}

.trading #trading_GB div {
  margin-left: 14px;
  margin-top: 23px;
}

.trading #trading_GB .image-container {
  transform: rotate(333deg);
}

.trading #trading_GB .image-container.import {
  transform: rotate(162deg);
}


.trading #trading_DB {
  top: 42px;
  left: 66%;
  width: 100px;
  height: 60px;
}

.trading #trading_DB .value-country-container{
  margin-left: 30px;
}

.trading #trading_DB .image-container {
  transform: rotate(40deg);
}

.trading #trading_DB .image-container.import {
  transform: rotate(210deg);
}

.trading #trading_CH {
  top: 79px;
  left: 213px;
  width: 125px;
  height: 30px;
  display: flex;
  flex-direction: row;
}

.trading #trading_CH .value-country-container {
  margin-left: 6px;
}

.trading #trading_CH .image-container {
  transform: rotate(90deg);
}

.trading #trading_CH .image-container.import {
  transform: rotate(-90deg);
}

.trading #trading_IT {
  top: 87px;
  left: 214px;
  width: 120px;
  height: 30px;
  display: flex;
}

.trading #trading_IT .value-country-container {
  margin-left: 6px;
}

.trading #trading_IT div .image-container {
  margin-right: 10px;
}

.trading #trading_IT .image-container {
  transform: rotate(90deg)
}

.trading #trading_IT .image-container.import {
  transform: rotate(270deg)
}


.trading #trading_ES {
  top: 55px;
  left: 66px;
  width: 100px;
  height: 55px;
}

.trading #trading_ES .arrow-country-container {
  margin-left: 33px;
  margin-top: 43px;
}

.trading #trading_ES .image-container {
  transform: rotate(222deg)
}

.trading #trading_ES .image-container.import {
  transform: rotate(25deg)
}


/* to center tooltip in graph*/
.trading .chartjs-tooltip {
  margin-left: -3px;
}


.trading #total-container {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #15252c;
  opacity: 0.7;
}

.trading #total-container > div{
  padding: 0 19px;
}

.trading.container-visual-xl .legend-graph .icon .item-container {
    display: flex;
    align-items: center;
    padding-bottom: 7px;
}


/* graph lines */
.trading .top-line,
.trading .bottom-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: grey;
}

.trading .top-line {
  top: 35px;
}

.trading .bottom-line {
  bottom: 35px;
}

.trading.container-visual-xl .legend-graph .icon .value-container .render-value .value {
    font-size: 25px;
}

.trading.container-visual-xl .legend-graph .icon .value-container .render-value .unit {
    line-height: 20px;
}

.trading.container-visual-xl .data-container .main-container .min-border {
    bottom: 2em;
}


/* compare */
.trading.container-visual-xl.compare-display .legend-container-top {
    margin: 0 !important;
}

.trading.container-visual-xl.compare-display .legend-container-top .legend-date {
  flex: 0 0 60%;
  max-width: 60%;
}

.trading.container-visual-xl.compare-display .legend-container-top .legend-button {
  padding: 0 !important;
  flex: 0 0 40%;
  max-width: 40%;
}

.trading.container-visual-xl.compare-display .legend-graph .icon .label-bullet {
  background-size: contain !important;
  border-radius: 0 !important;
}

.trading.container-visual-xl.compare-display .icon-trading {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 10px;
}

.trading.container-visual-xl.compare-display .legend-graph .icon .label-container {
    font-size: 13px;
}

.trading.container-visual-xl.compare-display .legend-graph .icon .item-container {
    padding-bottom: 0;
}

.trading.container-visual-xl.compare-display .legend-container-top .legend-button a.min-button {
  margin-right: 0;
}

.trading.container-visual-xl.compare-display .legend-graph .icon .value-container .render-value .value {
  font-size: 15px;
}

.trading.container-visual-xl.compare-display .legend-graph .icon .value-container .render-value .unit {
    font-size: 10px;
}

.trading.container-visual-xl.compare-display .data-container {
  flex-direction: row !important;                                                     
  flex-wrap: nowrap;
}

@media only screen and (max-width: 1200px) {
  .trading .container-visual-xl {
    flex-wrap: wrap;
  }
}

/* Mobile */
@media only screen and (max-width: 768px) {
  .trading .legend-button {
    min-width: unset;
  }

  .trading .panel-right-container {
    padding: 0;
    min-width: 0 !important;
    margin: auto !important;
  }

  .trading .panel-right-container .map-data-change svg {
    width: 100% !important;
  }

  .trading .chart-legend {
    display: block !important;
    padding-bottom: 24px;
  }


  .trading .chart-legend .right-panel, .chart-legend .left-panel {
    display: block !important;
  }

  .trading #chart-legend .right-panel {
    padding-top: 54px;
  }

  .trading .data-container {
    display: block !important;
    margin-left: 0;
    width: 100%;
  }

  .trading .icon-trading {
    display: flex !important;
    flex-direction: row !important;
    padding-left: 1% !important;
    padding-right: 1% !important;
    padding-top: 24px !important;
    padding-bottom: 0 !important;
  }

  .trading .icon-trading > div:not(.tooltip) {
    width: 100%;
  }

  .trading .icon-trading > div:nth-child(2) {
    width: 55%;
    flex-direction: row-reverse;
  }



  /* Pourcent */
  .trading .icon-energy .value-container .pourcent{
    line-height: 1.89;
    font-size: 18px;
    font-weight: bold;
    font-style: normal;
    text-align: right;
    margin-left: 25px;
    width: 50px;
    display: block
  }

  .trading .right-panel .pourcent {
    display: none;
  }

  .trading .global-container {
    justify-content: unset;
  }

  .trading span.value-container {
    width: 100%;
  }

  .trading span.value-container > div {
    justify-content: flex-end;
  }

  .trading .ui-state-default {
    text-align: center;
  }

  .trading .ui-state-default,
  .trading .ui-widget-content .ui-state-default, 
  .trading .ui-widget-header .ui-state-default, 
  .trading .ui-button, 
  .trading .ui-button.ui-state-disabled:hover, 
  .trading .ui-button.ui-state-disabled:active {
    text-align: center;
  }

  .trading .visibility-increased {
    border-bottom: 0px solid transparent !important;
    border-left: 5px solid #979797;
  }

  .trading [role=tooltip] {
    top: 30px !important;
  }

  .trading .arrow {
    top: 35px;
  }

  .trading .line-two {
    flex-flow: column;
    align-items: flex-start !important;
  }

  .trading .line-two .left-panel .vertical-pipe {
    display: none;
  }

  .trading .line-two .left-panel .equal-icon {
    padding-top: 0 !important;
    height: 70px !important;
  }

  .trading .legend-data-container {
    display: flex;
    flex-flow: wrap;
  }

  .trading .legend-background-container {
    position: absolute !important;
    background-color: #1b3044 !important;
    top: -6px !important;
    left: 0px !important;
    right: 0px !important;
    bottom: -6px !important;
    border-radius: 3px !important;
  }

  .trading .legend-data-container .icon-energy:not(.noTooltip) {
    display: flex !important;
    align-items: center;
    width: 100%;
    padding-top: 0 !important;
  }

  .trading .plus-icon {
    padding: 0 !important;
    line-height: 10px !important;
    font-size: 30px !important;
  }

  .trading .reset-filter {
    margin-top: 30px;
  }
}