/*
 *  search bar
 */
#search_container {
    background-color: white;
    z-index: 20;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

#search_searchbar {
    background-color: #03A9F4;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    width: 100%;
}

#search_searchbar_container{
    position: relative;
    height: 50px;
}


#search_searchbar input {
    -webkit-appearance: searchfield;
}

#search_clear_container {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
}

#search_clear_button {
    position: absolute;
    width: 50px;
    height: 50px;
    padding: 16px;
    cursor: pointer;	
}

#search_searchbar input::-webkit-input-placeholder {
	opacity: 0.6;
}

#search_searchbar input {
    background-color: transparent;
    color: white;
    border: 0;
    outline: none;
    font-size: 26px;
    vertical-align: middle;
    padding-top: 7px;
    padding-left: 90px;
    padding-right: 14px;
    width: 100%;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    white;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    white;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    white;
}

#search_closebutton {
	position: absolute;
    width: 50px;
    height: 50px;
    padding: 14px;
    cursor: pointer;
    box-sizing: border-box;
}

#search_searchicon {
	position: absolute;
	left: 40px;
    width: 50px;
}


/*
 * search regionfilter
 */

.search_region {
    display: block;
    padding-left: 30px;
    padding-bottom: 14px;
    padding-top: 14px;
    float: left;
    width: 100%;
    border-bottom: 1px solid #E8E6E9;
}

#search_region_1 {
	margin-top: 50px;
}

#search_t_region_1 {
	margin-top: 50px;
}

#search_regionfilter {
    background-color: #f5f5f5;
    margin-top: 50px;
}

#search_regionfilter_box {
	height: 45px;
	background-color: #f5f5f5;
	border-bottom: 1px solid #E8E6E9;
	border-top: 1px solid #E8E6E9;
}

#search_regionfilter_icon {
	float: left;
	width: 70px;
	height: 45px;
	position: relative;
}

#search_regionfilter_icon img{
    width: 32px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

#search_regionfilter_boxtitle {
	float: left;
	height: 45px;
	display: table;
}

#search_regionfilter_boxtitle span {
	display: table-cell;
    padding-left: 14px;
	vertical-align: middle;
	font-size: 16px;
}

#search_regionfilter_arrow {
 	height: 45px;
 	width: 50px;
 	float: right;
	position: relative;
}

#search_regionfilter_arrow img {
	font-size: 16px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}


.search_regionfilter_title {
    display: block;
    padding-left: 28px;
    padding-bottom: 14px;
    padding-top: 14px;
    float: left;
    width: 100%;
    border-bottom: 1px solid #E8E6E9;
    background-color: white;
}


.collapsing {
	width: 100%;
}


#search_regionfilter_container{
	background-color: #f5f5f5;
    border-bottom: 1px solid #E8E6E9;
}

#search_filter_container{
	display: none;
    background-color: white;
    z-index: 40;
    position: absolute;
    top: -50px;
    bottom: 0;
    width: 100%;
}

.search_filter_title {
    z-index: 50;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
    display: block;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #E8E6E9;
    background-color: #f5f5f5;
}

.search_filter_title span{
	font-size: 16px;
    padding-bottom: 14px;
    padding-left: 5px;
    padding-top: 14px;
    float: left;
}

.search_filter_title img {
    font-size: 16px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#search_filter_regionfilter{
	display: none;
}

#search_filter_t_regionfilter{
	display: none;
}

.search_filter_title_arrow{
    height: 50px;
    width: 50px;
    float: left;
    position: relative;
}

#search_regionfilter_regions, #search_regionfilter_t_regions{
    top: 50px;
    position: absolute;
}

/*
 * geolocation
 */

#search_myplace_container{
    height: 45px;
    background-color: #F6F4F7;
    border-bottom: 1px solid #E8E6E9;
    cursor: pointer;
    clear: both;
}

#search_myplace_title{
	float: left;
    height: 45px;
    display: table;
}

#search_myplace_title span{
	display: table-cell;
    padding-left: 14px;
    vertical-align: middle;
    font-size: 16px;
}

#search_myplace_icon{
    float: right;
    width: 50px;
    height: 45px;
    position: relative;
}

#search_myplace_icon img{
    width: 22px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}



/*
 * search favorites
 */

#search_favorites_container {
	width: 100%;
    display: inline-block;
    background-color: white;
}

.search_title {
    display: block;
    padding: 12px;
    font-size: 16px;
    clear: both;
	border-bottom: 1px solid #E8E6E9;
    background-color: #f5f5f5;
}


/*
 * search locations
 */

.search_location {
	float: left;
	cursor: pointer;	
	width: 100%;
    border-bottom: 1px solid #E8E6E9;
    position: relative;
}

#search_locations_container {
	width: 100%;
    display: inline-block;
}

#search_locations {
	background-color: white;
	
}

.search_star {
	background-image: url("//www.rro.ch/cms/content/walliswetter/graphics/icons/local/favorit-grey.png");
	background-size: 26px 26px;
    background-repeat: no-repeat;
    background-position: center;
	float: right;	
	width: 50px;
	height: 48px;
    position: absolute;
    right: 0;
    
}

.favorite .search_star {
	background-image: url("//www.rro.ch/cms/content/walliswetter/graphics/icons/local/favorit-yellow.png");
	background-size: 26px 26px;
}

.favorite .search_home {
	background-image: url("//www.rro.ch/cms/content/walliswetter/graphics/icons/local/home_yellow_noborder.png");
	background-size: 26px 26px;
    background-repeat: no-repeat;
    background-position: center;
	float: right;	
	width: 50px;
	height: 48px;
    position: absolute;
    right: 45px;
}

.search_location_name {
    display: block;
    padding-left: 28px;
    padding-bottom: 14px;
    padding-top: 14px;
    float: left;
    width: 100%;
}