/*********************
 ** Faceted Browser
 **/

#dhp-visual {
    overflow: auto;
}


    /* The entire container for facets -- the svg element goes inside this */
#facets-frame {
    margin: 6px;
    border: 1px black solid;
    overflow: auto;
    resize: both;
}

    /* A single vertical frame for one facet */
.facet-column {
}

    /* The top label for a facet (its background rectangle) */
    /* Each has the ID "facet-"+facetIndex */
.facet-label {
    fill:  #0099FF;     /* sky-blue */
    cursor: ew-resize;  /* horizontal resize */
}

.facet-label-text {
    font-size: 16px;
    font-family: sans-serif;
    font-weight: bold;
    fill: black;
    text-anchor: start;
    cursor: ew-resize;  /* horizontal resize */
}

    /* The button+label for a single facet value */
    /* Each has the ID "facet-"+facetIndex+"-"+facetValueIndex */
.facet-val {
}

.facet-val-button {
    cursor: pointer;
    fill: #00CCFF;      /* light-blue */
    transition: fill .75s;
}

    /* the color to show percentage */
.facet-val-bar {
    cursor: pointer;
    fill: #0099FF;      /* dark-blue */
    transition: fill .75s;
}

.inactive .facet-val-button {
    fill: #D0D0D0;      /* light-grey */
}

    /* the color to show percentage */
.inactive .facet-val-bar {
    fill: #B0B0B0;      /* dark-grey */
}

.facet-val-text {
    cursor: pointer;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: normal;
    text-anchor: start;
    fill: black;
}

.facet-val-perc {
    cursor: pointer;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: normal;
    text-anchor: end;
    fill: black; 
}

    /* The RESET button for a facet column */
.facet-reset-button {
    cursor: pointer;
    fill: #FF3333;          /* light-red */
    transition: fill .75s;
}

.facet-reset-text {
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
    font-family: sans-serif;
    fill: black;
    text-anchor: start;
}

    /* Grey out RESET if inactive */
.inactive .facet-reset-button {
    fill: #A8A8A8;         /* light-grey */
}

.inactive .facet-reset-text {
    fill: #808080;
}

    /* ======== SELECT LIST BOX BELOW ======== */

#list-scroll {
    margin: 6px;
    height: 100px;
    overflow: auto;
    border: 1px black solid;
    font: 12px sans-serif;
    background-color: white;
    resize: both;
}

#marker-list {
    padding: 4px;
    cursor: pointer;
}

.marker-item:hover {
    background-color: yellow;
}