#keywordSearch {
    background-image: url('../../../images/home/B-Search.png');
    background-repeat: no-repeat;
    background-position: 1% 4px;
    width: 65%;
    border-radius: 10px;
    font-weight: normal;
    border: 1px solid #8f9a9f;
    height: 40px;
    padding: 10px 40px;
    margin-left: -40px;
    margin-right: -40px;
}


@media (max-width: 600px) {

    #keywordSearch {
        width: 90% !important;
    }

    #ui-id-1 {
        width: 83.6% !important;
    }

    .ui-menu-item-wrapper {
        width: 90% !important;
    }

    .ui-menu-item-wrapper:after {
        right: -1.7em !important;
    }

    .closeButton {
        left: 83.6% !important;
    }
}

.ui-menu-item-wrapper:after { /*right arrow symbol*/
    right: -1.4375em;
    top: 50%;
    margin-top: -11px;
    content: "";
    position: absolute;
    display: block;
    width: 22px;
    height: 22px;
    background-color: #666;
    background-color: rgba(0,0,0,.3);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%223.404%2C2.051%208.354%2C7%203.404%2C11.95%205.525%2C14.07%2012.596%2C7%205.525%2C-0.071%20%22%2F%3E%3C%2Fsvg%3E);
}


.closeButton { /*close symbol*/
    top: 71px;
    position: absolute;
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: #666;
    background-color: rgba(0,0,0,.3);
    background-repeat: no-repeat;
    -webkit-border-radius: 1em;
    background-position: center;
    border-radius: 1em;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C3%2011%2C0%207%2C4%203%2C0%200%2C3%204%2C7%200%2C11%203%2C14%207%2C10%2011%2C14%2014%2C11%2010%2C7%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E);
    cursor:pointer;
}

.hideClose {
    display:none;
}


#ui-id-1 { /* ul element*/
    border-radius: 6px !important;
    border-right-width: 1px;
    border-left-width: 1px;
}

.ui-state-active {
    border: unset !important;
    background: unset !important;
    color: #333 !important;
    margin:unset !important;
    font-weight:unset !important;
}

.ui-menu-item { /* li item*/
    -webkit-border-top-right-radius: inherit;
    border-top-right-radius: inherit;
    -webkit-border-top-left-radius: inherit;
    border-top-left-radius: inherit;
    border-right-width: 1px;
    border-left-width: 1px;
    border-width: 1px 0 0;
    border-style: solid;
    margin: 0;
    display: block;
    position: relative;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background-color: #fafafa !important;
    border-color: #d7d7d7;
    color: #333;
    text-shadow: 0 1px 0 #f3f3f3;
    padding: 2px;
    border-color: #cecece !important;
    font-weight: 700;
}

.ui-menu-item:hover {
    background-color: #ededed !important;
    border-radius:0px !important;
}


.ui-menu-item:focus, .ui-menu-item:active {
    box-shadow: 0 0 12px #38c !important;
    z-index:2 !important;
}

.ui-menu-item-wrapper { /*div inside li*/
    padding: 10px !important;
    white-space: initial;
    width: 95%;
}