/* 
	!!! this css file is used by meteo locale, météo belgique AND météo europe, any change will impact the 3 pages
*/ 

@import url('https://fonts.googleapis.com/css?family=Titillium+Web');


body{
	font-family: 'Titillium Web', sans-serif;
}

*{
	box-sizing:border-box!important;
}

@media (min-width: 1px){
	.container {
		width: 100%;
		max-width:1200px !important;
		padding:0;
	}
	
	header .container{
		padding:0 15px;
	}
	
	.row{
		margin:0!important;
	}
}

.meteo h2{
	color: #46a546;
    font-size: 20px;
}

.alert h3{
	font-size:35px;
}

.alert p{
	font-size:16px !important;
}

canvas {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}


#graphs{
	width:100%;
	border:1px solid #ccc;
	background:white;
}

.tt-menu {
	width: 400px;
	margin-top: 0;
	padding: 0;
	background-color: #fff;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 0;
	font-size: 18px;
	color: #111;
	background-color: #fff;
}

.tt-suggestion.tt-selectable {
    padding: 3px 10px;
}

.tt-menu .tt-suggestion:hover{
	cursor:pointer;
	background:#f9eaaf;
}


.meteo .local_title{
	background: #46a546; 
	color: #fff; 
	padding: 15px; 
	font-size: 25px; 
	margin:15px 0;
	border:1px solid #3a863a;
}

.meteo .local_title h1{
	display:inline-block;
	font-size:26px;
}

.daybtn{
	text-align:center;
	margin-bottom:20px;
	position:relative;
}
.daybtn img{
	width:64px;
	height:64px;
	display:block;
	margin:5px auto;
}

.daybtn .btn{
	
	border-radius:0;
	
	width: 9.59%;
	min-width:102px;
	margin: 5px 0.5% 5px 0.5%;
	border-radius: 0;
	padding: 10px 0;
}

.daybtn strong{
	font-size:20px;
}

.daybtn p{
	text-align:left;
	font-weight: bold;
	color: #999;
	padding: 10px 15px 10px 0;
	border-bottom:1px solid #ddd;
}

.daybtn span{
	font-size:13px;
}

.daybtn .btn-group>.btn:last-child{
	margin-right:0;
}

.daybtn .btn-group>.btn{
	float:none;
}

.daybtn .btn-group{
	white-space:nowrap;
	overflow-x:auto;
}


.daybtn .scroll_more_right{
	display:none;
	font-size: 31px;
    position: absolute;
    right: 0;
    top: 5px;
    bottom: 0px;
    z-index: 100;
    background: #fecc00;
    width: 40px;
    color: black;
    padding-top: 44px;
	text-decoration:none;
}

.daybtn .scroll_more_left{
	display:none;
	font-size: 31px;
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 0px;
    z-index: 100;
    background: #fecc00;
    width: 40px;
    color: black;
    padding-top: 44px;
	text-decoration:none;
}


@media screen and (max-width:1100px){
	.daybtn .btn-group{
		padding:0 45px;
	}
	
	.daybtn .scroll_more_right, .daybtn .scroll_more_left{
		display:block;
	}
	
	.daybtn .btn {
		margin-right: 3px !important;
	}
}


#lignes ul.list-group{
	display:none;
	margin-top:30px;
}

.whatmeteo{
	margin-top: 20px;
}


.whatmeteo .btn{
	font-weight: bold;
    line-height: 2;	
}

@media screen and (min-width: 1024px){
	.whatmeteo .btn{
		font-weight: normal;
		line-height: 1.7;
		font-size: 20px;
		padding: 0;
		margin: 0 20px;
		
		-webkit-box-shadow:none !important;
		box-shadow:none !important;
		background-color:none;
		background:transparent;
		border:none;
	}



	.whatmeteo .btn{
		font-weight: normal;
		line-height: 1.7;
		font-size: 20px;
		padding: 0;
		margin: 0 20px;
		
		-webkit-box-shadow:none !important;
		box-shadow:none !important;
		background-color:none;
		background:transparent;
		border:none;
	}

	

	.whatmeteo .btn:hover, .whatmeteo .btn-default.active.focus, .whatmeteo .btn-default.active:focus, .whatmeteo .btn-default.active:hover, .whatmeteo .btn-default:active.focus, .whatmeteo .btn-default:active:focus, .whatmeteo .btn-default:active:hover{
		color: #333;
		background-color: transparent !important;
		border:none !important;
		border-radius: 0;
	}

	.whatmeteo .btn:hover{
		border-bottom: 1px solid #ccc !important;
		border-radius: 0;
	}
	
	.whatmeteo .btn.active:hover, .whatmeteo .btn.active, .whatmeteo .btn:active{
		border-bottom: 1px solid #46a546 !important;
		color: #46a546 !important;
		font-weight: bold;
		border-radius: 0;
	}

}

#cityform .input-group, #cityform .input-group .btn{
	width:100% !important;
	
}

/*
.twitter-typeahead, .twitter-typeahead input{
	height:100%!important;
	font-size: 17px;
}
*/



#cityform{
	border: 1px solid #d9b210;
    padding: 10px;
    background: #fecc00;
	
	
	border: none;
    padding: 10px;
    background: #46a546;
}

#cityform h3.panel-title{
	color:white;
	margin-bottom:7px;
	font-size:23px;
}

.fb-sharer{
	transform:scale(1.3);
	margin-right:10px;
	margin-top:-5px;
}




@media screen and (max-width:768px){
	.whatmeteo{
		width:100%;
		margin-top:0;
		margin-bottom:20px;
	}
	
	.whatmeteo .btn{
		width:33%;
	}
	
	.whatcity{
		/*background: #fff;
		color: #222;
		padding: 10px;
		border: 1px solid #ccc;*/
	}
	
	.fb-sharer{
		transform:none;
	}
}

@media screen and (max-width:500px){
	.whatmeteo{
		width:100%;
		text-align:center;
	}
	
	.whatmeteo .btn{
		/*width:100%;
		display:block;*/
		border-radius:0;
		margin:0;
		line-height:3;
	}
}


.mintemp{
	color:#1e87e8;
	font-weight:normal !important;
}

.maxtemp{
	color:#e13b3b;
	font-weight:bold !important;
	font-size:150% !important;
}


#chartjs-tooltip {
	opacity: 1;
	position: absolute;
	background: rgba(0, 0, 0, .7);
	color: white;
	border-radius: 3px;
	-webkit-transition: all .1s ease;
	transition: all .1s ease;
	pointer-events: none;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

.chartjs-tooltip-key {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 10px;
}

.list-group-item{
	font-size:16px;
	
}

strong{
	font-weight:bold;
}

.liste_icons{
	width:24px;
	height:auto;
}

.h_firstcol{
	min-width:150px;
	width:37%;
	display:inline-block;
	vertical-align:top;
}

.h_time{
	display:inline-block;
	vertical-align:top;
	width:25%;
	min-width: 90px;
	padding-top:5px;
}

.h_time strong{
	background: #46a546; 
	color:#fff; 
	font-size:30px; 
	vertical-align:top;
	padding: 5px; 
	margin-top:5px;
}

.h_condition{
	margin:0 auto;
	text-align:center;
	display:inline-block;
	font-size: 13px;
	width:60%;
	padding:0 10px;
}

.h_condition img{
	width:48px;
	margin-bottom:-5px;
	margin-top:-5px;
}

.h_secondcol{
	min-width:200px;
	width:60%;
	display:inline-block;
	margin-top:5px;
}

.h_temp {
    display: inline-block;
    padding-right: 20px;
    width: 41%;
    vertical-align: top;
	line-height:1.1;
	padding-top:7px;
}

.h_temp .liste_icons{
	width:36px;
	float:left;
	margin-top: -5px;
}

.h_temp small{
	font-size:13px;
}

.h_water {
    display: inline-block;
    padding-right: 20px;
    vertical-align: top;
    width: 30%;
}

.h_wind {
    display: inline-block;
    /* padding-right: 20px; */
    vertical-align: top;
    width: 26%;
}



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

	
	.h_temp{
		width:37%;
	}
	
	.h_water{
		width:23%;
	}
	
	.h_wind{
		width:37%;
	}
	
	.h_firstcol{
		width:36%;
	}
	
	.h_secondcol{
		width:63%;
	}
	
	/*
	
	#lignes li{
		font-size:13px;
	}
	
	*/
}

@media screen and (max-width:767px){
	#lignes li{
		font-size:14px;
	}
	
	.h_temp{
		display:inline-block;
		width:66%;
	}
	
	.h_water{
		display:inline-block;
		width:32%;
		padding-right:0;
	}
	
	.h_water img.liste_icons:nth-child(3){
		margin-top:20px;
		vertical-align:bottom;
	}
	
	.h_wind{
		display:inline-block;
		width:100%;
		padding-left:5px;
		padding-top:5px;
		margin-top:-20px;
	}
	.h_firstcol{
		width:49%;
		
	}
	
	.h_secondcol{
		width:49%;
	}
}

@media screen and (max-width:550px){
	
	
	.h_firstcol{
		width:28%;
		min-width:0;
		text-align:center;
		background: #46a546;
		color: #fff;
		padding-bottom: 10px;
	}
	
	.h_condition{
		text-align:center;
		width:100%;
		padding-top:15px;
	}
	
	.h_secondcol{
		width:69%;
		min-width:0;
	}
	
	.h_condition img{
		width: 48px;
		margin-bottom: 6px;
		margin-top: -15px;
		background: white;
		border-radius: 5px;
	}
	
	.h_time strong{
		padding:0;
	}
	
}

@media screen and (max-width:450px){
	
	#lignes .list-group-item{
		padding:0;
	}
	
	.break-xs{
		display:block;
		clear:both;
	}
	
	#lignes .hourlist{
		border-bottom:2px solid #fff;
		border-top:2px solid #fff;
	}
	
	.h_temp, .h_water, .h_wind{
		display:block;
		width:100%;
	}
	
	.h_firstcol{
		width:37%;
		min-width:0;
		text-align:center;
		background:#46a546;
		color:white;
		padding-bottom:7px;
		min-height:150px;
	}
	
	.h_condition{
		text-align:center;
		width:100%;
		padding-top:7px;
	}
	
	.h_condition img{

		margin-bottom: 6px;
		margin-top: 0;
		background: white;
		border-radius: 5px;
	
	}
	
	.h_secondcol{
		width:60%;
		min-width:0;
	}
	
	.h_wind{
		padding-left:0;
	}
	
	.h_temp img.liste_icons{
		width:29px;
		
	}
	
	.h_temp small{
		font-size:12px;
	}
	
	.h_water{
		padding-top:5px;
	}
	
	.h_wind{
		padding-top:7px;
		margin-top:0;
	}
	
	.h_wind img.liste_icons{
		margin-left:2px;
	}
	
	.h_water img.liste_icons{
		margin-top:5px;
		margin-left:2px;
	}
	
	.h_water img.liste_icons:nth-child(3){
		margin-top:8px;
		vertical-align:middle;
	}
	
	
}

.search_history{
	color:#777;
	font-size:13px;
}

.search_history li{
	display:inline-block;
	margin-right:15px;
}
.search_history a{
	font-size:13px;
	color:#46a546;
}

.search_history .allcities{
	display: inline-block;
    margin-top: 60px;
    font-weight: bold;
    font-size: 18px;
    background: #46a546;
    padding: 5px 15px;
    color: #fff;
    text-decoration: none!important;
	transition:ease-in-out 0.2s;
}

.search_history .allcities:hover{
	transform:scale(1.05);
}

@media screen and (max-width:768px){
	.search_history{
		text-align:center;
	}
	
	.search_history div:first-child{
		margin-bottom:20px !important;
	}
}


.meteoliste, .meteoliste a{
	font-size:13px;
	color:#46a546;
}

.tri{
	padding:10px 15px;
	background:white;
	text-align:left;
	font-size:15px;
	color:#000;
	border: 1px solid #3a863a;

}

.tri a{
	color:#555;
}

.meteoliste .no_result{
	color: #e13b3b;
    text-align: center;
    font-size: 20px;
	margin-bottom:50px;
}

.search_results a{
	font-size: 17px;
    color: #46a546;
    margin-bottom: 5px;
    display: inline-block;
}




/* type ahead BS 3 fix */

.has-warning .twitter-typeahead .tt-input,
.has-warning .twitter-typeahead .tt-hint {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .twitter-typeahead .tt-input:focus,
.has-warning .twitter-typeahead .tt-hint:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}
.has-error .twitter-typeahead .tt-input,
.has-error .twitter-typeahead .tt-hint {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .twitter-typeahead .tt-input:focus,
.has-error .twitter-typeahead .tt-hint:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.has-success .twitter-typeahead .tt-input,
.has-success .twitter-typeahead .tt-hint {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .twitter-typeahead .tt-input:focus,
.has-success .twitter-typeahead .tt-hint:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}
.input-group .twitter-typeahead:first-child .tt-input,
.input-group .twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.input-group .twitter-typeahead:last-child .tt-input,
.input-group .twitter-typeahead:last-child .tt-hint {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.input-group.input-group-sm .twitter-typeahead .tt-input,
.input-group.input-group-sm .twitter-typeahead .tt-hint {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
select.input-group.input-group-sm .twitter-typeahead .tt-input,
select.input-group.input-group-sm .twitter-typeahead .tt-hint {
  height: 30px;
  line-height: 30px;
}
textarea.input-group.input-group-sm .twitter-typeahead .tt-input,
textarea.input-group.input-group-sm .twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input,
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint {
  height: auto;
}
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
  border-radius: 0;
}
.input-group.input-group-sm .twitter-typeahead:first-child .tt-input,
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.input-group.input-group-sm .twitter-typeahead:last-child .tt-input,
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.input-group.input-group-lg .twitter-typeahead .tt-input,
.input-group.input-group-lg .twitter-typeahead .tt-hint {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
  width:100%;
}
select.input-group.input-group-lg .twitter-typeahead .tt-input,
select.input-group.input-group-lg .twitter-typeahead .tt-hint {
  height: 46px;
  line-height: 46px;

}
textarea.input-group.input-group-lg .twitter-typeahead .tt-input,
textarea.input-group.input-group-lg .twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input,
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint {
  height: auto;
}
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
  border-radius: 0;
}
.input-group.input-group-lg .twitter-typeahead:first-child .tt-input,
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.input-group.input-group-lg .twitter-typeahead:last-child .tt-input,
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
}
.twitter-typeahead {
  width: 100%;
}
.input-group .twitter-typeahead {
  display: table-cell !important;
  float: left;
}
.twitter-typeahead .tt-hint {
  color: #999999;
}
.twitter-typeahead .tt-input {
  z-index: 2;
}
.twitter-typeahead .tt-input[disabled],
.twitter-typeahead .tt-input[readonly],
fieldset[disabled] .twitter-typeahead .tt-input {
  cursor: not-allowed;
  background-color: #eeeeee !important;
}
.tt-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 160px;
  width: 100%;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
}
.tt-dropdown-menu .tt-suggestion {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor {
  text-decoration: none;
  outline: 0;
  background-color: #f5f5f5;
  color: #262626;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor a {
  color: #262626;
}
.tt-dropdown-menu .tt-suggestion p {
  margin: 0;
}



/* test new design */

@media screen and (min-width: 992px){
	.leftday label.btn.btn-default.labelday {
		display:block;
		background: #ffffff;
		color: #7c7c7c;
		border: 1px solid #efefef;
		width:100%;
	}

	.leftday label.btn.btn-default.labelday.active {
		background: #46a546;
		color: white;
	}

	.leftday .daybtn .btn-group{
		overflow:hidden !important;
	}

	.leftday .daybtn img{
		display:none !important;
	}
}



#map_frame{
	border:none !important;
	padding:4px !important;
	background:transparent !important;
}

.meteo .local_title{
	color: #222;
    background: none;
    border: none;
    padding-left: 0;
}


.astro{
	background-color:#dddddd;
}

#map_frame{
	padding:15px;
	border:1px solid #ccc;
	background:white;
	//width:100%;

}

#map_liste{
	margin-top:30px !important;
}

#map_liste h2{
	font-size:20px;
	margin-bottom:15px;
}

#map_liste, #map_liste span, #map_liste *{
	font-size:14px;
}


#map_liste .panel{
	border-color:#ccc;
	border-radius:0;
}

#map_liste .panel-body{
	padding:15px 0;
}

#map_liste .panel-search .panel-body{
	padding:15px;
}

#map_liste .panel-search .input-group{
	width:100%;
}

#map_liste .panel-search .input-group-btn{
	width:50px;
}

#map_liste .temp{
	font-weight:bold;
	font-size:16px;
	vertical-align: -13%;
}

#map_liste .condition_icon{
    width: 48px;
    height: auto;
    float: left;
    margin-right: 5px;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-left: -10px;
}

#map_liste .condition{
	margin-top:-5px;
	margin-bottom:5px;
}

#map_liste .condition strong{
	padding-top:10px;
	font-size:18px;
	display:inline-block;
	max-width: calc(100% - 50px);
}

#map_liste img{
	width:24px;
	height:auto;
}

#map_container{
	position:relative;
	width:100%;

}

#map_liste .panel-heading {
    background: #666;
    color: white;
    border-radius: 0;
}

#map_liste .panel-title{
	font-size: 20px !important;
    letter-spacing: 0.3px;
	font-weight:normal;
}
#map_liste .panel-title i{
	font-size:23px;
}

#map_liste .liste_icon_temp{
	width: 26px;
	height:auto;
	margin-left: -4px;
}