/* Define colour variables */
:root {
  --main-bg-color: hsla(198, 100%, 20%, 0.07);
  --main-emphasis-color: #C02424;
  --main-light-text-color: #FFFFFF;
  --secondary-emphasis-color: #484848;
  --tile-shadow: 0px 4px 7px 0px #484848;
}



/* Prevent initial pane from being visible */
body {
  overflow-x: hidden !important;
  animation: fadeInAnimation ease 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
 
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}
/* Prevents the loading spinner from bouncing the page */
.loader {
  min-height: 40px !important;
}


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

#about-container {
  overflow-x: hidden;
  display: flex;
  align-items:flex-end;
  flex-direction: column;
}

#about-title {
  text-align: right;
  font-size:5em;
  width: 80%;
  margin-top: 30vh;
  padding-right:2%;
  background-color: var(--main-emphasis-color);
  background: linear-gradient(320deg, var(--main-emphasis-color), 
  var(--main-emphasis-color), var(--main-emphasis-color), transparent, transparent);
  color: var(--main-light-text-color);
}

#about-elements-container {
  width: 40%;
}

#about-quick-links-container {
 padding: 2%;
 font-size:1.2em;
 display: flex;
 margin-top: 5vh;
 flex-direction:column;
 align-items: center;
}

.animated-container {
  transform: translateX(100vw);
  transition: 1s;
}
.animate {
  transform: translateX(0);
  transition: 1s;
}

.about-quick-links-item {
  width: 100%;
  text-align: center;
  padding: 2%;
  margin-top: 5px;
  color: var(--secondary-emphasis-color);
  text-decoration: none;
  font-size: 1.5em;
  border: 2px solid var(--secondary-emphasis-color);
  transition: 0.5s;
}

.about-quick-links-item:hover {
  color: var(--main-light-text-color) !important;
  background-color: var(--main-emphasis-color);
  border-color: var(--main-emphasis-color);
  transition: 0.5s;
  text-decoration: none;
}

.about-quick-links-item:active {
  color: var(--main-light-text-color);
  text-decoration: none;
}

.about-quick-links-item:visited {
  color: var(--secondary-emphasis-color);
  text-decoration-color: var(--main-light-text-color);
}

#about-pickers-container {
  margin-top: 50vh;
}

#about-map-container {
  margin-top: 50vh;
}

#about-graphs-container {
  margin-top: 50vh;
}

#about-ready-container {
  margin-top: 20vh;
  margin-bottom: 20vh;
}

.about-element-container {
  color: var(--secondary-emphasis-color);
  box-shadow: var(--tile-shadow);  
  padding-bottom: 2%;
  font-size: 1.2em;
  margin-right: 2%;
}

.about-item-title {
  font-size: 1.2em;
  text-align: center;
  color: var(--main-light-text-color);
  background-color:var(--main-emphasis-color);
  padding: 1%;
  margin-bottom: 1%;
}

.about-para-text {
  padding-left: 2%;
}

.about-emphasis {
  font-size: 1.01em;
  color: var(--main-emphasis-color);
}

.about-img {
  width: 100%;
  padding: 5px;
  opacity: 0.4;
}

/* Navbar */

#navbar-container {
  background-color: var(--main-emphasis-color);
  color: var(--main-light-text-color);
  display: flex;
  justify-content: space-between;
  font-size: 2.2em;
  width: 99%;
  margin: 0 auto;
}

#navbar-title {
  padding: 20px;
}

#navbar-links-container {
  font-size: 0.6em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 30%;
}

.navbar-link {
  color: var(--main-light-text-color);
  text-decoration: none;
  flex: 1;
  height: 100%;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  padding-top: 1.5em;
}

.navbar-link:hover {
  background-color: rgb(255, 255, 255, 0.2);
  color: var(--main-light-text-color);
  text-decoration: none;
}

.navbar-link:active {
  color: var(--main-light-text-color);
  text-decoration: none;
}

.navbar-link:visited {
  color: var(--main-light-text-color);
  text-decoration-color: var(--main-emphasis-color);
}


/* Pickers */
#picker-info-container {
  display: flex;
  padding: 10px;
  align-items: center;
  width: 99%;
  margin: 0 auto;
  margin-bottom: 5px;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 5px solid var(--main-emphasis-color);
}

#picker-container {
  display: flex;
  max-width: 60%;
}

#dark-toggle {
  max-width: 40%;
}

.picker-item {
  margin: 0 5px 0;
}

#countries-note {
  font-size: 0.9em;
  color: #808080;
  padding-left: 5px;
  padding-top: 5px;
  width: 100%;
}

#mobile-note {
  display: none;
}

.form-group {
  margin-bottom: 0 !important;
}

/* Makes sure that open menu is above zoom controls */
.dropdown-menu.open {
  z-index: 10000;
}

/* Makes hover red in dropdown menu */
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    background-color: var(--main-emphasis-color) !important;
    color: var(--main-light-text-color)e;
}

/* Class added to picker info on scroll */
.picker-info-sticky {
  position: fixed;
  top: 0;
  width: 100% !important;
  background-color: var(--main-light-text-color);
  z-index: 2000000;
  box-shadow: var(--tile-shadow);
}

.picker-info-sticky + #map-pane-container {
  padding-top: 52px;
}

/* Map */
#map-pane-container {
  display: flex;
  width: 99%;
  margin: 0 auto;
}

#pane-container {
  box-shadow: var(--tile-shadow);
}

/* Country coloured bars and names */
.pane-country-container {
  display: flex;
  padding: 5px;
}

#outputMap {
  box-shadow: var(--tile-shadow);
}

/* These are the default classes of the map
and info pane before any countries are 
selected - map takes up full screen, 
and pane is minimised */
.map-default {
  flex: 2;
  transition: width 1s, flex 1s;
}

.pane-default {
  width: 0;
  transition: width 1s, flex 1s;
}

.pane-expand {
  flex: 1;
  max-width: 50%;
  width: auto;
  opacity: 1;
  transition: width 1s, flex 1s;
  margin-left: 10px;
}

/* Styling for country names inside pane */
#countries-title {
  background-color: var(--main-emphasis-color);
  color: var(--main-light-text-color);
  font-size: 1%;
  padding-left: 5px;
  width: 100%;
}

#prompt-message {
  font-style: italic;
  width: 100%;
  color: #808080;
  text-align: center;
}

#pane-country-names-container {
  display: flex;
}

.pane-country-item {
  flex: 1;
  text-align: center;
  color: var(--main-light-text-color);
  font-size: 90%;
}

/* Marker/country pane */
#info-container {
  box-shadow: var(--tile-shadow);
}

.leaflet-right .leaflet-control {
    margin-right: 10px;
    margin-left: 10px;
}

.leaflet-bottom {
  width: 100%;
}

.leaflet-control {
  margin: 0 auto;
}

#engagement-info-container {
  border-top: 8px solid var(--main-emphasis-color);
  background-color: #FFFFFF;
  box-shadow: var(--tile-shadow);
}

.map-info-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.info-emphasis {
  color: var(--main-emphasis-color);
  font-weight: bold;
}

/* Close button */
.legend i {
  margin-right: 5px;
  font-size: 1.5em;
  color: var(--main-emphasis-color);
  opacity: 1;
}

.legend i:hover {
  cursor: pointer;
}


.engagement-info-emphasis {
  color: var(--main-emphasis-color);
  font-size: 1.2em;
}

#graph-container {
  width: 99%;
  margin: 0 auto;
}

/* Treemap graphs */
#import-export-treemap-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  justify-content: space-between;
}

#visa-treemap-container {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: space-between;
}

.import-export-treemap-container-item {
  width: 49.7%;
  box-shadow: var(--tile-shadow);
  margin-bottom: 10px;
}

.visa-treemap-container-item {
  flex: 1;
  box-shadow: var(--tile-shadow);
  margin-bottom: 10px;
}

/* Import/export percentage graphs */
#import-export-graph-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10px;
}

.import-export-graph-item {
  width: 49.7%;
  box-shadow: var(--tile-shadow);
}


/* Visa timeseries-percentage graphs */
#visa-timeseries-graph-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.visa-timeseries-graph-item {
  width: 49.7%;
  box-shadow: var(--tile-shadow);
  margin-bottom: 10px;
}

/* FDI graphs */
#fdi-graph-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10px;
}

.fdi-graph-item {
  width: 49.7%;
  box-shadow: var(--tile-shadow);
}



@media(max-width: 1088px) {
  #about-title {
    font-size: 1.5em;
  }
  
  #about-elements-container {
    width: 60%;
  }
  
  .map-default {
    flex: 1;
  }
  
  #control-container {
    font-size: 0.7em;
  }
  
  #control-info-marker-item {
    flex: 2;
  }
  
  #control-info-country-item {
    flex: 2;
  }
  
  .legend i {
    font-size: 2em;
  }
}

/* Second biggest non-mobile width layout */
@media(max-width: 727px) {
  #about-elements-container {
    width: 80%;
  }
  
  .picker-item {
    width: 60%;
  }
  
  #pane-country-names-container {
    flex-wrap: wrap;
  }
  
  .pane-country-item {
    font-size:85%;
    min-width:30%;
  }
  
  #countries-note {
    font-size:0.8em;
    margin-top: 5px;
    text-align: center;
  }
  
  #control-info-marker-country-container {
    flex-direction: column;
  }
  
  #control-info-marker-item {
    font-size: 0.8em;
    border-right: none;
    border-bottom: 2px solid var(--main-emphasis-color);
  }
  
  #control-info-country-item {
    margin-left: 0px;
    margin-top: 10px;
    font-size: 0.8em;
  }
}



/* Third biggest non-mobile width layout */
@media(max-width: 620px) {
  /* Navbar */
  #navbar-container {
    font-size: 1.5em;
    justify-content: center;
    align-items: center;
  }
  
  .navbar-link {
    padding-top: 25px;
    padding-bottom: 25px;
  }
  
  /* Pickers */
  .form-group.shiny-input-container {
    width: fit-content;
  }
  .picker-item {
    width: 45vw;
  }
  
  #mobile-note {
    display: initial;
    color: var(--main-light-text-color);
    font-style: italic;
    width: 100%;
    text-align: center;
  }
  
  .mobile-note-minimise {
    font-size: 0;
  }
  
  /* Map pane container */
  #outputMap {
    height: 600px !important;
  }
  
  .pane-expand {
    max-width: none;
  }
  
  #pane-container {
    margin-right: 0;
  }
  
  #map-pane-container {
    flex-direction: column;  
    width: 95%;
    margin: 0 auto;
    
  }
  
  .pane-default {
    opacity: 0;
  }
  
  .pane-expand {
    opacity: 1;
  }
  
  #pane-container {
    margin-left: 0;
  }
  
  .pane-country-item {
    min-width:0;
  }

  #graph-container {
    width: 95%;
    margin: 0 auto;
  }

  #import-export-treemap-container {
    flex-direction: column;
  }
  
  #visa-treemap-container {
    flex-direction: column;
  }
  

  
  .import-export-treemap-container-item {
    width: 100%;
  }
  
  #import-export-graph-container {
    flex-direction: column;
  }
  
  .import-export-graph-item {
    width: 100%;
    margin-bottom: 10px;
  }
  
  #fdi-graph-container {
    flex-direction: column;
  }
  
  .fdi-graph-item {
    width: 100%;
    margin-bottom: 10px;
  }
  
  #visa-timeseries-graph-container {
    flex-direction: column;
  }
  
  .visa-timeseries-graph-item {
    width: 100%;
    margin-bottom: 10px;
  }
  
}

/* Biggest mobile width layout */
@media(max-width: 450px) {
  /* Navbar */
  #navbar-title {
    padding: 0;
  }
  
  #navbar-container {
    flex-direction: column;
  }
  
  #navbar-links-container {
    padding: 0;
    width: 100%;
  }
  
  .navbar-link {
    padding: 5px;
  }
  
  .navbar-link:hover {
    text-decoration: none;
  }
  
  .material-switch span {
    padding-right: 5px;
  }
  
  /* Map - make it a little bit smaller so it's scrollable*/
  #map-pane-container {
    width: 95%;
    margin: 0 auto;
  }
}

@media(max-width: 420px) {
  .material-switch span {
    font-size: 60%;
  }
}

@media(max-width: 380px) {
  #picker-info-container {
    align-items: center;
    padding: 5px;
    flex-direction: column;  
    
  }
  #picker-container {
    width: 95%;
    max-width: unset;
    justify-content: space-evenly;
    padding: 5px;
  }
  
  .picker-item {
    width: 50%;
  }
  
  #dark-toggle {
    padding-top: 5px;
  }
  
  .material-switch span {
    font-size: inherit;
  }
  
  .form-group.shiny-input-container {
    width: auto;
  }
}

/* Smallest mobile width layout */
@media(max-width: 260px) {
  #about-title {
    font-size: 2em;
  }
  /* Navbar */
  #navbar-title {
    padding: 5px;  
  }
  
  #navbar-container {
    font-size: 1em;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  #navbar-links-container {
    flex-direction: column;
    align-items: center;
  }
}