.toolbar > .search-container {
    /* This will cause the search control to float to the right of the toolbar in all views */
    margin-left: auto;
}

.search-container > .search-control {
    border: 1px solid lawngreen; /*[1px solid {SearchControl-UnfocusedBorder-Background}]*/
    display: inline-flex;
    background-color: lawngreen; /*[{SearchControl-Unfocused-Background}]*/
}

.search-container.controlDisabled {
    background-color: lawngreen; /*[{SearchControl-Disabled-Background}]*/
    border-color: fuchsia; /*[{SearchControl-DisabledBorder-Background}]*/
}

    .search-container.controlEnabled > .search-control.hasFocus {
        background-color: lawngreen; /*[{SearchControl-FocusedBackground-Background}]*/
        border-color: fuchsia; /*[{SearchControl-FocusedBorder-Background}]*/
    }

    .search-container.controlEnabled > .search-control:hover {
        background-color: lawngreen; /*[{SearchControl-MouseOverBackground-Background}]*/
        border-color: fuchsia; /*[{SearchControl-MouseOverBorder-Background}]*/
    }

/*****
    INPUT CONTROL
*/

.search-control > input[type="search"] {
    padding: 0px 0px 0px 3px;
    background-color: transparent;
    border: none;
    width: 150px;
    color: fuchsia; /*[{SearchControl-Unfocused-Foreground}]*/
}

    .search-control.hasFocus > input[type="search"] {
        color: coral; /*[{SearchControl-FocusedBackground-Foreground}]*/
    }

    .search-control:hover > input[type="search"] {
        color: deeppink; /*[{SearchControl-MouseOverBackground-Foreground}]*/
    }

    .search-control > input[type="search"]:disabled {
        color: mediumorchid; /*[{SearchControl-Disabled-Foreground}]*/
    }

/*****
    ACTION BUTTON
*/

    .search-control .search-submit-button > svg {
        vertical-align: middle;
        margin-right: 2px;
    }

    .search-container.controlEnabled .search-submit-button:hover {
        background-color: lawngreen; /*[{SearchControl-ActionButtonMouseOver-Background}]*/
    }

    .search-container.controlDisabled .search-submit-button {
        background-color: transparent;
    }

    .search-container.controlDisabled .search-submit-button > svg .icon-vs-bg {
        fill: fuchsia; /*[{SearchControl-ActionButtonDisabledGlyph-Background}]*/
    }

    .search-container.controlDisabled .search-submit-button > svg .icon-vs-fg,
    .search-container.controlDisabled .search-submit-button > svg .icon-vs-out {
        fill: transparent;
    }

/*****
    DROP-DOWN BUTTON
*/

.search-control > .dropdown-button {
    display: inline-block;
    border-width: 0px 0px 0px 1px;
    background-color: lawngreen; /*[{SearchControl-UnfocusedDropDownButton-Background}]*/
    color: fuchsia; /*[{SearchControl-UnfocusedDropDownButtonGlyph-Background}]*/
    border-style: solid;
    border-color: fuchsia; /*[{SearchControl-UnfocusedDropDownButtonBorder-Background}]*/
}

    .search-control > .dropdown-button:after {
        font-family: Marlett !important;
        content: " 6"; /* 6 in Marlett font is down arrow */
        vertical-align: bottom;
    }

.search-container.controlEnabled > .hasFocus > .dropdown-button {
    background-color: lawngreen; /*[{SearchControl-FocusedDropDownButton-Background}]*/
    color: fuchsia; /*[{SearchControl-FocusedDropDownButtonGlyph-Background}]*/
    border-color: fuchsia; /*[{SearchControl-FocusedDropDownButtonBorder-Background}]*/
}

.search-container.controlEnabled .dropdown-button:hover {
    background-color: lawngreen; /*[{SearchControl-MouseOverDropDownButton-Background}]*/
    color: fuchsia; /*[{SearchControl-MouseOverDropDownButtonGlyph-Background}]*/
    border-color: fuchsia; /*[{SearchControl-MouseOverDropDownButtonBorder-Background}]*/
}

.search-container.controlEnabled .dropdown-button:active {
    background-color: lawngreen; /*[{SearchControl-MouseDownDropDownButton-Background}]*/
    color: fuchsia; /*[{SearchControl-MouseDownDropDownButtonGlyph-Background}]*/
    border-color: fuchsia; /*[{SearchControl-MouseDownDropDownButtonBorder-Background}]*/
}

.search-container.controlDisabled .dropdown-button {
    background-color: transparent;
    color: fuchsia; /*[{SearchControl-DisabledDownButtonGlyph-Background}]*/
    border-color: fuchsia; /*[{SearchControl-UnfocusedDropDownButtonBorder-Background}]*/
}

/*****
    OPTIONS FLYOUT
*/

#searchOptionsFlyout {
    position: absolute;
    overflow: auto;
    display: none;
    z-index: 9999;
    border: 1px solid red; /*[1px solid {SearchControl-PopupBorder-Background}]*/
    background-color: aquamarine; /*[{SearchControl-PopupItemsListBackgroundGradientBegin-Background}]*/
    color: fuchsia; /*[{SearchControl-PopupItemText-Background}]*/
    right: 0px;
}

    #searchOptionsFlyout.flyoutActive {
        display: grid;
    }

    #searchOptionsFlyout > * {
        display: block;
        padding: 2px 8px 2px 2px;
    }

    #searchOptionsFlyout > .flyoutHeader {
        grid-row: 1;
        padding-left: 4px;
        color: fuchsia; /*[{SearchControl-PopupSectionHeaderText-Background}]*/
    }

    #searchOptionsFlyout > .regExSetting {
        grid-row: 2;
    }

        #searchOptionsFlyout > .regExSetting.hasFocus {
            background-color: aquamarine; /*[{SearchControl-PopupControlMouseOverBackgroundGradientBegin-Background}]*/
            color: red; /*[{plugin-highlight-color}]*/
        }

    #searchOptionsFlyout > .caseSensitiveSetting {
        grid-row: 3;
    }

        #searchOptionsFlyout > .caseSensitiveSetting.hasFocus {
            background-color: aquamarine; /*[{SearchControl-PopupControlMouseOverBackgroundGradientBegin-Background}]*/
            color: red; /*[{plugin-highlight-color}]*/
        }