*{
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}


/* width */
::-webkit-scrollbar {
    height: 7.5px;
    width: 7.5px;
    border-radius: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #e2e2e2;
    border-radius: 10px;  
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #757575;
    border-radius: 10px; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }


a{
    text-decoration: none;
}

.navbar{
    border-bottom: 1px solid;
}

.navbar-brand{
    font-family: "granville", sans-serif;
    font-weight: 600;
    font-style: normal;
    border-bottom: 0px solid;
}

.bi{
    color: #000000;
}

/* Navigation */
.navbar-nav{
    font-family: "granville", sans-serif;
    font-weight: 600;
    font-style: normal;
    border-bottom: 0px solid;
}

/* Navigation links */
.nav-link{
    color: #000000;
}

/* Navigation links shadow */
.nav-link:hover{
    border: 1px solid black;
    border-radius: 0px;
    box-shadow: 1px 1px;
}

/* body{
    font-family: "forma-djr-display", sans-serif;
    font-weight: bold;
    letter-spacing: 0.1cap;
} */

.frametext{
    font-family: "forma-djr-display", sans-serif;
    font-weight: 600;
    letter-spacing: 0.1cap;
}

@media screen and (max-width: 992px) {
    .frame {
        border-radius: 0px;
             
    }
}

@media screen and (min-width: 992px) {
    .frame {
        border: 1px solid black;
        border-radius: 0px;
        box-shadow: 1px 1px; 
    }
}

@media screen and (max-width: 576px) {
    .frametext {       
    }
    
    .maptext{
    }
}

@media (min-width:576px) and (max-width:768px) {
    .frametext {        
    }

    .maptext{
    }
}

@media (min-width:768px) and (max-width:992px) {
    .frametext {      
    }

    .maptext{
    }
}

@media (min-width:992px) and (max-width:1400px) {
    .frametext {       
    }

    .maptext{
    }
}

@media screen and (min-width: 1400px) {
    .frametext {
    }

    .maptext{
    }
}

/*
.info{
}

.expl{
    color:rgb(212, 209, 209);
}

.guide{
}

.guide-text{
}

.maplist{
}

.sep{
}
*/

@media screen and (max-width: 992px) {
    .mapselection {
        cursor: pointer;
        border: 1px solid black;
        border-radius: 0px;
        box-shadow: 1px 1px;
    }

    .mapselection.activemap {
        border-color: rgb(0, 0, 0);
        box-shadow: 1px 1px black; 
        color: rgb(210, 41, 41);
    }
}

@media screen and (min-width: 992px) {
    .mapselection {
        cursor: pointer;
        border: 1px solid black;
        border-radius: 0px;
        box-shadow: 1px 1px;
    }

    .mapselection.activemap {
        border-color: rgb(0, 0, 0);
        box-shadow: 1px 1px black; 
        color: rgb(210, 41, 41);
    }
}

.mapselection:hover {
    color: rgb(129, 129, 214);
}

path{
    fill: lightgray;
    stroke: rgb(255, 255, 255);
}

path:hover{
    fill: rgba(129, 129, 214, 0.749);
    cursor: pointer;
}

.active{
    fill: rgb(202, 16, 16);
}

#tooltip{
    display: none;
    position: fixed;
    background-color: rgb(255, 255, 255);
    padding: 5px;
    border: 1px solid black;
    border-radius: 0px;
    box-shadow: 1px 1px;
}

.region.caz{
    fill: rgba(221, 128, 102, 0.844);
}
.region.cha{
    fill: rgba(139, 176, 208, 0.844);
}
.region.eur{
    fill: rgba(169, 199, 155, 0.844);
}
.region.ind{
    fill: rgba(104, 145, 109, 0.681);
}
.region.jpn{
    fill: rgb(255, 196, 0);
}
.region.lam{
    fill: rgba(200, 151, 199, 0.844);
}
.region.mea{
    fill: rgba(160, 187, 206, 0.781);
}
.region.neu{
    fill: rgba(175, 125, 149, 0.844);
}
.region.oas{
    fill: rgba(165, 80, 80, 0.748);
}
.region.ref{
    fill: rgba(164, 144, 182, 0.844);
}
.region.ssa{
    fill: rgba(215, 128, 57, 0.54);
}
.region.usa{
    fill: rgba(173, 136, 107, 0.736);
}

.region:hover{
    fill: rgba(226, 11, 11, 0.749);;
}

.region.active{
    fill: red;
}

/*
@media screen and (max-width: 1600px) {
    .navframe {
    }
}
*/

@media screen and (min-width: 1600px) {
    .navframe {
        margin-left: 15%;
        margin-right: 15%;
        max-width: 70%;
    }
}

/*
@media screen and (max-width: 1600px) {
    .upperbody {
    }

    .lowerbody {
        margin-left: 0.1%;
        margin-right: 0.1%;
        max-width: 99.8%;
    }
}
*/

@media screen and (min-width: 1600px) {
    .upperbody {
        margin-left: 15%;
        margin-right: 15%;
        max-width: 70%;
    }

    .lowerbody {
        margin-left: 15%;
        margin-right: 15%;
        max-width: 70%;
    }
}


@media screen and (max-width: 576px) {
    /*.upperbody {
    }

    .lowerbody {
    }
    */

    .sankeyframe {
        min-height: 576px;
        aspect-ratio: 2/1;
    }

    .tableframe {
        aspect-ratio: 2/1;
        min-height: 400px;
    }
}

@media (min-width:576px) and (max-width:768px) {
    /*
    .upperbody {
    }

    .lowerbody {
    }
    */

    .sankeyframe {
        min-height: 576px;
        aspect-ratio: 2/1;
    }

    .tableframe {
        aspect-ratio: 2/1;
        min-height: 400px;
    }
}

@media (min-width:768px) and (max-width:1400px) {
    /*
    .upperbody {
    }

    .lowerbody {
    }
    */

    .sankeyframe {
        min-height: 576px;
        aspect-ratio: 2/1;
    }

    .tableframe {
        aspect-ratio: 2/1;
        min-height: 400px;
    }
}

@media (min-width:1400px) and (max-width:1600px) {
    .upperbody {
        margin-left: 0.1%;
        margin-right: 0.1%;
        max-width: 99.8%;
    }

    .lowerbody {
        margin-left: 0.1%;
        margin-right: 0.1%;
        max-width: 99.8%;
    }

    .sankeyframe {
        margin-left: 0.1%;
        margin-right: 0.1%;
        max-width: 99.8%;
        min-height: 576px;
        aspect-ratio: 2/1;
    }

    .tableframe {
        margin-left: 0.1%;
        margin-right: 0.1%;
        max-width: 99.8%;
        aspect-ratio: 2/1;
        min-height: 400px;
    }
}

@media screen and (min-width: 1600px) {
    .upperbody {
        margin-left: 15%;
        margin-right: 15%;
        max-width: 70%;
    }

    .lowerbody {
        margin-left: 15%;
        margin-right: 15%;
        max-width: 70%;
    }

    .sankeyframe {
        margin-left: 15%;
        margin-right: 15%;
        max-width: 70%;
        min-height: 576px;
        aspect-ratio: 2/1;
    }

    .tableframe {
        margin-left: 15%;
        margin-right: 15%;
        max-width: 70%;
        aspect-ratio: 2/1;

    }
}



.sankeyhead{
    font-family: "forma-djr-display", sans-serif;
    font-weight: 600;
    letter-spacing: 0.1cap;
    cursor: pointer;
    color: black;
}

.tablehead{
    font-family: "forma-djr-display", sans-serif;
    font-weight: 600;
    letter-spacing: 0.1cap;
    color: #757575;
}


.group{
    display:none;
}

.navcon{
    color: #000000;
    border: 1.75px solid black;
    border-radius: 0px;
    box-shadow: 1.75px 1.75px;
}

.sub-title{
}

.citation{
    color: #757575;

}

.read-more{
    color: rgb(202, 16, 16);
}


.journal-name{
    color: rgb(202, 16, 16);
}