/*
 * this control is hastily hand-coded for a specific use case, so pardon some imperfections
 * note the use of d-none CSS class to show/hide content, which is Bootstrap 4
 */


.leaflet-control-layerpicker {
}

.leaflet-control-layerpicker-panel {
    background-color: white;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    border-radius: 4px;

    padding: 5px;
}
.leaflet-control-layerpicker-panel > a {
    float: right;
    font-size: 25px;
    font-weight: bold;

    line-height: 0;
    margin: 5px 0 5px 5px;

    cursor: pointer;
}

.leaflet-control-layerpicker-layer {
    font-size: 13px;
}
.leaflet-control-layerpicker-layer label {
    margin: 0 0 3px;

    cursor: pointer;
}

.leaflet-control-layerpicker-layer input {
    position: relative;
    top: 2px;
    margin-right: 5px;
}

.leaflet-control-layerpicker-layer-legend {
    margin-left: 18px;

    padding-bottom: 5px;
}

.leaflet-control-layerpicker-layer-legend-wrapper {
    display: flex;
    align-items: center;
}

.leaflet-control-layerpicker-layer-legend-wrapper > span {
    display: inline-block;
}

.leaflet-control-layerpicker-layer-legend-swatch {
    height:15px;
    width: 15px;

    margin-right: 5px;
}

.leaflet-control-layerpicker-openbutton {
    background-color: white;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    border-radius: 4px;

    width: 32px;  /* yes, unusually large but intentional */
    height: 32px;
}
.leaflet-control-layerpicker-openbutton i {
    font-size: 24px;

    margin-top: 4px;
    margin-left: 4px;

    cursor: pointer;
}