/* 
 * 	Define the site-wide containers
 */

html, body, #container {
    height: 100%;
    width: 100%;
    overflow: hidden
}

body {
    padding-top: 63px
}

h2, .h2 {
    font-size: 20px
}

/*
 *  NavBar
 */
 
.navbar .navbar-brand {
    font-weight: bold;
    font-size: 25px
}

.navbar .navbar-brand img {
    height: 35px;
    margin-top: -8px;
    margin-right: 5px
}

i {
    margin-right: 5px
}

.pull-right {
    float: right
}

/*
 *  Sidebar
 */
 
#sidebar {
    width: 450px;
    height: 100%;
    max-width: 100%;
    float: left;
    overflow-y: auto;
    /* animation */  
    transform: translate(0%, 0%);
    transition: all 0.75s ease-in-out;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out
}

#sidebar * img {
 /* width: 100px;	*/
}

#sidebar.active {
    width: 0px;
    transform: translate(-150%, 0%);
    transition: all 0.75s ease-in-out;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out
}

#sidebarContents {
    width: 100%
}

#sidebar .card {
    margin: 5px 5px 0px 5px
}

/*
 * Responsive tweaks for small screens
 */
@media (max-width: 991px) { /* Better alignment of Navbar with bootstrap 'LARGE' after collapsing */
    #sidebar {
        width: 100%
    }
    .navbar-brand img {
        margin-left: -10px
    }
    .navbar-nav .nav-link {
        padding-left: 5px
    }
}

/* 
 * 	Leaflet Map
 */
  	
/* Define the size of map, which should always be full screen. The sidebar overlays. */
#batmap {
    width: auto;
    height: 100%;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) */
}

/* Hide rather annoying Mapbox logo, possible copyright issue? */
.leaflet-control-attribution { display: none !important } /* Doesn't seem to display the correct copyright, so hiding for now */

/* 
 *	Control buttons - http://danielmontague.com/projects/easyButton.js/v2/examples/
 */
#batmap .easy-button-button {
    border-radius: 4px;
    font-size: 16px;
    position: relative;
    display: block;
    top: 0;
    width: 100%;
}

#batmap .easy-button-container { background-color: white } /* Fixes tiny gap between bar items */


/* 
 * 	Leaflet Markers
 */
 
/* Using example from https://webdesign.tutsplus.com/articles/manipulating-svg-icons-with-simple-css--webdesign-15694 */
.quatcirc { /* For 45deg segments // Create the circle */
    position: absolute;
    left: -7px;
    top: 5px;
    width: 25px;
    height: 25px;
    border: 7px solid;
    z-index: -3;
    border-radius: 50%;
    transform: rotate(45deg);
    border-top-color: var(--first, transparent);
    border-right-color: var(--half, transparent);
    border-bottom-color: var(--third, transparent);
    border-left-color: var(--full, transparent)
}

.ring { /* MIDDLE */
    position: absolute;
    left: -9px;
    top: -9px;
    width: 40px;
    height: 40px;
    border: 4px solid;
    border-radius: 50%;
    border-top-color: var(--middle-up, transparent); /* North */
    border-right-color: var(--middle-right, transparent); /* East */
    border-bottom-color: var(--middle-bottom, transparent); /* South */
    border-left-color: var(--middle-left, transparent); /* West */
    /* Pulsate the circle * /
     * TODO: Disabled the animation for now, as it causes high CPU usage even when transparent. Needs replacing with animated GIF or something.
    -webkit-animation: pulsate 1s ease-out; 
    -webkit-animation-iteration-count: infinite; 
    */
}
.ring::after { /* OUTSIDE */
    content: '';
    position: absolute;
    z-index: -3;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border: 4px solid;
    border-radius: 50%;
    border-top-color: var(--outside-up, transparent); /* North */
    border-right-color: var(--outside-right, transparent); /* East */
    border-bottom-color: var(--outside-bottom, transparent); /* South */
    border-left-color: var(--outside-left, transparent); /* West */
}
.ring::before { /* INSIDE */
    content: '';
    position: absolute;
    z-index: -3;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 4px solid;
    border-radius: 50%;
    border-top-color: var(--inside-up, transparent); /* North */
    border-right-color: var(--inside-right, transparent); /* East */
    border-bottom-color: var(--inside-bottom, transparent); /* South */
    border-left-color: var(--inside-left, transparent); /* West */
} 

@-webkit-keyframes pulsate {
    0% { -webkit-transform: scale(0.9, 0.9); opacity: 0.3 }
    50% { -webkit-transform: scale(1, 1); opacity: 1.0 }
    100% { -webkit-transform: scale(1.3, 1.3); opacity: 0.0 }
}