/* In order to have the #map visible with 90% height of viewport, its
surrounding containers must be at 100%. */
html, body, .fill {
    height: 100%;
}

/* Set map height. */
#map {
    height: 50%;
}

/* The following hack must be done in order to allow for .fill to take-up 100%
of the viewport, without showing the scrollbar (otherwise the actual body will
end-up being more than 100% of the viewport). */
body {
    box-sizing: border-box;
    padding-top: 71px;
    z-index: 1;
    padding-bottom: 21px;
}

.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

/* Colour style for marking positive opinion glyphicons. */
.opinion-positive {
    color: #90ee90;
}

/* Colour style for marking negative opinion glyphicons. */
.opinion-negative {
    color: #ff0000;
}

/* For small devices, center the button controls, and make the buttons take-up
   30% of container. Similar for form controls. */
@media (max-width: 768px) {
    .btn {
        width: 30%;
        margin-top: 4px;
    }

    .ppgis-select {
        margin-top: 4px;
    }

    .button-controls {
        text-align: center;
    }
}

/* Make the staff indicator use a distinct red colour. */
.staff {
    color: #d2322d;
    font-weight: bold;
}

/* Hide the checkbox itself, and use glyphicons to show checkbox status to user. */
#new-positive {
    display: none;
}
#new-positive:checked+label[for=new-positive] > #new-is-negative {
    display: none;
}
#new-positive:not(:checked)+label[for=new-positive] > #new-is-positive {
    display: none;
}