/* Scrollbars */
::-webkit-scrollbar {
    width: 10px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); #
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(128,128,128,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}

#appcontainer {
    min-width: 800px;
    width:100%;
    height:100vh;
    position:relative;
    overflow:hidden;
    background: url('../images/bgpattern.jpg');
    color:#fff;
}
#topline {
    position: fixed;
    z-index: 2;
    top:0;
    left:0;
    min-width:800px;
    width:100%;
    height: 50px;
    background:rgba(0,0,0,.75);
}
#menu {
    position: fixed;
    z-index: 2;
    top:50px;
    left:0;
    width:50px;
    height: calc(100vh - 50px);
    background:rgba(0,0,0,.85);
}
#menu ul {
    list-style: none;
    margin: 20px 0 0 0;
    padding:0;
}
#menu ul li {
    cursor: pointer;
}
#menu ul li.active {
    background:rgba(68, 112, 161, 0.80);
    transition: .3s;
}
#menu ul li:hover {
    background:rgba(68, 112, 161, 0.85);
    transition: .3s;
}
#menu ul li svg  {
    fill:#fff;
    width:30px;
	height:30px;
    padding: 10px;
}

#sidebar {
    position: fixed;
    z-index: 2;
    top: 50px;
    left: 50px;
    /*min-width: 400px;*/
    height: calc(100dvh - 50px);
    background:rgba(0,0,0,.77);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
	-webkit-overflow-scrolling:touch;
}
.fadeOut {
    transition: .3s;
    opacity: 0;
}

#sidebar, #sidebar section {
    transition: .3s opacity;
    /*font-size: .9em;*/
}

#sidebar section h3 {
    font-size:1em;
    font-weight:400;
    text-transform: uppercase;
    text-align: center;
    color:#ccc;
}
#sidebar section h4 {
    padding:.3em 1em;
    font-size:.75em;
    background:rgba(255,255,255,.1);
    text-transform: uppercase;   
    margin:0;
    font-weight:400;
}
#sidebar section div.container {
    padding: 1em;
    position: relative;
}
#sidebar section div.container-scroll {
    font-size:.85em;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 700px;
}
#sidebar section > div.no-padding {
    /*padding top and bottom but not left and right*/
    padding:1em 0;
}
#map {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100vh;
}

#topline > h1 {
    font-size:1.3em;
    font-weight: 400;
    position: absolute;
    top:10px;
    left:95px;
    display: inline;
    margin:0;
    padding:0;
}
#topline > h2 {
    font-size:1.1em;
    font-weight: 400;
    position: absolute;
    top:12px;
    right:25px;
    display: inline;
    margin:0;
    padding:0;
    color:#bbb;
}
#topline a {
    color:#fff;
    text-decoration: none;
}
#hcglogo {
    position: fixed;
    top:-10px;
    left:15px;
    width:69px;
    z-index: 3;
}
#map_zoom_slider {
	top:auto;
	left:auto;
	bottom:50px;
	right:20px;
}
.top-buffer {
    margin-top: 1em;
}
.bottom-buffer {
    margin-bottom: 1em;
}