facetwp fselect css

/** you may need to use !important to force css styles 
 ** width: 300px !important;
 ** or see https://www.w3schools.com/css/css_specificity.asp for adding css specificity to your css
 ** rules
 **/

/** change width of fselect **/
.facetwp-type-fselect .fs-wrap,
.facetwp-type-fselect .fs-dropdown {
    width: 300px;
}

/** target a specific fselect by facet name, change "categories" to name of your facet **/
.facetwp-facet-categories.facetwp-type-fselect .fs-wrap,
.facetwp-facet-categories.facetwp-type-fselect .fs-dropdown {
    width: 300px;
}

/** increase fselect height **/
.facetwp-type-fselect .fs-dropdown .fs-options {
    max-height: 300px;
}

/** style box for fselect **/
.facetwp-type-fselect .fs-label-wrap {
    border: none;
}

/** move dropdown arrow **/
.facetwp-type-fselect .fs-arrow {
    right: 100px;
}

/** position arrow for dropdown relative to label instead of far right of container **/
.facetwp-type-fselect .fs-arrow {
    display: inline-block;
    position: relative;
    top: -10px;
    right: auto;  /** use a value such as right: 10px; to move closer to label **/
    left: auto;
    bottom: auto;   
}
.facetwp-type-fselect .fs-label-wrap .fs-label {
    display: inline-block;
}

/** use a character instead of space to indicate sub categories **/
.facetwp-type-fselect .fs-option.d1 .fs-option-label {
  padding-left: 0;
}
.facetwp-type-fselect .fs-option.d1 .fs-option-label:before {
  content: "-";
  display: inline-block;
}