body{
    font-size: 16px;
    background-color: white;
}

.visible-xs { display: none !important; }
.visible-sm { display: none !important; }
.visible-md { display: none !important; }
.visible-lg { display: none !important; }
.visible-xl { display: none !important; }

@media (max-width: 543px) {
    .visible-xs {
        display: block !important;
    }
}

@media (min-width: 544px) and (max-width: 767px) {
    .visible-sm {
        display: block !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-md {
        display: block !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-lg {
        display: block !important;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    .visible-xl {
        display: block !important;
    }
}
@media (min-width: 1600px) {
    .visible-xxl {
        display: block !important;
    }
}

.roodborder{
    border: 3px solid red;
}

.groenborder{
    border: 3px solid green;
}

ul.no-style li{
    list-style: none;
}

div.blokje{
    float: left;
    width: 16px;
    height: 16px;
    border-right: 8px;
    border-color: silver;
    margin-left: 2px;
}
div.blokje.active{
    background: #0bb69f;
}

.leaflet-marker-icon i.fa-number{
    font-family: Roboto, Arial, SansSerif;
}

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

:root {
    --bs-primary: #0f6fb8;
    --bs-primary-rgb: 168,138,221;
    --bs-secondary: #6c757d;
}

.navbar{
    border-radius: 0;
    background-color: var(--bs-primary);
}

.navbar-brand{
    color: white;
}

.box-header{
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

#appbar{
    padding: 10px 31px;
    background-color: #ffffee;
    border-bottom: 1px solid silver;
}

.grayscale{
    filter: grayscale(1) opacity(0.5);
}

.label{
    float: left;
    font-size: 90%;
    border-radius: 15%;
}