#city-square-element {

direction: rtl;

border-top: solid 1px #00c800;

text-align: right;

width: 100%;

height: 112px;

position: relative;

padding-top: 12px;

font-family: "Open Sans Hebrew","Helvetica Neue",Helvetica,Arial,sans-serif;
}

#city-square-element .before-after-wrapper {
    display: none;
}

#city-square-element .title{
    
font-size: 18px;
    
font-weight: bold;
    
margin-bottom: 15px;
}




#city-square-element .search{
    
border: none;
    
position: absolute;
    
top: 12px;
    
left: 11px;
    
width: 17px;
}

#city-square-element .input-wrapper {
    width: calc(100% - 142px);
    position: relative;
}

#city-square-element input{
    
border: none;
    
border-radius: 2px;
    
background-color: #f3f3f3;
    
height: 42px;
    
width: 100%;
    
font-size: 14px;
    
padding-right: 10px;
    
font-weight: bold;
    
cursor: text;
}

#city-square-element .auto-complete {

background-color: white;

list-style: none;

padding: 0;

position: absolute;

margin: 0;

font-size: 14px;

-webkit-tap-highlight-color: transparent;

height: 0;

z-index: 878888888888888888888888888888;

overflow: hidden;

width: 100%;

box-sizing: border-box;

cursor: pointer;

transition: height 0.5s;

box-shadow: -webkit-box-shadow: 0px 3px 2px 0px rgba(158,158,158,0.54);

-moz-box-shadow: 0px 3px 2px 0px rgba(158,158,158,0.54);

box-shadow: 0px 3px 2px 0px rgba(158,158,158,0.54);
}


#city-square-element .auto-complete li {
    
background-color: white;
    
padding: 13px 10px;
    
z-index: 888888888888888888888888888888888;
    
color: #000;
}


#city-square-element .auto-complete li:nth-child(even) {
    
background-color: #f3f3f3;
}


#city-square-element .auto-complete li:hover {
    background-color: #dcd9d9;    
}


#city-square-element .auto-complete li mark {
    
background: none;
    
font-style: normal;
    
font-weight: bold;
}

#city-square-element .bottom-line {
    
width: 100%;
    
border-top: solid 1px #00c800;
    
position: absolute;
    
bottom: 0;
}


#city-square-element .logo{
    
width: 130px;
    
position: absolute;
    
top: 31px;
    
left: -5px;
    
z-index: 0;
}


@media screen and (max-width: 600px) {

#city-square-element {
    height: 201px;
}
#city-square-element .logo{
    bottom: 0px;
    top: unset;
}
#city-square-element .title{
    text-align: center;
    width: 252px;
    margin: auto;
    /* background-color: antiquewhite; */
    padding-bottom: 16px;
}
#city-square-element .auto-complete li{
    
padding: 10px 10px;
}
#city-square-element .bottom-line {
    width: calc(100% - 142px);
    bottom: 22px;
}
#city-square-element .input-wrapper {
    width: 100%;
}    
}