/*
This CSS governs the appearance of our site.
You can find the basic concepts of CSS here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works
*/

/*
We use CSS variables to avoid repetition
https://developer.mozilla.org/en-US/docs/Web/CSS/--*
*/
:root {
  --theme-color-light: rgb(255, 255, 255);
  --theme-color-dark: rgb(0, 73, 122);
  --dark-background-color: rgb(87, 87, 87);
}


/*
This makes the border and padding be counted as part of the element's size.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model
It switches from
  https://mdn.mozillademos.org/files/13647/box-model-standard-small.png
to
  https://mdn.mozillademos.org/files/13649/box-model-alt-small.png
*/
* {
  box-sizing: border-box;
}

/*
Make the document fill the whole viewport, this overrides any weird defaults that browsers might have.
*/
html, body, figure {
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
}

/* Default font and size */
body {
  font-family: sans-serif;
  font-size: 1.1rem;
  padding: 50px; /* From exposome.css */
}

/* Links: apply our theme color and remove underline */
a {
  color: var(--theme-color-dark);
  text-decoration: none;
}

/* Justify paragraphs */
p {
  text-align: justify;
}

/* Titles: set color and sizes */
h1, h2, h3, h4, h5, h6
{
  color: var(--theme-color-dark);
}
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.25rem; }

/* Top navigation bar */
nav {
  width: 100%;

  padding-top: 1rem;
  padding-bottom: 1rem;

  background-color: var(--dark-background-color);
}

/* Make the links in the navbar bold */
nav a {
  font-weight: bold;
  color: var(--theme-color-light);
}

/* Style of the list of links in the navbar */
nav ul {
  /* Clear defaults */
  margin: 0;
  padding: 0;

  /* Remove list bullet points */
  list-style-type: none;

  /*
  Flexbox is a modern mechanism for arranging elements
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  This will arrange the elements in a row
  */
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

/* Space between links */
nav li {
  margin-right: 3rem;
}

/* From style.css */
#chartDiv {
  position: absolute;
  top: 3.5rem;
  left: 20%;
  height:90%;
  width: 30%;
  background: whitesmoke;
  font-size: smaller;
  font-family: Ubuntu;
}

#part1 {
  position: relative;
  left: 5%;
  height:90%;
  width: 90%;
  font-family: Georgia;
}

.image {
float: left;
margin: 0 20px 10px 0;
}

.image_right {
float: right;
margin: 0 20px 10px 0;
}

#souspart {
  position: relative;
  left: 5%;
  width: 90%;
  font-family: Georgia;
}

button {
        display: inline-block;
        background-color: #499985;
        border-radius: 2px;
        color: #fff;
        text-align: center;
        font-size: 15px;
        padding: 10px;
        transition: all 0.5s;
        cursor: pointer;
        margin: 3px;
}

button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
}

button span:after {
        content: "\00bb";
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
        background-color: #02edaf;
}

button:hover {
        background-color: #499985;
}

button:hover span {
        padding-right: 25px;
}

button:hover span:after {
        opacity: 1;
        right: 0;
}

.switchButton{
  position: absolute;
  top: 4.5rem;
  right: 0%;

}

.contentClass {
        display: none;
        top: 2rem;
        padding: 5px 16px;
        height:97%;
        border: 2px solid #c0c0c0;
}

#form {
  position: absolute;
  top: 4.5rem;
  left: 2rem;
  height:90%;
  width: 20%;
  background: rgb(255,255,255);
  font-size: 15px;
  font-family: Ubuntu;
}

#reset {
  position: absolute;
  top: 4.5rem;
  left: 2rem;
  height:90%;
  width: 20%;
  visibility: collapse;
  background: rgb(255,255,255);
  font-size: smaller;
  font-family: Ubuntu;
}

#map {
  position: absolute;
  top: 3.5rem;
  left: 50%;
  height:90%;
  width: 50%;
  background: whitesmoke;
  font-size: smaller;
  font-family: Ubuntu;
}

h3 {
  text-align: left;
}
  
/* Button to open the content */
.linkclass {
  float: left;
  cursor: pointer;
  padding: 10px 15px 10px 10px;
  background-color: light-grey;
}
  
/* Button styling on mouse hover */
#tabsDiv a:hover {
        color: black;
        background-color: #e9e9e9;
        font-size: 16px;
    }
  
/* Change the color of the button */
button.active {
        background-color: #c0c0c0;
    }
  
/* Content for button tabs*/
.overlay-container{
   background-color: #555;
   width: 150px;
   color: #fff;
   text-align: center;
   border-radius: 1px;
   padding: 2px 0;
   position: absolute;
   z-index: 1;
   bottom: 100%;
   left: 50%;
   margin-left: -80px;   
}

.ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  color: #333333;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

.ui-autocomplete > li > div {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}

.ui-state-hover,
.ui-state-active,
.ui-state-focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
  cursor: pointer;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

#chartDiv2 {
  position: absolute;
  top: 3.5rem;
  left: 40%;
  height:90%;
  width: 20%;
  background: whitesmoke;
  font-size: smaller;
  font-family: Ubuntu;
}

#chartDiv3 {
  position: absolute;
  top: 3.5rem;
  left: 60%;
  height:90%;
  width: 20%;
  background: whitesmoke;
  font-size: smaller;
  font-family: Ubuntu;
}

#chartDiv4 {
  position: absolute;
  top: 3.5rem;
  left: 80%;
  height:90%;
  width: 20%;
  background: whitesmoke;
  font-size: smaller;
  font-family: Ubuntu;
}