/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.custom-combobox {
    position: relative;
    display: inline-block;
	width: 100%;
}
.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
}
.custom-combobox-input.ui-widget.ui-widget-content {
	background-color: transparent;
	border: 2px solid #fff;
	border-radius: 0;
	color: #fff;
	height: 40px;
    margin: 0;
    padding: 5px 10px;
}
.custom-combobox-input.ui-widget.ui-widget-content.ui-widget-content-focus {
	border: 2px solid #ffcc0d;
}
input.custom-combobox-input.ui-widget.ui-widget-content.ui-state-default.ui-corner-left.ui-autocomplete-input {
	width: calc(100% - 36px);
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
	background-color: transparent;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	border-right: 2px solid #fff;
	border-top: 0;
	color: #fff;
	max-height: 255px;
	overflow-x: hidden;
	overflow-y: scroll;
}
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li:hover
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li div:hover {
	background-color: rgba(255,255,255,0.30) !important;
}
.ui-widget {
	max-width: 600px;
	margin: 0 auto;
}
.ui-button.ui-widget.ui-button-icon-only.custom-combobox-toggle.ui-corner-right {
	border: 2px solid #fff;
	border-radius: 0;
}