/*
 * GLOBAL VARIABLES
 */
:root {
    --colorBackground: rgb(0,0,37);
    --colortimeLineBoxAM: rgb(255, 237, 92);
    --colortimeLineBoxPM: #5AB2F5;
    --Buttons-colorBackground: #04086b;
    --Buttons-padding: 10px 54px;

    --Phase-1: rgb(255,0,0);
}

body {
    background-color:var(--colorBackground);
    padding: 20px;
}


.viewContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

}

.title{
    color: white;
    font-family: "Roboto",monospace;
    font-size: 25px;
    margin-top: 5px;
    font-weight: bold;
    text-align: center;

}

h2{
    color: white;
    font-size: 20px;
    font-family: "Roboto",monospace;
    text-align: center;
    margin: 5px;

}

h4{
    color: white;
    font-family: "Roboto",monospace;
    text-align: center;
    margin: 1px;

}

p{
    color: white;
    font-size: 12px;
    font-family: "Roboto",monospace;
    text-align: center;
    margin: 5px;

}

.marker {
  background-image: url('mapbox-icon.png');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

.mapboxgl-popup {
  max-width: 200px;
}

.mapboxgl-popup-content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

/*
 * --------------- PHASE CONTAINER
 */
.phaseContainer {
    flex-grow: 1;
    width: 100%;
    height: 10px;
    /*background-color:grey;*/
    margin-top: 5px;
}
#phaseSVGContainer > object {
    flex-grow: 2;
    width: 100%;
}

/*
 * --------------- TIME CONTAINER
 */
.timeContainer {
    flex-grow: 0.1;
    height:100; 
    margin-bottom: 0px;
    background-color:var(--colorBackground);
}



/*
 * --------------- TIME SVG's LEAVE THIS
 */
.st0{display:none;}
.st1{display:inline;fill:#000025;}
.st2{fill:#FFFFFF;}
.st4{display:none;opacity:0.2;fill:#C8C8C8;}
.st5{fill:#E82133;}
.st6{fill:#C0C125;}
.st7{fill:#3944C6;}
.st8{fill:#480E56;}

.timelineBoxAMDefault{
    opacity: 0.2;
    fill: var(--colortimeLineBoxAM) ;
}

.timelineBoxAMActive{
    fill: var(--colortimeLineBoxAM) ;
}

.timelineBoxAMSelected{
}



.timelineBoxPMDefault{
    opacity: 0.2;
    fill: var(--colortimeLineBoxPM) !important;
}

.timelineBoxPMActive{
    fill: var(--colortimeLineBoxPM) !important;
}

.timelineBoxPMSelected{
}

/*
 * --------------- PATH LINEAR CONTAINER
 */
.pathLinearContainer {
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    height:300px;
    /*background-color:grey;*/
    margin-top: 5px;
    margin-bottom: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
}
#pathLinearSVGContainer{
    flex-grow: 1;
    width: 100%;
    
    
}

#p5-sketch-Container{
  flex-direction: column;
  width: 100%;
  height:100%;


}



/*
 * --------------- PHOTO CONTAINER
 */
.photoContainer {
    flex-grow: 1;
    width: 100%;
}

/*
 * --------------- MAP CONTAINER
 */
#mapboxContainer {
    flex-grow: 1;
    width: 100%;
    height: 390px;
    margin-top: 5px;
}

/* PHASES BUTTONS STYLING */


.buttonP1 {
  background-color: #693753; 
  margin-left: 30px;
  margin-right: 30px;
  border:none;
  font-family: "Roboto",monospace;
  font-weight: normal;
  color: white;
  outline: none;
  padding: var(--Buttons-padding);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  width: 20%;
  font-size: 16px;
  float: left;
}

.buttonP1:hover {
  background-color: #861e41;
  border: none;
  font-weight: bold;
  font-size: 18px;
}

.buttonP2 {
  background-color: #b29fb5; 
  margin-left: 30px;
  margin-right: 30px;
  border:none;
  font-family: "Roboto",monospace;
  font-weight: normal;
  color: white;
  outline: none;
  padding: var(--Buttons-padding);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  width: 20%;
  font-size: 16px;
  cursor: pointer;
  float: left;
}

.buttonP2:hover {
  background-color: #a9796c;
  border: none;
  font-weight: bold;
  color: white;
  font-size: 18px;
}

.buttonP3 {
  background-color: #5a6c83; 
  margin-left: 30px;
  margin-right: 30px;
  border:none;
  font-family: "Roboto",monospace;
  font-weight: normal;
  color: white;
  outline: none;
  padding: var(--Buttons-padding);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  width: 20%;
  font-size: 16px;
  cursor: pointer;
  float: left;
}

.buttonP3:hover {
  background-color: #9e4c91;
  border: none;
  color: white;
  font-weight: bold;
  font-size: 18px;
}