#logo-container {
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}

#logo-img {
    margin-top: 20px;
    width:280px;
    height: auto;
    /*width: auto;*/
    /*height: 200px;*/
}

.filter-button-container { width: fit-content; }
.d-inline {
    display: inline-block;
}

.dropdown-menu {
    z-index: 10001;
}

#map-side-bar {
    padding: 10px;
    padding-right: 0px;
    height: 100%;
}

#map-side-bar > .card {
    border-radius: 20px;
}
#centre-info-container > .card-text {

    height: 90%;
    overflow-y: auto;
}

#centre-info-container {
}

#centre-info-close {
    width: .1em;
}


#map {
    margin: auto;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    position: relative;
    /*z-index: 500;*/
}

.leaflet-popup-content-wrapper {
    z-index: 5000;
}

#map-container {
    height: 90vh;
    padding: 10px 0px;
}

#map .icon {
    width: 0;
    height: 0;
    border: 0;
    padding: 0;
}

#map .icon div {
    display:inline-block;
    padding: 8px;
    border: 1px solid #666;
    border-radius: 8px;
    /*opacity: 0.5;*/
}

.icon-svg{
    height: 20px;
    width: 20px;
}

.dotted {
    stroke: yellow;
    stroke-width: 3;
    stroke-dasharray: 0.1, 3;
    stroke-linecap: round;
}
.icon-something {
    height: 16px;
    width: 16px;
    color: green;
    font-weight: bold;
    text-align: center;
    line-height: 100px;
}



/*.t0-icon { fill:red; }*/
/*.t1-icon { fill:blue; }*/
#map .t0-icon div { background:red; }
#map .t1-icon div { background:blue; }
#map .t2-icon div { background:green; }
#map .t3-icon div { background:yellow; }
#map .t4-icon div { background:orange; }
#map .t5-icon div { background:purple; }
#map .t6-icon div { background:cyan; }
#map .t7-icon div { background:fuchsia; }
#map .t8-icon div { background:lime; }
#map .t9-icon div { background:navy; }
#map .t10-icon div { background:teal; }
#map .t11-icon div { background:maroon; }
#map .t12-icon div { background:lightpink; }
#map .t13-icon div { background:saddlebrown; }
#map .t14-icon div { background:seashell; }
#map .t15-icon div { background:silver; }
#map .t16-icon div { background:peachpuff; }
#map .t17-icon div { background:rosybrown; }
#map .t18-icon div { background:peru; }
#map .t19-icon div { background:slategray; }
#map .t20-icon div { background:yellowgreen; }
#map .t21-icon div { background:tomato; }
#map .t22-icon div { background:plum; }
#map .t23-icon div { background:powderblue; }
#map .t24-icon div { background:olive; }
#map .t25-icon div { background:steelblue; }



.marker_popup {
    /*background:blue;*/
    padding: 0;
    margin: 0;
}

.legend {
    line-height: 18px;
    color: #555;
    background: #ffffff;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    padding-left: 10px;
    opacity: 0.9;
    /*border-radius: 15px;*/
    max-height: 50vh;
    overflow: auto;
}

.legend-container {
    opacity: 0.97;
}

.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
}

.legend-hide {
    position:absolute;
    top:0px;
    right:0px;
}

.legend-item {
    margin-bottom: 3px;
    margin-top: 3px;
    cursor: pointer;
}

.legend-icon {
    border-radius: 10px;
}

.legend-item-hidden {
    text-decoration: line-through;
}

.leaflet-popup {
    min-width: 250px;
}

#centre-type-dropdown .dropdown-menu { min-width:220px; }
#treatment-type-dropdown .dropdown-menu { min-width:550px; }
#substance-treatment-dropdown .dropdown-menu { min-width:220px; }
#age-group-dropdown .dropdown-menu { min-width:250px; }

#header {
    width: 100%;
    height: 180px;
    background-color: #1218c6;
    margin-bottom: 20px;
}
#header-1 {
    width: 100%;
    height: 40px;
    background-color: #bb0a62;
}

#footer {
    margin-top: 140px;
    position: relative;
    bottom: 0;
    width: 100%;
    /*height: 380px;*/
    background-color: #1218c6;

}
#footer-1 {
    width: 100%;
    /*height: 300px;*/
    background-color: #bb0a62;
}

#initial-content-container h1 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    font-family: Raleway,sans-serif;
}

.page-wrapper {
    min-height: 640px;
}

.detail-treatment {
    max-width: 350px!important;
    min-width: 250px!important;
}

#base-layer-type {
    /*border-radius: 15px!important;*/

    /*#0d6efd;*/

}

#base-layer-type:hover { background-color: #ffffff; color: #0d6efd; border-color: #0a58ca; }
#base-layer-type:active { background-color: #ffffff; color: #0d6efd;  box-shadow: 0 0 0 0; }
#base-layer-type:focus { background-color: #ffffff; color: #0d6efd; box-shadow: 0 0 0 0; }

#group-by-info {
    margin-right: 0;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
#base-layer-dropdown > a {
    border-top-left-radius: 0px!important;
    border-bottom-left-radius: 0px!important;
}
#group-by-info[disabled] {
    opacity: 1;
}

#selector-form-submit{
    /*width: 30%;*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
}

@media (max-width: 992px) {
    #map-selector-form {
        /*width: 80%;*/
        margin-left: auto;
        margin-right: auto;
    }

    #map-side-bar{
        padding: 0px;
    }
    #map-side-bar > .card {
        margin-right: 10px;
    }

    #map-side-bar-container {
        margin-top: 1.5rem!important;
    }
}

@media (min-width: 992px) {
    #map-controls {
        float: right;
    }
}
@media (max-width: 992px) {
    #filter-controls {
        /*margin-right: 1.5rem;*/
    }
    #map-controls {
        margin-top: 20px;
        /*padding-left: 25px;*/
        /*padding-right: 25px;*/
        width: 100%;
    }
    #map-controls > .btn-group {
        width: 100%;
    }
    #group-by-info {
        width: 50%;
    }
    #base-layer-dropdown {
        width: 50%;
    }
    #base-layer-type {
        width: 100%;
    }
    .leaflet-popup {
        width: 320px;
    }
}

.sp_active {
    font-size: 0.85rem!important;
}

.info-title {
    font-weight: 600;
}

.custom_scrollbar::-webkit-scrollbar {
    width: 10px;
}

/* Track */
.custom_scrollbar::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 5px;
}

/* Handle */
.custom_scrollbar::-webkit-scrollbar-thumb {
    background: #1218c6;
    border-radius: 5px;
}

/* Handle on hover */
.custom_scrollbar::-webkit-scrollbar-thumb:hover {
    background: #1218c6;
}

.btn-primary {
    /*background-color: #1218c6!important;*/
}

.select-all {
    padding: .4rem .6rem;
    font-size: .8rem;
    line-height: .75;
    border-radius: 1rem;
    margin-bottom: .2rem;
}
#search-map-container {
    width: 96%
}
#search-map-results {
    position: absolute;
    z-index: 1001;
}


.marker-cluster-small {
    background-color: rgba(181, 226, 140, 0.6);
}
.marker-cluster-small div {
    background-color: rgba(110, 204, 57, 0.6);
}

.marker-cluster-medium {
    background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
    background-color: rgba(240, 194, 12, 0.6);
}

.marker-cluster-large {
    background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
    background-color: rgba(241, 128, 23, 0.6);
}

/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
    background-color: rgb(181, 226, 140);
}
.leaflet-oldie .marker-cluster-small div {
    background-color: rgb(110, 204, 57);
    /*background: linear-gradient(#e66465, #9198e5);*/
}

.leaflet-oldie .marker-cluster-medium {
    background-color: rgb(241, 211, 87);
}
.leaflet-oldie .marker-cluster-medium div {
    background-color: rgb(240, 194, 12);
}

.leaflet-oldie .marker-cluster-large {
    background-color: rgb(253, 156, 115);
}
.leaflet-oldie .marker-cluster-large div {
    background-color: rgb(241, 128, 23);
}
.cluster-border {
    background-color: rgba(139, 174, 239, 0.4);
}
:root {
    --red: #e66465;
    --blue: #3747DAFF;
    --green: #64b73e;
    --yellow: #e6d564;
    --orange: #e68b64;
    --purple: #8f64e6;
    --cyan: #64dbe6;
    --fuchsia: #e87ce8;
    --lime: lime;
    --navy: navy;
    --teal: teal;
    --maroon: maroon;
    --lightpink: lightpink;
    --saddlebrown: saddlebrown;
    --seashell: seashell;
    --silver: silver;
    --peachpuff: peachpuff;
    --rosybrown: rosybrown;
    --peru: peru;
    --slategray: slategray;
    --yellowgreen: yellowgreen;
    --tomato: tomato;
    --plum: plum;
    --powderblue: powderblue;
    --olive: olive;
    --steelblue: steelblue;
}


.marker-cluster2 {
    background-clip: padding-box;
    border-radius: 20px;
}
.marker-cluster2 div {
    color: white;
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;

    text-align: center;
    border-radius: 15px;
    font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.marker-cluster2 span {
    line-height: 30px;
}