*{

}

.pictos_days_menu {
	position:absolute;
	top: 0;
	right: 0;
	display: block;
	z-index: 2;
	width: 40%;
	height: 44%;
}


.daytime_menu {
	position:absolute;
	bottom: 0;
	display: block;
	z-index: 2;
	width: 14.5%;
	height: 22%;
	padding-left:2%;
	padding-right:2%;
	box-sizing: unset !important;
}

.daytime_menu input[type="radio"]{
	display:none;
}

.button_daytime_menu {
	text-align:center;
	background-color: white;
	display: block;
	margin: 0 auto;
	margin-top: 8px;
	height: 35px;
	width: 70%;
	-webkit-box-shadow: 4px 9px 6px 1px rgba(58,83,156,0.92);
	-moz-box-shadow: 4px 9px 6px 1px rgba(58,83,156,0.92);
	box-shadow: 4px 9px 6px 1px rgba(58,83,156,0.92);
	transition: all .2s;
}

.button_daytime_menu:hover {
	transform: scale(1.1);
}

#daytime_radio_box div {
	box-sizing:unset !important;
	font-family: "Swiss921 BT", Helvetica, Arial, Verdana, sans-serif;
	transition: transform .2s;
}
#daytime_radio_box div:hover {
	transform: scale(1.05);
}

#days_radio_box {
	padding-top: 7%;
}

.daytime_menu .am, .pm {	
	display:flex;
	height:2.2em;
	text-align:center;

	background-color: #a39a9a;
	color: #FFF;
	font-family: "Swiss921 BT", Helvetica, Arial, Verdana, sans-serif !important;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.85);
	-webkit-box-shadow: 4.5px 5.5px 1px -1px rgba(0,0,0,0.35);
    -moz-box-shadow: 4.5px 5.5px 1px -1px rgba(0,0,0,0.35);
    box-shadow: 4.5px 5.5px 1px -1px rgba(0,0,0,0.35);
}

.daytime_menu .am:hover, .pm:hover {
	background-color: #093682;
	cursor:pointer;
}

.daytime_menu span{
	font-size:1.2em;
	margin:auto;
	font-family: Arial;
    font-weight: bold;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.85);
}

.daytime_menu .am{
	margin-bottom: 8% !important;
}

.daytime_menu .active{
	background-color: #fcc041;
}

.daytime_menu a {
	text-decoration: none;
}

.day_pictos_column {
	position: absolute;
	left:0;
	width: 68%;
	height: 100%;
}


.days_menu {
	position:absolute;
	right: 2%;
	width: 27%;
	height:100%;
}

.days_menu a {
	text-decoration: none;
}

.days_menu_sub {
	display: block;
	margin: 0 auto;
	background-color:#1e497e;
	height:100%;
}

#days_radio_box .rectangle{
	position:relative;
	top:-20px;
	left:1em;
	line-height: 2em;
	height:2em;
	background-color:transparent;
}

#days_radio_box .day_active{
	background-image: url('../../img/fleche.png');
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;

}

#days_radio_box div:hover{
	background-image: url('../../img/fleche.png');
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;

}

#days_radio_box .day_active .radio{
	color: #FFF;
}


#days_radio_box .triangle {
	position:relative;
	left:0;
	top:10px;
    width:0; 
    height:0;
    border-top:1em solid transparent;
    border-left:0 solid transparent;
    border-right:1em solid transparent;
    border-bottom:1em solid transparent;
}

#icon_radio_box {
	height:100%;
}

#icon_radio_box label {
    width: initial !important;
    margin-bottom: 0px !important;
    display: initial !important;
    text-transform: initial !important;
}

#days_radio_box div {
	padding-left: -10%;
	line-height: 3em;
	height: 3em;
	overflow:hidden;
	text-align:center;	
	vertical-align: middle;
}

#days_radio_box span {
	margin-left:-7%;
}

#days_radio_box input[type="radio"]{
	display:none;	
}

#days_radio_box div:hover{
	cursor: pointer;
}

.radio{
	color: #879eba;
	position:absolute;
	left:25%;
	font-size:1.3em;
	font-family: Arial, Verdana, sans-serif;
    font-weight: bold;
}

.radio:hover{
	color: #FFF;
}


#days_radio_box div:hover{
	color: #FFF;
}

.button_days_menu {
	margin-bottom: 10px;
	position: relative;
	text-align:center;
	display: block;
	background-color: white;
	height:35px;
	width:100%;
}

.button_days_menu:hover {
	transform: scale(1.1);
}

.current_day_row {
	width:100%;
	height:55%;
}

.pictos_menu {
	width:100%;
	height:45%;
}

.pictos_menu_sub {
	height: 100%;
	margin-top: 1%;
	text-align: right;
    margin-right: 5%;
}

.pictos_menu_sub input[type="radio"] {
	display:none;
}



.picto_choice_button:hover {
	cursor: pointer;
	border: solid 4px #fff;
	border-radius:3px;
	transform: scale(1.05);
}



.picto_choice_button {
	box-sizing: unset !important;
	transition: transform .2s;
	border: solid 4px #aec2f9;
	border-radius:3px;
	display: inline-block;
    height: 52%;
    width: 20%;
    background-size: 100%;
    background-repeat: no-repeat;
}

#icon_radio_box .active{
	border: solid 4px #fff !important;
	border-radius:3px !important;
}

#picto_temperature {	
    background-image: url(../../img/temperature.png);  
}

#picto_wind {
	background-image: url(../../img/vent.png);
}

#picto_weather {
	background-image: url(../../img/temps.png);
}

.button_picto_menu {
	float: right;
	margin: 0 auto;
	margin-right: 5px;
	display: inline-block;
	width: 50px;
	height: 50px;
	border: 3px solid white;
	border-radius: 2px;
	transition: all .2s;
}

.button_picto_menu:hover {
	transform:scale(1.1);
}

.current_day {
	position: relative;
	float:right;
	display: block;
	color: #fff;
	background-color: #fcc041;
	height: 73%;
	right: 17%;
	top: 10%;
	width: 37%;
	-webkit-box-shadow: 4.5px 5.5px 1px -1px rgba(0,0,0,0.35);
    -moz-box-shadow: 4.5px 5.5px 1px -1px rgba(0,0,0,0.35);
    box-shadow: 4.5px 5.5px 1px -1px rgba(0,0,0,0.35);
	text-align: center;
	line-height: 1.3em;
	font-family: Arial;
    font-weight: bold;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.85);
}

.display_current_day_nb{
	margin: auto;
	width: 67%;
	height: 50%;
	background-color: #7c8ac5;
	display:flex;
}

.current_day_nb{
	height: 100%;
	margin:auto;
}

.current_day_txt {
	vertical-align: middle;
	display:block;
	height:25%;
}

.current_day_name {
	text-align:center;
	display: block;
	width: 100%;
	height: 45%;
}

.current_day_month {
	height:25%;
}

.current_day_number {
	text-align:center;
	background-color: lightblue;
	display: block;
	width:60%;
	height:45%;
	margin: 0 auto;
}

.logo_codeetin {
	position:absolute;
	z-index: 1;
	width: 6%;
    bottom: 10%;
    right: 1%;
	transition: all .2s;
}

.logo_codeetin {
	transform:scale(1.07);
}

#codeetin_logo {
	position:absolute;
	z-index: 1;
	width : 100%;
	transition: all .2s;
}

#codeetin_logo:hover {
	transform:scale(1.15);
}