<style>

:root {

  --EC_Blue_100:   #004494; /* bg menu AND story-board text */
  --EC_Blue_N:     #006FB4; /* menu hover/selected */
  --EC_Orange:     #F29527; /* storyboard border selected */
  --EC_Blue_25:    #BFD0E4; /* bg storyboard box hover */
  --EC_Blue_5:     #F2F5F9; /* bg storyboard box */
  --EC_Grey_5:     #F5F5F5; /* bg text box */

}

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');

body {
    font-family: 'Arial', sans-serif;
    background-color: white;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: unset !important;
    padding: 40px 0 0 0 !important;
}

.fa-share-alt {
    font-size: 18px;
}

/* TOP HORIZONTAL MENU */

.navbar-logo img {
  position: absolute;
  right: 50px;
}

.navbar, .navbar-brand {
    background-color: #004494;
    border-color: black;
    color: white;
}

.navbar-author {
  display: none;
}

.navbar-header, .navbar-brand {
    font-size: 24px;
    font-family: 'Roboto Condensed', sans-serif;
}

.navbar-nav li a:hover, .navbar-nav > .active > a {
  background-color: #006FB4 !important;
}

/* STORYBOARD LAYOUT */

/* container frame for charts and text */
.sbframe-content div {
  background-color: white;
  border: none;
}

/* frame for charts

.sbframe-component div {
} */

/* frame for text */

.sbframe-commentary {
  padding: 0px 10px 0px 0px; /* padding-right to allow for drop-shadow */
}

.sbframe-commentary div {
  background-color: #F5F5F5;
  padding: 5px 12px 10px 15px; /* padding-top less, -left/-right more */
  border-radius: 1px;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .1);
}

/* non-active parts of storyboard nav bar */
.storyboard-nav .sbframelist ul li {
  background-color: #F2F5F9 !important;
  color: #004494 !important;
  font-size: 16px;
  border: none;
  border-radius: 1px;
  height: 100px;
}

/* on hover of storyboard nav bar */
.storyboard-nav .sbframelist ul li:hover {
  background-color: #BFD0E4 !important;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .1);
  border-radius: 1px;
  border: none; /* 1px solid var(--EC_Blue_25) */
}

/* active parts of storyboard nav bar, new width on active frame 13/04/2022 */
.storyboard-nav .sbframelist ul li.active {
  box-sizing: border-box;
  border: 3px solid #F55600;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .1);
  border-radius: 1px;
  padding: 7px !important;
  font-weight: 600;
}

/* storyboard navigation buttons shorter height */
.storyboard-nav .sbnext, .storyboard-nav .sbprev {
    height: 100px;
}

.storyboard-nav .sbframelist {
    height: 105px;
}

/* TABSET LAYOUT */

/* orange top border */
.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: #F55600 !important;
}

/* CHANGES 2022-03-24 */
#mainFooterContainer{
  display: flex;
  justify-content: space-between !important;
  font-size: 16px;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.gt_table {
  max-width: 100vh !important;
  margin-right: 10px !important;
}

.mobile-layout .chart-wrapper {
  border: none !important;
}

.mobile-layout .chart-title {
  border-bottom: none !important;
  border-right: 1px solid #E3E3E3 !important;
  border-bottom: 1px solid #E3E3E3 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #003D84 !important;
  background-color: #F2F5F9 !important;
  padding: 10px 15px 10px 15px !important;
}

.mobile-layout .chart-stage > .level4 {
  background: #F5F5F5 !important;
  padding: 5px 15px 10px 15px !important;
  border-right: 1px solid #EBEBEB !important;
  border-bottom: 1px solid #EBEBEB !important;
}

/* New styles to differentiate between large and small screens */
.main-svg { overflow: visible !important; }
/* .Bottom_Desktop { margin: 0 0 5% 0 !important; } /* push the data source away from the bar chart so that country names display fully */ */

/* SMALL SCREENS */

/* changes 2022-04-06 */
#dashboard-container {
  /* height: fit-content !important; */
  height: unset !important;
  /* overflow: auto; */
}

#mainFooterContainer {
  margin-top: auto;
}

.dashboard-page-wrapper {
  width:100%;
}

/* changes 2022-04-07 */
.chart-wrapper {
    min-width: 70%;
}

.chart-shim {
  position: relative !important;
  padding: 10px !important;
  overflow: auto;
  margin: 0 5px;
  left: 0 !important;
  right: 0 !important;
}

.chart-stage {
  padding: 0 !important;
}

.tab-content {
  height: unset !important;
  max-width: 99%;
}

.navbar {
  margin: 0 !important;
  width: 100%
}

.chart-wrapper, .nav-tabs-custom {
  margin: 0 !important;
}

.sbframe-commentary {
  
  margin-left: 5px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 15px !important;
}

#dashboard-container {
  margin-top: 21px;
}

.storyboard {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1.5%;
}

.tabset {
  margin-left: 1% !important;
}

/* ---- */

/* changes 2022-04-05  */
@media (max-width: 1050px) {
  /* changes 2022-04-06 */
  .navbar-left {
    width: 80%;
  }
  /* ---- */

  #dashboard-container {
    margin-top: 61px !important;
  }

  .navbar-logo img {
    right:0 !important;
  }
}
/* ---- */

@media (max-width: 480px) {
  .navbar-logo img {
    position: relative;
    right: 0;
    left: 13px;
  }
}

.sbframe:not(.active) {
  display: none !important;
}

.autumnTab .chart-shim {
  height: 750px !important;
  overflow-x: : auto !important;
  overflow-y: : visible !important;
}

@media (max-width: 1100px) {
  .autumnTab {
    flex: unset !important;
    height: unset !important;
    display: grid !important;
  }

  .autumnTab .sbframe-commentary {
    width: 100% !important;
  }
}

@media (max-width: 768px) {

  .chart-stage {
      padding: 0 !important;
  }

  .navbar-nav-left {
    width: 100%;
  }

  .navbar-logo img {
    right: 50px !important;
  }

  .tab-content {
    margin-top: 0 !important;
  }

  .rangeslider-container { /* hide completely the rangesliders */
    visibility: hidden;
	}

  .Mobile_Table {
    overflow: auto !important;
  }

  .Single_Mobile { /* chart alone on mobile screen */
    /* float:left; */
    width:100%;
    height:95% !important;
  }

  .Single_Desktop {
      display: none !important;
  }

  .Half_Mobile { /* chart on half mobile screen */
    /* float:left; */
    width:100%;
    height:45% !important;
  }

  .Top_Desktop {
      display: none !important;
  }

  .Bottom_Desktop {
      display: none !important;
  }

  .Desktop_Sourcetag {
      display: none !important;
  }
}

/* LARGE SCREENS */

@media (min-width: 769px) {

/* Hide the traces from rangesliders. ATTENTION: only traces shown
   on the primary y axis are hidden. To hide traces from the secondary
   y axis, plot them against a secondary x axis, identical to the
   primary x axis and then attach the slider to the primary xaxis only */

  .chart-shim {
     height: 75vh;
  }

  .rangeslider-container .plot .scatterlayer {
	   visibility: hidden;
  }

  .Single_Desktop { /* chart alone on large screen */
    /* float:left; */
    width:100%;
    height:95% !important;
  }

  .Single_Mobile {
    display: none !important;
  }

  .Top_Desktop { /* chart on half large screen */
    /* float:left; */
    width:100%;
    /* height:45% !important; */
  }

  .Bottom_Desktop { /* chart on half large screen */
    /* float:left; */
    width:100%;
    /* height:45% !important; */
  }

  .Half_Mobile {
    display: none !important;
  }

}

/* ----------------- */
</style>
