@import url('https://fonts.googleapis.com/css?family=Raleway|Montserrat|Merriweather:300&display=swap');

:root {
    --std-map-water-color: #a1a1a1; /*#566e72;*/
    --std-map-elements-color: #a0a0a0;
    --std-map-elements-hover-color: gold;
    --std-map-background-color: #111111;
    --std-map-contour-color: #606060;
    --std-background-color: #070707;
    --std-svg-background-color: #070707;
    --vein-color: #757575; /* #888157; */

    --vein-linked-color: #b4b4b4;
    --vein-linked-hover-color: goldenrod;
    --sample_color: gold;
    --polapoint-color: pink;
    --polapoint-hover-color: hotpink;
    --bwpoint-color: #8f818a;
    --bwpoint-hover-color: #c488af;
    --waterpoint-color: dodgerblue;
    --waterpoint-hover-color: slateblue;
    --drillholepoint-color: black;
    --drileholepoint-hover-color: gray;
    --track-color: #faebd7;
    --track-hover-color: #ffdead;
    
    --extra-data-color: #fefefe;
    --extra-data-button-color: #fefefe;
    --research-color: gold;
    --research-hover-color: #ffed85;
}

::-webkit-scrollbar {
    width:10px;
    padding:5px;
    right:0;
 }
 
 ::-webkit-scrollbar-thumb {
    background: #8888883f;
    border-radius: 5px;
 }

 ::-webkit-scrollbar-thumb:hover {
    background: #888888; 
 }

 ::-webkit-scrollbar-track {
    background: #4444447f;
 }
 
.backgroundGif {
    stroke: #4444447f;
    stroke-width: 1px;
    fill: none;
 }

.decluttered {
    stroke: rgb(33, 0, 0);
    stroke-width: 1px;
    fill: rgb(33, 0, 0);
}

.decluttered:hover {
    stroke: rgb(111, 0, 0);
    stroke-width: 1px;
    fill: rgb(111, 0, 0);
}

.imageDisplayClose {
    font-family: 'Montserrat', sans-serif;
    font-size: 8pt;
    fill: black;
    text-decoration: underline;
}

.imageButtonClose {
    stroke: var(--extra-data-color);
    stroke-width: 1px;
    fill: var(--extra-data-button-color);
}
.imageDisplayCloseInverted {
    fill: white;
}

.imageDisplayTitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 12pt;
    fill: black;
}

.imageDisplayClose:hover {
    cursor: pointer;
}

.imageNavigation {
    stroke: none;
    stroke-width: 0pt;
}

.water1,
.water2 {
    fill: var(--std-map-water-color);
    stroke: var(--std-map-water-color);

    stroke-linejoin: round;
    stroke-width: 0.25pt;
}

.swamp {
    fill: url(#swampHatch);
    stroke: var(--std-map-elements-color);

    stroke-linejoin: round;
    stroke-width: 0.25pt;
}

.debris {
    fill: url(#debrisHatch);
    stroke: var(--std-map-elements-color);

    stroke-linejoin: round;
    stroke-width: 0.25pt;
}

.road {
    fill: none;
    stroke: var(--std-map-elements-color);

    stroke-linejoin: round;
    stroke-width: 0.25pt;
}

.structure {
    fill: var(--std-map-elements-color);
    stroke: var(--std-map-elements-color);
    stroke-linejoin: round;
    stroke-width: 0.5pt;
}

.delimitation,
.legendRect {
    fill: var(--std-map-background-color);
    stroke: var(--std-map-contour-color);
    stroke-linejoin: round;
    stroke-width: 0.25pt;
    fill-opacity: 0.5;
}

.geology {
    fill: none;
    stroke: var(--std-map-elements-color);
    stroke-linejoin: round;
    stroke-dasharray: 2, 1;
    stroke-width: 1pt;
}

.vein {
    fill: none;
    stroke: var(--vein-color);
    stroke-linejoin: round;
    stroke-width: 1pt;
}

.veinLinked {
    fill: none;
    stroke: var(--vein-linked-color);
    stroke-width: 2pt;
    stroke-linejoin: round;
    transition: 0.5s;
}

.veinLinked:hover {
    cursor: pointer;
    stroke: var(--vein-linked-hover-color);
}

.veinText {
    font-family: 'Montserrat', sans-serif;
    font-size: 8pt;
    font-weight: bold;
    fill: var(--vein-linked-color);
    stroke: none;
    stroke-width: 0pt;
    display: none;
    -webkit-filter: url(#goldrushicon);
    filter:  url(#goldrushicon);
    transition: 0.5s;
}

.veinTextDisplayed {
    display: block;
}

.veinTextDisplayed:hover {
    display: block;
    fill: var(--vein-linked-hover-color);
    -webkit-filter: url(#goldrushiconhover);
    filter:  url(#goldrushiconhover);
    transition: 0.5s;
}

.shaft {
    fill: var(--std-map-elements-color);
    stroke: var(--std-map-elements-color);
    fill-opacity: 0.5;
}


.structure:hover, .shaft:hover {
    fill: var(--std-map-elements-hover-color);
    stroke: var(--std-map-elements-hover-color);
}

.vein:hover, .geology:hover {
    stroke: var(--std-map-elements-hover-color);
}

.samplepoint {
    fill: var(--sample_color);
    stroke: var(--vein-linked-color);
    stroke-width: 10pt;
    -webkit-filter: url(#mineicon);
    filter:  url(#mineicon);
    transition: 0.5s;
}

.samplepoint:hover {
    fill: var(--sample_color);
    cursor: pointer;
    -webkit-filter: url(#mineiconhover);
    filter:  url(#mineiconhover);
}

.polapoint {

    fill: var(--polapoint-color);
    -webkit-filter: url(#polagraphicon);
    filter:  url(#polagraphicon);
    transition: 0.5s;
}

.polapointStroke {
    stroke: var(--polapoint-color);
    stroke-width: 1pt;
    /*stroke-dasharray: 2,2;*/
}

.polapointBackground {
    fill: var(--polapoint-color);
    opacity: 0.5;
}

.polapoint:hover {
    fill: var(--polapoint-hover-color);
    cursor: pointer;
    -webkit-filter: url(#polagraphiconhover);
    filter:  url(#polagraphiconhover);
}

.bwpoint {

    stroke: var(--bwpoint-color);
    stroke-width: 2pt;
    /*stroke-dasharray: 2,2;*/
    fill: none;
    -webkit-filter: url(#overgrownicon);
    filter:  url(#overgrownicon);
    transition: 0.5s;
}

.bwpoint:hover {
    stroke: var(--bwpoint-hover-color);
    cursor: pointer;
    -webkit-filter: url(#overgrowniconhover);
    filter:  url(#overgrowniconhover);
}

.bwpointBackground {
    fill: black;

}

.drillholepoint {
    fill: var(--drillholepoint-color);
    stroke-width: 1pt;
    stroke: var(--drileholepoint-hover-color);
    -webkit-filter: url(#drillicon);
    filter:  url(#drillicon);
    transition: 0.5s;
}

.drillholepoint:hover {
    fill: var(--drileholepoint-hover-color);
    cursor: pointer;
    -webkit-filter: url(#drilliconhover);
    filter:  url(#drilliconhover);
}

.drillholeImage {
    transition-duration: 1s;
    cursor: pointer;
}

.mineralOccurence {
    stroke: var(--track-color);
    stroke-width: 1pt;
    stroke-dasharray: 4, 1;
    fill: none;
    -webkit-filter: url(#trackicon);
    filter:  url(#trackicon);
    transition: 0.5s;
}

.mineralOccurence:hover {
    stroke: var(--track-hover-color);
    stroke-width: 2pt;
    cursor: pointer;
    -webkit-filter: url(#trackiconhover);
    filter:  url(#trackiconhover);
}

.trackWindowDiv {
    overflow-y: scroll;
    height: 100%;
    max-height: 100%;
    padding: 10px;
}
.trackStroke {
    stroke: var(--track-color);
    stroke-width: 1pt;
    /*stroke-dasharray: 2,2;*/
}

.trackBackground {
    fill: var(--track-color);
    opacity: 0.5;

}

.stdRect {
    fill: var(--std-map-background-color);
    stroke: var(--std-map-contour-color);
    stroke-linejoin: round;
    stroke-width: 0.25pt;
    fill-opacity: 0.9;
}
.trackText {
    color: var(--sample_color);
    font-family: 'Montserrat', sans-serif;
    font-size: 14pt;
    text-align: justify;
}

.waterpoint {
    fill: var(--waterpoint-color);
}

.waterpoint:hover {
    fill: var(--waterpoint-hover-color);
    cursor: pointer;
}

.seismographLine {
    stroke: black;
    stroke-width: 0.5pt;
}

.legendTitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 10pt;
    fill: var(--std-map-elements-color);
}

.legendText {
    font-family: 'Montserrat', sans-serif;
    font-size: 9pt;
    fill: var(--std-map-elements-color);
}

.extraData {
    font-family: 'Montserrat', sans-serif;
    font-size: 8pt;
    fill: var(--extra-data-color);
}

.largeAndBold
{
    font-size: 16pt;
    font-weight: bolder;
}

.declutterSwitch {
    transition-duration: 0.25s;
}

.declutterSwitchInactive {
    stroke-width: 0px;
    fill: var(--extra-data-color);
    fill-opacity: 0.5;
    opacity: 0.75;
    transition-duration: 0.25s;
    cursor: pointer;
}

.declutterSwitchInactive:hover {
    opacity: 1;
    transition-duration: 0.25s;
}

.declutterSwitchActive {
    stroke-width: 0px;
    fill: gold;
    fill-opacity: 1;
    opacity: 0.75;
    transition-duration: 0.25s;
    cursor: pointer;
}
.declutterSwitchActive:hover {
    opacity: 1;
    transition-duration: 0.25s;
}

.declutterBubbleActive {
    stroke: var(--extra-data-color);
    stroke-opacity: 0.5;
    transition-duration: 0.25s;
    fill: var(--std-background-color);
    fill-opacity: 0;
}

.declutterBubbleActive:hover {
    fill: var(--extra-data-color);
    fill-opacity: 1;
    opacity: 0.25;
    transition-duration: 1s;
    cursor: pointer;
}

.declutterBubble {
    stroke: gold;
    stroke-opacity: 1;
    transition-duration: 0.25s;
    fill: gold;
    fill-opacity: 0.5;
}

.declutterBubble:hover {
    fill: gold;
    fill-opacity: 1;
    opacity: 1;
    transition-duration: 1s;
    cursor: pointer;
}

.infoBubble {
    stroke: var(--extra-data-color);
    stroke-opacity: 0.5;
    transition-duration: 0.25s;
    fill: var(--std-background-color);
    fill-opacity: 0;
}

.infoBubble:hover {
    fill: var(--extra-data-color);
    fill-opacity: 1;
    opacity: 0.25;
    transition-duration: 1s;
    cursor: pointer;
}

.infoBubbleWindow {
    fill: var(--std-map-background-color);
    stroke: var(--std-map-contour-color);
    stroke-linejoin: round;
    stroke-width: 0.25pt;
    fill-opacity: 0.9;

}

.infoBubbleWindowDiv {
    overflow-y: scroll;
    height: 709px;
    max-height: 709px;
    padding: 10px;
}

.infoBubbleWindowDivShow {
    overflow-y: scroll;
    height: 768px;
    max-height: 768px;
    padding: 10px;
}

.elementWindowDiv {
    overflow-y: scroll;
    height: 178px;
    max-height: 178px;
    padding: 10px;
}

.elementDataText {
    font-family: 'Montserrat', sans-serif;
    font-size: 8pt;
    line-height: 1;
    color: var(--extra-data-color);
}

.infoBubbleWindowText {
    font-family: 'Montserrat', sans-serif;
    font-size: 12pt;
    line-height: 1.4;
    color: var(--extra-data-color);
    text-align: justify;
}

.researchQuote {
    font-size: 9pt;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
}

.googleMapTopo {
    background-color: none;
    width: 80%;
    height: 60%;
    margin: auto;
}

.galleryProject {

    opacity: 0.5;
    transition-duration: 0.5s;
}

.galleryProject:hover {
    stroke: var(--extra-data-color);
    stroke-opacity: 0.5;
    transition-duration: 0.5s;
    opacity: 1;
    cursor: pointer;
}

.galleryProjectImage {
    stroke: var(--bwpoint-color);
    stroke-width: 2pt;
    fill: none;
    -webkit-filter: url(#galleryproject);
    filter:  url(#galleryproject);
    transition: 0.5s;
}
.galleryProjectImage:hover {
    stroke: var(--bwpoint-color);
    stroke-width: 2pt;
    fill: none;
    fill-opacity: 0;
    -webkit-filter: url(#galleryprojecthover);
    filter:  url(#galleryprojecthover);
    transition: 0.5s;
}

.galleryProjectText {
    font-family: 'Montserrat', sans-serif;
    font-size: 10pt;
    line-height: 1.4;
    color: var(--extra-data-color);
    text-align: justify;
}



svg {
    border-color: var(--std-background-color);
    border-width: 1px;
    border-style: solid;
    margin: 0 auto;
    display: block;
    background-color: var(--std-svg-background-color);
    transition: background-color 4s ease, border-color 4s ease;
}

.svgContainer {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0 auto;
}
.videostream {
    display: none; 
}

.welcomeShape {
    fill: gold;
    stroke: var(--std-map-background-color);
    stroke-width: 5px;
}

.welcomeButton {
    fill: gold;
    stroke: var(--std-map-background-color);
    cursor: pointer;
    transition-duration: 1s;
}

.welcomeButton rect {
    stroke-width: 5px;
}

.welcomeButton text {
    stroke-width: 0px;
}

.welcomeButton:hover {
    fill: #ffee91;
    transition-duration: 1s;
}

.welcomeText {
    font-family: 'Montserrat', sans-serif;
    font-size: 10pt;
    fill: var(--std-map-background-color);
}

.welcomeTitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 14pt;
    fill: var(--std-map-background-color);
}

.changeThemeButton {
    stroke: var(--extra-data-color);
    stroke-width: 10px;
    transition-duration: 1s;
    fill: var(--std-map-background-color);
    fill-opacity: 0;
}

.changeThemeButton text {
    stroke-width: 0px;
    fill: var(--extra-data-color);
    fill-opacity: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: 10pt;
}

.changeThemeButtonActive:hover {
    fill-opacity: 1;
    transition-duration: 1s;
    cursor: pointer;
}

.researchThemeText {
    fill: #000000;
    font-family: 'Montserrat', sans-serif;
    font-size: 10pt;
    text-transform: uppercase;
    font-weight: 600;
    stroke-width: 0px;
}

.researchThemeBackground:hover
{
    fill: var(--research-hover-color);
    stroke: var(--research-hover-color);
    stroke-width: 1px;
    opacity: 1;
    cursor: pointer;
}

.researchThemeBackground
{
    fill: var(--research-color);
    stroke: var(--research-color);
    stroke-width: 1px;
    opacity: 1;
    transition-duration: 0.5s;
}

.researchThemeRelation
{
    stroke: var(--research-color);
    stroke-width: 1px;
    opacity: 0.05;
    transition-duration: 0.5s;

}

.researchThemeRelationBackground
{
    fill: var(--research-color);
    stroke: var(--research-color);
    stroke-width: 1px;
    stroke-dasharray: none;
    opacity: 0.8;
    transition-duration: 0.5s;
}

.researchThemeRelationHover
{
    opacity: 0.5;
    cursor:pointer;
}

.researchThemeRelationActive
{
    opacity: 0.5;
    fill: var(--research-color);
    stroke: var(--research-color);   
}

.researchThemeRelationActiveHover
{
    opacity: 1;
    fill: var(--research-hover-color);
    stroke: var(--research-hover-color);
    stroke-width: 2px;   
    cursor:pointer;
}

.researchProjectRelation
{
    stroke: white;
    stroke-dasharray: 1px 1px;
    opacity: 0;
    transition-duration: 0.5s;
}

.researchProjectRelationActive
{
    transition-duration: 0.5s;
    opacity: 1;
}

.researchThemeHidden
{
    fill: none;
    stroke: none;
    stroke-width: 4px;
    stroke-dasharray: none;   
}

body {
    background-color: var(--std-background-color);
    height: 100vh;
    margin: 0px;
    transition: background-color 4s ease;
}