/* Define colour variables */
:root {
  --main-bg-color: #FEFEFE;;
  --main-emphasis-color: #C02424;
  --main-light-text-color: #F0F0F0;
  --secondary-emphasis-color: #484848;
  --tile-shadow: 0px 4px 7px 0px #484848;
  --tile-bg-color: #FEFEFE;
}

a {
  color: var(--main-emphasis-color);
}

a:hover {
  color: var(--main-emphasis-color);
}

body {
  overflow-x: hidden !important;
  background-color: var(--main-bg-color);
  width: 100vw;
}

/* Prevents the loading spinner from bouncing the page */
.loader {
  min-height: 40px !important;
}


.slider-animate-container i {
  color: var(--main-light-text-color);
}
h2 {
  margin: 0;
  padding: 0;
}

.container-fluid {
  margin: 0 !important;
  padding: 0 !important;
}

#controls-container {
  background-color: var(--main-emphasis-color);
  color: var(--main-light-text-color);
  font-size:1.2em;
  margin-top: -10px;
  margin-bottom: 10px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  padding: 1%;
}

.instruction-emphasis {
  font-weight: bold;
  padding-top: 10px;
}

#date-picker-timeseries-slider-container {
  display: flex;
  flex-wrap: wrap;
}

#date-picker-container {
  align-self: center;
  margin-right: 50px;
}

#timeseries-slider-container {
  flex: 2;
}


/* Slider label background color */
.irs-single {
  background-color: var(--secondary-emphasis-color) !important;
  opacity: 1;
}

/* Bar color */
.irs--shiny .irs-bar {
  border-color: var(--secondary-emphasis-color) !important;
  background-color: var(--secondary-emphasis-color) !important;
}


/* Selected date, time and daytype symbol */
#selected-datetime-theme-toggle-container {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  
}

.selected-datetime-theme-toggle-container-item {
  min-width: 50%;
  flex: 1;
  align-self: end;
}

#daytype-date-symbol-container {
  display: flex;
}

#daytype-date-container {
  align-self: center;
}

.selected-date-emphasis {
  font-size: 1.3em;
  font-weight: bold;
}

#daytype-symbol-container {
  display: flex;
  gap: 5px;
}

.selected-daytype-emphasis {
  font-size: 0.9em;
  font-style: italic;
  align-self: center;
}

/* Reset, help button, and note container */
#reset-view-container {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  align-items: center;
  margin: 1%;
}

.btn-default {
  color: var(--main-emphasis-color);
}

/* Map and info pane container */
#map-info-container {
  display: flex;
  position: relative;
  margin: 1%;
  background-color: var(--tile-bg-color);
}

#map-container {
  flex: 1;
}

.legend {
  background-color: var(--main-bg-color);
  border-radius: unset;
  opacity: 1;
}

#info-container {
 height: 95%;
 width: 45%;
 max-width: 480px;
 background-color: var(--main-bg-color);
 position: absolute;
 margin: 1%;
 /* This z-index keeps it above the zoom controls (900), 
 but below the dropdown calendar (1100) */
 z-index: 1000;
 display: none;
 flex-wrap: wrap;
 box-shadow: var(--tile-shadow);
}

#mapInfo {
  height: 100%;
}

#inner-info-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#node-name-close-container {
  display: flex;
  width: 100%;
  background-color: var(--main-emphasis-color);
  margin-bottom: 5px;
}

.node-name-emphasis {
  font-size: 1.8em;
  text-align: center;
  background-color: var(--main-emphasis-color);
  color: var(--main-light-text-color);
  flex: 1;
}

button#closeButton {
    background-color: unset;
    border: none;
    font-size: 20px;
    padding: 0;
    padding-right: 10px;
    padding-top: 5px;
    color: white;
}

button#closeButton:active {
    background-color: unset !important;
    border: none !important;
    font-size: 20px !important;
    padding: 0 !important;
    padding-right: 10px !important;
    padding-top: 5px !important;
    color: #D0D0D0 !important;
    outline: unset !important;
    box-shadow: unset !important;
}

.no-power-message {
  font-size: 1.3em;
  width: 100%;
  text-align: center;
}

#generator-plot-container {
  flex: 1;
}

.inner-info-container-item {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 5px;
  display: flex;
  justify-content:space-between;
}

.node-item-emphasis {
  color: var(--main-emphasis-color);
  font-size: 1.2em;
  text-align: right;
}

.node-item-title {
  font-size: 1.2em;
  font-weight:bold;
}


#fueltype-plot-container {
  flex: 1;
}



/* Node prices container */
#title-sort-buttons-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1%;
  margin-left: 2%;
  margin-right: 2%;
  font-size: 1.3em;
  background-color: var(--main-emphasis-color);
  padding: 1%;
  color: var(--main-light-text-color);
}

 input[type="radio"] {
   margin-top: 7px;
}

.toggle-message {
  margin: 0 2% 0 2%;
  background-color: var(--secondary-emphasis-color);
  padding: 1%;
  width: fit-content;
  color: var(--main-light-text-color);
  cursor: pointer;
}

#sortPrices {
  margin-bottom: 0 !important;
}

#node-spot-price-title-boxes-container {
  margin: 1%;  
}

#spot_price_title_container {
  font-size: 1.3em;
}

label#sortPrices-label {
    display: none;
}


#node-spot-price-box-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.node-spot-price-box-container-item {
  min-width: 48%;
  padding: 5px;
  font-size: 1.1em;
  margin: 0.5%;
  box-shadow: var(--tile-shadow);
  background-color: var(--main-bg-color);
  display: flex;
  
}

#node-spot-price-box-container-item-node-info {
  flex: 3;
  text-align: center;
  align-self: center;
}

#node-spot-price-box-container-item-mean-price-container {
  flex: 1;
  word-wrap: break-word;
  font-size: 0.9em;
  text-align: center;
  color: var(--main-light-text-color);
  padding: 1%;
}

#mean-price-icon {
  font-size: 2.5em;
}

.timeseries-graph-title {
    font-size: 1.3em;
    padding: 1%;
    margin-left: 2%;
    text-align: center;
    background-color: var(--main-emphasis-color);
    width: 96%;
    color: var(--main-light-text-color);
  }


#node_spot_price_graph_container {
  display: flex;
  flex-wrap: wrap;
  margin: 1%;
}

.node-spot-price-box-container-item-title {
  font-size: 1.2em;
  color: var(--main-emphasis-color);
}

.node-spot-price-graph-container-item {
   width: 48%;
   padding: 0.5%;
   margin: 1%;
   background-color: var(--tile-bg-color);
   box-shadow: var(--tile-shadow);
}

/* Portrait tablet to landscape and desktop */
@media (max-width: 979px) {
  
  /* Map popup */
  #info-container {
    width: 50%;
  }
  
  .node-spot-price-box-container-item {
    min-width: unset;
    width: 48%;
  }
  
  .node-spot-price-graph-container-item {
    width: 100%;
  }
  
  .selected-date-emphasis {
    text-align: right;
    font-size:1.0em;
  }
  
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    /* Map popup */
  #info-container {
    width: 60%;
  }
  
  #title-sort-buttons-container {
    font-size: 1.1em;
    flex-direction:  column;
  }
  
  .node-spot-price-box-container-item {
    min-width: unset;
    width: 100%;
  }
  
  .node-spot-price-graph-container-item {

    width: 100%;
  }
}

@media (max-width: 560px) {
  #date-picker-timeseries-slider-container {
    flex-direction: column;
    
  }
  
  #timeseries-slider-container {
    margin-left: 10%;
  }
  
  .selected-date-emphasis {
    font-size: 1em;
  }
  
  #daytype-symbol-container {
    text-align: right;
  }
  
  #symbol-container {
    display: none;
  }
  
    /* Map popup */
  #info-container {
    width: 100%;
    margin-left:2%;
  }

}

/* Landscape phones and down */
@media (max-width: 480px) { 
  /* Reset view container */
  #reset-view-container {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 10px;
    gap: 5px;
    text-align: center; 
  }
  
  #help-reset-buttons {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: 10px
  }
  
  #info-container {
    width: 96%;
  }
  
  #date-picker-container {
    margin: 0;
  }
  
  /* Toggle message */
  .toggle-message {
    width: 96%;
    text-align: center;
    
  }
  
  #title-sort-buttons-container {
    font-size: 1.1em;
    flex-direction:  column;
  }
  
  input[type="radio"] {
    margin-top: 4px;
  }

  
  .timeseries-graph-title {
    font-size: 1.1em;
  }
}