html.no-scroll,
html.no-scroll body{
    overflow: hidden;
    height:100%;
}

html.no-scroll #chart{
    position: absolute;
    top: 0;
    background-color: white;
    z-index: 100;
}


#svg-container{
    /*overflow: hidden;*/
    height: 100%;
    width: 100%;

/*    -webkit-box-shadow: inset 0px 0px 16px -2px rgba(100,100,100,0.3);
    -moz-box-shadow: inset 0px 0px 16px -2px rgba(100,100,100,0.3);
    box-shadow: inset 0px 0px 16px -2px rgba(100,100,100,0.3);*/
}

svg{
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
}



[state="selected"] circle{
    fill: #f8a82c;
}

#tool-tip.hidden{
    opacity: 0;
}

#tool-tip{
    opacity: 1;
    position: absolute;
    width: 28vw;
    bottom: 0px;
    left: 0px;
    padding-top: 3rem;
    padding-left: 0px;
    padding-right: 0px;
    line-height: 1.3em;
    font-weight: 100;
    border-right: 1px solid black;
    background-color: white;
    height: 100%;
    transition: opacity 0.2s ease-in;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

#zoom-image{
    position: absolute;
    height: 100%;
    width: 73vw;
    top: 0;
    right: 0;
    background-color: #ffffffba;
    display: none;
}

#zoom-image .exit-button{
    top: 5rem;
    right: 2rem;
    left: auto;
    margin: 0.5rem;
    height:1rem;
    width:1rem;
    cursor:pointer;
}

#zoom-image .row{
    height: 100%;
}
#zoom-image.open{
    display: block;
}

#mobile-close-button{
   position: absolute;
    margin: 1.5rem 1rem;
    left: auto!important;
    top: 0;
    right: 0;
    visibility: hidden;
}
.key-container{
    width:100%;
    padding-right: 1rem;
    padding-left: 1rem;
}

#map-buttons{
    /*position: absolute;*/
    /*bottom: 0;*/
    text-transform: uppercase;
    /*border-bottom: solid 1px black;*/
    background-color: white;
}
/*#map-buttons .row{
     border-top: 1px solid black;
}*/
#map-buttons{
     border-top: 1px solid black;
}
#map-buttons .row{
    margin-right: -1em!important;
    margin-left: -1em!important;
}
#map-buttons .row div{
    height: 2rem;
    position: relative;
    line-height: 2rem;
    font-size: 0.75rem;
    /*cursor: pointer;*/
}

#map-buttons .row div.active-button{
    cursor: pointer;
}
#map-interaction.navbar{
    padding: 0!important;
    align-items: unset!important;
}
#map-interaction.navbar .nav-link{
    padding: 0!important;
    display: contents!important;
}

#key > div{
    border-bottom: 1px solid black;
}
/*#key > div:nth-child(2n+1):nth-last-child(-n+2),*/
/*#key > div:nth-child(2n+1):nth-last-child(-n+2) ~ div {
    border-bottom: none;
}*/

#key > div:nth-child(odd){
    border-right: 1px solid black;
}

#key > div span {
    position: absolute;
    /* display: inline-block; */
    border-left: solid 1px black;
    width: 2rem;
    height: calc(2rem - 1px);
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;

   
}

#key > div.inactive-button span{
/*    background-color: #fff;
    background-image: radial-gradient(#dadada 15%, transparent 16%), radial-gradient(#dadada 15%, transparent 16%);
    background-size: 10px 10px;
    background-position: 0 0, 30px 30px;*/

/*
        background-color: #fff;
    background-image: radial-gradient(#dadada 25%, transparent 46%), radial-gradient(#dadada 25%, transparent 46%);
    background-size: 5px 5px;
    background-position: 0 0, 30px 30px;
*/

    /*fatter dots*/
/*
    background-color: #fff;
    background-image: radial-gradient(#a9a9a9 27%, transparent 29%), radial-gradient(#a9a9a9 27%, transparent 29%);
    background-size: 5px 5px;
    background-position: 0 0, 30px 30px;*/

 /*   background-color: #fff;
    background-image: radial-gradient(#dadada 27%, transparent 29%), radial-gradient(#dadada 27%, transparent 29%);
    background-size: 5px 5px;
    background-position: 0 0, 30px 30px;*/


    /*pin-prick*/
/*
    background-color: #fff;
    background-image: radial-gradient(#a9a9a9 25%, transparent 26%), radial-gradient(#a9a9a9 25%, transparent 26%);
    background-size: 5px 5px;
    background-position: 0 0, 30px 30px;*/

 /*   background-color: #fff;
    background-image: radial-gradient(#666666 25%, transparent 26%), radial-gradient(#666666 25%, transparent 26%);
    background-size: 5px 5px;
    background-position: 0 0, 30px 30px;*/

    background-image:url(svg/IAN_DOT_-03.svg);
    background-position: center;
    background-size: 64%;


}

/*#key > div:not(.active-button) span::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    bottom:1px;
    background-color: #ebebeb;
}*/

#key > div.selected span::before,
#key > div.selected span::after {
    position: absolute;
    content: '';
    width: 154%;
    left: -27%;
    height:1px;
    background-color: red;
}

/*#key > div:not(.active-button) span::before,
#key > div:not(.active-button) span::after{
    position: absolute;
    content: '';
    width: 154%;
    left: -27%;
    height:1px;
    background-color: #d9d9d9;
}*/

#key > div.active-button:not(.selected):hover span::before,
#key > div.active-button:not(.selected):hover span::after{
    position: absolute;
    content: '';
    width: 154%;
    left: -27%;
    height:1px;
    background-color: black;
}

#key > div.inactive-button span::before,
#key > div.active-button:hover span::before,
#key > div.selected span::before {
    transform: rotate(45deg);
}

#key > div.inactive-button span::after,
#key > div.active-button:hover span::after,
#key > div.selected span::after {
    transform: rotate(-45deg);
}

.up-down-button,
.reset-graph{
    cursor: pointer!important;
}
#page-map .up-down-button{
    display: none;
}
#page-artefact .reset-graph{
    border-right: solid 1px black;
    /*flex: 0 0 50%;*/
    /*max-width: 50%;*/
    /*display: none;*/
}
.mobile-show{
    display: none;
}

#map-interaction div{
    border-right: solid 1px black;
    border-bottom: solid 1px black;
    background-color: white;
    cursor: pointer;
}
.small-square{
    min-width: 2.8em;
}
#open-close-map-key{
    display: none;
}
#tool-tip:not(.open) #open-close-map-key::after{
    content: ">";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    font-size: 1.7em;
    text-align: center;
    line-height: 1.5em;
}
#tool-tip.open #open-close-map-key::after{
    content: "<";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    font-size: 1.7em;
    text-align: center;
    line-height: 1.5em;
}

#zoom-in::after{
    content: "+";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    font-size: 1.8em;
    text-align: center;
    line-height: 1.3em;
}

#zoom-out::after{
    content: "-";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
     font-size: 2em;
    text-align: center;
    line-height: 1.1em;
}

.main-info{
    border-bottom: solid black 1px;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.more-info-wrapper{
    padding: 0 1rem 1rem 1rem;
    /*display: none;*/
}

.flex-grow{
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: scroll;
}

#node-key{
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 15px;
    width: 7rem;
    line-height: 1.7rem;
    text-align: center;
    font-size: 0.75rem;
    z-index: 100;
}

/*#chart.hidden{
    opacity: 0;
    position: fixed;
    visibility: hidden;
    top: 0;
    left: 0;
}
*/

.scroll-blocker{
    display: none;

}
#chart.hidden .scroll-blocker{
    display: block;
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index: 100;
}

#chart{
    opacity: 1;
    visibility: visible;
    position: relative;
    /* top: 0; */
    /* left: 0; */
    height: 100vh;
    /*height: -webkit-fill-available;*/
    width: 100%;
    overflow: hidden;
    /*background-color: #f5f4f0;*/
    transition: opacity 1s ease-in;
}

#chart-info{
    background-color: white;
    /* display: none; */
    width: 0;
    font-family: NeueHaasRegular;
    overflow: scroll;
}

/*.g-node text{
    display: none;
    font-family: NeueHaasLight;
    text-transform: uppercase;
    font-size: 11px;
    fill: #3b3b3b;
    stroke:none;
}*/
.g-node text{
    font-family: NeueHaasRegular;
    text-transform: uppercase;
    font-size: 14px;
    fill: white;
    stroke:none;
}

.g-node:hover{
    cursor: pointer;
}

.g-node[hover="true"]{
    /*stroke:red!important;*/
    stroke-width:2!important;
}

.g-node[hover="true"] rect{
    fill:white!important;
}

.g-node[hover="true"][node-is-image="true"]{
    stroke:red!important;
    stroke-width:7!important;
}

/*.g-node[hover="true"] text{
    font-weight: bolder;
}*/
.g-node.artifact[hover="true"] text{
    fill: red;
}
.g-node.body[hover="true"] text{
    fill: black;
}
.g-node.body.institution[hover="true"] text{
    fill: #666666;
}
.g-node.archive[hover="true"] text{
    fill: #a9a9a9;
}
.g-node.history[hover="true"] text{
    fill: #ffbaba;
}

.g-node rect:not(.rect-background){
    stroke:none;
}

.g-node.artifact{
    stroke:red;
}
.g-node.artifact rect{
    fill: red;
}

.g-node.artifact text{
    fill: white;
}

.g-node.body {
    stroke: black;
}
.g-node.body rect{
    fill:black;
}
.g-node.body text{
    fill: white;
}

.g-node.body.institution{
    stroke:#666666;
}
.g-node.body.institution rect{
    fill:#666666;
}


.g-node.evidence{
    stroke:#9a9d92;
}
.g-node.evidence rect.rect-background{
    fill:red;
}

.g-node.archive {
    stroke: #a9a9a9;
}
.g-node.archive rect{
    fill:#a9a9a9;
}
.g-node.archive text{
    fill: white;
}


.g-node.history {
    stroke: #ffbaba;
}
.g-node.history rect{
    fill:#ffbaba;
}
.g-node.history text{
    fill: white;
}

#node-key .col-12{
    color:white;
}
.key-artefact{
    background-color: red;
}
.key-individual{
    background-color: black;
}
.key-archive{
    background-color: #a9a9a9;
}
.key-history{
    background-color: #ffbaba;
}
.key-institution{
    background-color: #666666;
}

.link {
    fill: none;
}


/*line[link-type="image"]{
    stroke:#ff0000;
}*/

line[line-selected="true"]{
    stroke:#ff0000;
    stroke-width:2;
}

line[link-type="evidence history"],
line[link-type="history evidence"],
line[link-type="artifact history"],
line[link-type="history artifact"],
line[link-type="body history"],
line[link-type="history body"]{
    /*stroke:#ff0000;*/
    /*stroke-width:1;*/
    /*stroke-dasharray:10,10;*/
}



/*PATTERN STYLES*/
.g-node{
    stroke-width:0.5;
}

text[text-wrap="true"]{
    text-transform: uppercase;
}

.g-node:hover text{
    display: block;
}

.g-node.fixed text{
    display: block;
}

.g-node.evidence text{
    fill:black;
}

.g-node.evidence[node-is-image="false"]{
    stroke:#ff0000;
    stroke-width:0.5;
}

.g-node[node-is-image="true"]{
    stroke:#ff0000;
    stroke-width:4;
}


#page-artefact .g-node[node-is-image="true"],
.g-node[node-is-image="true"][clicked="true"]{
    cursor:zoom-in;
    z-index: 10;
}


.ipad-zoom{display: none;visibility: hidden;}
/*Media Queries*/

@media (min-width: 2001px) { 

}



@media (max-width: 2000px) { 

}


@media (max-width: 1500px) { 

}

/*// Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) { 
    #tool-tip{
        width:34vw;
    }
    #zoom-image {
        width: 66vw;
    }

    .ipad-zoom{display: block;visibility: visible;}
}


/*// Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) { 
    #tool-tip{
        width:38vw;
    }
    #zoom-image {
        width: 62vw;
    }

    #map-interaction.row{
      width: 110%!important;
    }

    .ipad-zoom{display: block;visibility: visible;}
}


@media (min-width: 767.98px) { 

    #map-interaction.row{
        position: absolute;
        left: 100%;
        bottom: 0;
        width: 100%;
        margin-left: 0!important;
        border-top: solid 1px black;
        border-left: solid 1px black;
    }
    #page-map  #map-interaction{
        width: 60%;
    }

}


/*// Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) { 
    #key{
        max-height: calc(100vh - 6.1rem);
        padding-bottom: 10rem;
        overflow-y: scroll;
    }
    .mobile-hide {
        display: none!important;
    }
    .mobile-show{
        display: block;
    }
    #zoom-image.open{
        display: none;
    }
    svg{
        position: relative;
    }
    #tool-tip{
        /*position: relative;*/
        position:fixed;
        padding-top: calc(2.8rem - 1px);
        width: 45vw;
        /*padding-top:0;*/
        /*height:auto;*/
        /*border:none;*/
        /*background-color: transparent;*/
        left:-45vw;
        transition: left .5s;
        background-color: rgba(255,255,255,0.95);
        height: 5000px;
        top: 0px;
    }
    #tool-tip.open{
        left:0;
    }
    #tool-tip::before{
        content:"MAP MENU";
        position: relative;
        font-family: NeueHaasRegular;
        padding: 1rem 1em;
        height: 3.4rem;
        box-sizing: border-box;
    }

    #tool-tip .flex-grow{
        /*display: none;*/
        position: absolute;
        /* height: auto; */
        left: 45vw;
         width: 100%; 
        overflow-x: visible;
        overflow-y: visible;
    }
    #map-buttons .row div{
        border-right: none!important;
        background-color: transparent;
    }
 
    .main-info {
        position: absolute;
        top: 2.8rem;
        left: 45vw;
        /*border-left: solid 1px black;*/
        width: 100vw;
        height: 3.4rem;
        padding:0rem 1rem 0rem 2rem;
        background-color: rgba(255,255,255,0.95);
        z-index:100;
        box-sizing: border-box;
    }

    .main-info p{
        display: none;
    }
    #map-buttons{
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        background-color: transparent;
        z-index: 90;
    }
    #mobile-close-button{
        visibility: visible;
    }
    .more-info-wrapper{
        /*margin-top: 1rem; */
        display: none;
        position: absolute;
        top: calc(3.4rem + 1px);
        /* transform: translateY(-100%); */
        /* max-height: 20vh; */
        /* height: auto; */
        width: 100vw;
        overflow: scroll;
        padding: 1rem 1rem 1rem;
        background-color: rgba(255,255,255,0.95);
        /*border-top: solid 1px black;*/
        border-bottom: solid 1px black;
        padding:0.5rem 2rem 1rem 3rem;
        min-height: 6rem;
    }
    .more-info-wrapper.open{
        display: block!important;
    }
    #map-buttons .row div.small-square{
        width: 2rem;
        height:2rem;
        border:solid 1px black!important;
        border-top: none!important;
        border-left: none!important;
        position: absolute;
        background-color: rgba(255,255,255,0.95);
        left: 45vw;
        /*display: none;*/
    }
    #map-interaction.navbar {
        position: absolute;
        top: 0;
    }
    
    #page-artefact #map-buttons #map-interaction.navbar .nav-link{
        display: none!important;
    }
    #page-artefact #map-buttons #map-interaction.navbar .nav-link.active{
        display: contents!important;
    }

/*    #map-interaction.row.map-menu > div.small-square{
        display: block!important;
    }*/
    #zoom-in{
        top:2rem;
    }
    #zoom-out{
        top:4rem;
    }
  /*  #key::before{
        content:"KEY";
        position: relative;
        font-family: NeueHaasRegular;
        padding: 1rem 1em;
        border-bottom:1px solid black;
        width:100%;
    }*/
    #open-close-map-key{
        display: block;
    }
    #node-key{
     /*   display: none;
        position: relative;
        width: 100vw;*/
    }
}

/*// Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) { 

 }