.f4menu.alt>div {
    padding: 8px;
}

.f4menu .crow  {
    font-size: 14px;
    cursor: pointer;

    padding: 11px 14px;
    height: auto;
    line-height: 19px;
    white-space: normal;
    user-select: none;
}

.f4menu.alt .crow {
    border-radius: 4px;
    margin: 2px 0px;
    padding: 8px 14px;
}

.f4menu .crow .icon {
    font-size: 17px;
    margin-right: 8px;
    position: relative;
    top: -3px;
    vertical-align: middle;
    height: 14px;
 }
.f4menu .crow .icon:not(.material-symbols-rounded) {
    display: inline-flex;
    align-items: center;
    top: -1px;
}
.f4menu .crow .icon > svg {
    width: 1em;
    height: 1em;
}

.f4menu .crow.separator {
    height: 8px;
    padding: 4px 0; /*12px;*/
    cursor: default;
}
.f4menu.alt .crow.separator {
    padding: 4px 0px;
}
.f4menu .crow.separator hr {
    border: 0.5px solid var(--pri-border);
    margin: 0px 0px;
}

.f4menu .crow.hover {
    background-color: color-mix(in hsl, var(--theme-pri), var(--pri-background) 86%);
}

.f4menu.solidhover .crow.hover {
    background-color: var(--theme-pri);
    color:white;
}
.f4menu .crow.frow {
    cursor: default;
    text-align: center;
    color: #ccc;
    font-style: italic;
    padding-bottom: 20px;
}

.f4menu input.f4select-search {
    width: calc(100% - 32px);
    margin: 4px 16px 0px;
    border: none;
    padding: 7px 0px;
    padding-right: 30px;
    background: transparent;
    color: var(--ter-label);
    padding-left: 20px;
}

.f4menu>div:has(input.f4select-search)::before {
    --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M9.539 15.23q-2.398 0-4.065-1.666Q3.808 11.899 3.808 9.5t1.666-4.065T9.539 3.77t4.064 1.666T15.269 9.5q0 1.042-.369 2.017t-.97 1.668l5.909 5.907q.14.14.15.345q.009.203-.15.363q-.16.16-.354.16t-.354-.16l-5.908-5.908q-.75.639-1.725.989t-1.96.35m0-1q1.99 0 3.361-1.37q1.37-1.37 1.37-3.361T12.9 6.14T9.54 4.77q-1.991 0-3.361 1.37T4.808 9.5t1.37 3.36t3.36 1.37'/%3E%3C/svg%3E");
    color: inherit;
    content: "";
    background-color: currentColor;
    mask-position: center;
    mask-size: 17px;
    mask-image: var(--search-icon) !important;
    mask-repeat: no-repeat;
    position: absolute;
    left: 15px;
    width: 18px;
    height: 41px;
} 
.f4menu.alt>div:has(input.f4select-search)::before {
    left: 20px;
    height: 33px;
} 

.f4menu input[type="search"]::-webkit-search-decoration,
.f4menu input[type="search"]::-webkit-search-cancel-button,
.f4menu input[type="search"]::-webkit-search-results-button,
.f4menu input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}
.f4menu.alt input.f4select-search {
    width: calc(100% - 28px);
    margin: 0% 14px;
}
.f4menu .f4select-spinner {
    position: absolute;
    top: 8px;
    left: calc(100% - 40px);
}
.f4menu.alt .f4select-spinner {
    top: 12px;
    left: calc(100% - 47px);
}
.f4menu input.f4select-search:focus {
    box-shadow: none;
}

.f4menu .crow.checked {
    padding-right: 32px;
    background-color: var(--theme-pri);
    color:white;
    position: relative;
}
.f4menu .crow.checked::before {
    --check-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z'/%3E%3C/svg%3E");
    color: inherit;
    content: "";
    background-color: currentColor;
    mask-position: center;
    mask-size: 19px;
    mask-image: var(--check-svg) !important;
    mask-repeat: no-repeat;
    position: absolute;
    right: 8px;
    width: 19px;
    height: 19px;
} 
.close-icon {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    color: var(--pri-label);
}
.close-icon::before {
    --close-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z'/%3E%3C/svg%3E");
    color: inherit;
    content: "";
    background-color: currentColor;
    mask-position: center;
    mask-size: 16px;
    mask-image: var(--close-svg) !important;
    mask-repeat: no-repeat;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 16px;
    height: 16px;
}
.f4menu .crow.checked.hover {
    opacity: 0.8;
}
.f4menu .crow.hover:active {
    background-color: var(--theme-pri);
    color: white; 
}
.f4menu .srow {
    background-color: var(--pri-background);
    font-weight: normal;
    font-size: 12px;
    padding: 26px 14px 3px;
    line-height: 16px;
    cursor: default;
    color: var(--theme-pri);
}