html, body{
    width: 100vw;
    height: 100vh; 
    margin: 0;
}

body{
    font-family: "Faculty Glyphic", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;

    display: flex;
    flex-direction: column;
}

/* navbar */
nav{
    align-items: center;
    /* height: 3em; */
}

.navbar-toggler:focus{
    box-shadow: none;
}

/* spinner */
#spinner{
    position: fixed;
    top: 50%;
    left: 50%;
}

/* reference: https://www.w3docs.com/snippets/html/how-to-make-a-div-fill-the-height-of-the-remaining-space.html */
#content{
    flex-shrink:1;
    height: calc(100vh - 4em);
    margin: 0;
}

/* main map */
#crime-map{
    /* border: solid 5px black; */
    box-shadow: 3px 3px 3px 4px black;
    height: 100%;
}

.hide{
    display:none;
}

.leaflet-bar a{
    background-color: black;
    color: white;
}

.leaflet-bar a:hover{
    background-color: white;
    color: black;
}

.leaflet-control-layers{
    background-color: black;
}

.leaflet-control-layers-overlays{
    text-align: start;
    font-family: "Faculty Glyphic", sans-serif;
}

/* sidebar */
#sidebar{
    display: flex;
    flex-direction: column;
    height: 100%;
    border-right: solid 5px gray;
}

/* top sidebar */
#top_sidebar{
    /* box-shadow: 3px 3px 3px 3px black; */
    /* border-bottom: solid 5px black */
    margin: 0.8em 0.5em;
    border-radius: 15px;
    box-shadow: 3px 3px 5px 1px gray;
}

#top_sidebar .value_display{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    margin: 10px;
}

.form-control:focus{
    border: solid 1px black;
    box-shadow: none;
}

#sidebar input{
    width: auto;
}

.btn-close:focus{
    box-shadow: none;
}

#dateVisCollapse{
    margin: 0.8em 0.5em;
}

/* bottom sidebar */
#infoAccordion{
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    /* margin: 10px; */
}

#infoAccordion .nav-link{
    color: gray;
    background-color: black;
    border-radius:15px;
    /* border: 1px solid black;
    border-radius: 10px; */
}

#infoAccordion .active{
    color: black;
    background-color: white;
}

#infoAccordion .accordion-item{
    margin: 0.8em 0.5em;
}

.leaflet-interactive{
    outline: none;
}

/* 
#location-info{
    flex-shrink: 1;
    height: 100%;
    overflow-y: scroll;
} */

/* #loc-input{
    background-color: #fff;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 400px;       
} */

/* chart style */

.vis{
    /* margin: 0.8em 0.5em; */
    border-radius: 15px;
    box-shadow: 3px 3px 5px 1px gray;
}

.accordion-item .vis{
    margin-bottom: 1em;
}

.title{
    font-size: 0.6em;
}

.axis line,
.axis path {
	fill: none;
	stroke: #555;
	shape-rendering: crispEdges;
}

.tick text {
	font-family: sans-serif;
	font-size: 0.8em;
	fill: black;
}

/* area chart */
.area {
	fill: #825a5a;
}

/* area chart brush */
.brush {
	fill: #ccc;
	fill-opacity: .5;
	pointer-events: none;
}

/* bar chart */
.bar {
    stroke: #000;
    stroke-width: 1px;
}