/*---------------------*
	     GLOBAL
**--------------------*/
*{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-font-smoothing: antialiased;}
html{
	height:100%;
}
body{
	position:relative;
	min-height:100%;
	margin:0px;
	background-color: #efefef;
	display:flex;
}
.fa{
	margin-right:10px;
	color:#333333;
}
span{
	font-size: 11px;
    font-family: arial;
    color: #6a6b6b;
}
#form-metiers{
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 0 5px 0;
    max-width: 300px;
    margin: auto;
}
#form-metiers input{
	display:none;
}
.cloud-btn{
	background: white;
    padding: 6px;
    border-radius: 5px;
    font-family: 'Roboto',sans-serif;
    font-size: 12px;
    box-shadow: 0px 0px 3px grey;
    margin: 5px;
    color: rgb(152, 140, 255);
    cursor: pointer;
}
#welcome-2{
	display:none;
}
.fa-caret-right{
	color: green;
	margin-right: 10px;
}
/*---------------------*
      SECTION MAIN
	  Block qui englobe les content
**--------------------*/
section{	
	background-color: #efefef;
    padding-top: 52px;
    padding-bottom: 45px;
    max-width: 1280px;
    min-width: 900px;
    margin: auto;
}
#titre_stats_apercu{
	display: block;
    margin: 0px;
    padding-left: 5px;
    padding-bottom: 5px;
    font-family: 'Roboto',sans-serif;
    font-size: 12px;
    color: gray;
	clear:both;
}
#titre_stat_apercu{
	display: block;
    margin: 0px;
    padding: 5px;
    font-family: 'Roboto',sans-serif;
    font-size: 12px;
    color: gray;
}
#nav_stats_apercu {
    font-size: 10px;
    font-family: arial;
    color: #aba7a7;
    padding-left: 25px;
    list-style-type: none;
    min-width: 130px;
    float: left;
}
#nav_stats_apercu li {
    line-height: 26px;
}
#content_nav_apercu{
	position:relative;
}
/*---------------------*
		CONTENT
		block qui englobe les block
**--------------------*/
#content_donut_apercu{
	position: absolute;
    right: -55px;
    width: 300px;
}
/*---------------------*
		 BLOCK
		 block qui englobe les article
**--------------------*/
.rendering-content{
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	padding:5px;
}
.rendering-left{
	box-sizing:border-box;
	width:50%;
}
.rendering-right{
	box-sizing:border-box;
	width:50%;
}
.rendering-bottom{
	box-sizing:border-box;
	width:100%;
}
.rendering{
	padding:5px;
}
/*---------------------*
		ARTICLE
		*block qui englobe les contenu
**--------------------*/
#content_plan{
	border-radius: 3px;
	border: 1px solid white;
	display: flex;
	padding: 10px;
	-webkit-box-shadow: 0px 1px 10px #e8e6e6;
    -moz-box-shadow: 0px 1px 10px #e8e6e6;
    -o-box-shadow: 0px 1px 10px #e8e6e6;
    box-shadow: 0px 1px 10px #e8e6e6;
}
#content-stats{
	padding: 1px 0;
    display: flex;
	align-items:center;
    border: 1px dashed #e5e5e5;
    margin: 15px 5px 5px 5px;
    border-bottom: none;
    border-right: none;
    border-left: none;
}
.btn-switch-stats{
	display: none;
    position: absolute;
    top: 1px;
    right: 2px;
    background: #f4f4f4;
    border: none;
    color: #827d7d;
    cursor: pointer;
    outline: none;
    padding: 6px;
    width: 100px;
    -webkit-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    font-size: 12px;
}
.btn-switch-stats:hover{
	background-color: #f1eded;
}
.btn-switch-stats:active{
	background-color: #f1eded;
}
.empty-module{
	font-size: 84px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#chart_div{
	width:50%;
	position:relative;
}
#chart_div3{
	width:50%;
	position:relative;
}
#plan_nom{
	width: 60%;
    display: flex;
    margin-left: 5px;
    height: 47px;
    overflow: hidden;
}
#p_plan_nom {
    font-family: 'Roboto',sans-serif;
    color: gray;
    font-size: 14px;
    margin: 0;
    align-self: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#div_lien_plan {
    min-width: 40%;
    display: flex;
    justify-content: flex-end;
    margin-right: 5px;
}
#lien_plan{
	color: #6a6b6b;
    align-self: center;
}
#lien_plan:hover{
	color: green;
}
#trial_content{
    display:flex;
	align-self: center;
}
#trial{
	width: 47px;
    align-self: center;
	margin-top: -2px;
}
#coupon {
    width: 35px;
    align-self: center;
}
.block_donnee_apercu ul{
	padding: 0px;
	margin: 0;
	list-style-type: none;
	display: flex;
}
.block_donnee_apercu ul li{
	padding: 7px 17px 7px 17px;
	font-family: 'Roboto',sans-serif;
	color: gray;
	font-size: 12px;
	box-shadow: 0px 0px 1px #e4e4e4;
	width: 50%;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.btn_title{
	cursor: pointer;
    padding: 5px;
}
.btn_title:hover{
	background-color: #f1f1f1;
}
.btn_title:active{
	background-color: #f1f1f1;
}
#btn_title_donnee_apercu:hover{
	background-color:#eaeaea;
}
#btn_title_oeuvre_apercu{
	cursor:pointer;
}
#btn_title_oeuvre_apercu:hover{
	background-color:#eaeaea;
}
#btn_title_stats_apercu{
	cursor:pointer;
	box-shadow: 0px -4px 5px #ece9e9 inset;
}
#btn_title_stats_apercu:hover{
	background-color:#eaeaea;
}
.block_donnee_apercu{
	background-color: #ffffff;
	-webkit-box-shadow: 0px 0px 5px #bcbed8;
	-moz-box-shadow: 0px 0px 5px #bcbed8;
	-o-box-shadow: 0px 0px 5px #bcbed8;
	box-shadow: 0px 0px 5px #bcbed8;
	border-radius: 3px;
	overflow: hidden;
	width:36%;
	margin-right: 1%;
	height: 148px;
}
.module{
    background-color: #ffffff;
    -webkit-box-shadow: 0px 0px 5px #bcbed8;
    -moz-box-shadow: 0px 0px 5px #bcbed8;
    -o-box-shadow: 0px 0px 5px #bcbed8;
    box-shadow: 0px 0px 5px #bcbed8;
    border-radius: 5px;
    overflow: hidden;
}
.module h2{
	text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    padding-top: 4px;
	margin-top:0px;
    margin-bottom: 2px;
    font-size: 16px;
	color: black;
}
.module h3{
	text-align: center;
    font-family: 'Roboto', sans serif;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 8px;
    font-size: 13px;
    color: gray;
    font-weight: 400;
}
/*---------------------*
	 APERCU OEUVRE
	 *apercu global
**--------------------*/
.oeuvre_apercu{
	border: 1px solid #ffffff;
    border-radius: 3px;
    height: 67px;
    display: -webkit-box;
    display: -ms-flexbox;
	display:flex;
	-webkit-box-shadow: 0px 1px 10px #e8e6e6;
    -moz-box-shadow: 0px 1px 10px #e8e6e6;
    -o-box-shadow: 0px 1px 10px #e8e6e6;
    box-shadow: 0px 1px 10px #e8e6e6;
}
.oeuvre_apercu:hover{
	background-color:#e6e3e3;
}
.artiste_apercu{
	border: 1px solid #ffffff;
    border-radius: 5px;
    height: 67px;
    display: -webkit-box;
    display: -ms-flexbox;
	display:flex;
	-webkit-box-shadow: 0px 1px 10px #e8e6e6;
    -moz-box-shadow: 0px 1px 10px #e8e6e6;
    -o-box-shadow: 0px 1px 10px #e8e6e6;
    box-shadow: 0px 1px 10px #e8e6e6;
}
.artiste_apercu:hover{
	background-color:#e6e3e3;
}
.evenement_apercu{
	border: 1px solid #ffffff;
    border-radius: 3px;
    height: 67px;
    display: -webkit-box;
    display: -ms-flexbox;
	display:flex;
	-webkit-box-shadow: 0px 1px 10px #e8e6e6;
    -moz-box-shadow: 0px 1px 10px #e8e6e6;
    -o-box-shadow: 0px 1px 10px #e8e6e6;
    box-shadow: 0px 1px 10px #e8e6e6;
}
.evenement_apercu:hover{
	background-color:#e6e3e3;
}
.stats_oeuvre_apercu{
	font-family: arial;
    font-size: 10px;
    color: #b3b3b3;
    align-self: center;
    margin-left: auto;
    margin-right: 5px;
    float: right;
    max-width: 60px;
    min-width: 60px;
}
.stats_apercu{
	border: 1px solid #ffffff;
    border-radius: 3px;
    box-shadow: 0px 1px 10px #e8e6e6;
}
.stats_oeuvre_apercu p{
	text-align:right;
	white-space: nowrap;
}
.description_oeuvre_apercu{
	font-family: 'Open Sans', sans serif;
    font-size: 11px;
    color: #6a6b6b;
    margin-top: 2px;
    height: 33px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 100;
    display: block;
}
.img_oeuvre_apercu{
	height: 63px;
    min-height: 63px;
    margin: 2px 10px 2px 2px;
    width: 110px;
    min-width: 110px;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #f3f1f1;
}
.img_artiste_apercu{
	height: 63px;
    min-height: 63px;
    margin: 2px 10px 2px 2px;
    width: 110px;
    min-width: 110px;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #f3f1f1;
}
.img_evenement_apercu{
	height: 63px;
    min-height: 63px;
    margin: 2px 10px 2px 2px;
    width: 110px;
    min-width: 110px;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #e6e3e3;
	display: flex;
    align-items: center;
}
.text_oeuvre_apercu{
	margin: 0px;
    font-family: 'Roboto', sans serif;
    font-size: 14px;
    color: #9264bd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: center;
	margin-right: 10px;
	width: 100%;
}
.aside_apercu{
	text-align: center;
    background-color: #f4f4f4;
    padding: 3px;
    border-radius: 99px;
    color: #838181;
    white-space: nowrap;
	text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 12px;
    margin-bottom: 11px;
	cursor:pointer;
}
.aside_apercu:hover{
    background-color: #f1eded;
}
#tooltip_critere {
    position: fixed;
    width: 50%;
    margin: 90px 25% 0 25%;
    box-shadow: 0px 0px 30px #538a54;
    border-radius: 5px;
    border: 4px solid #07d007;
    background-color: #f9f7f7;
    box-sizing: border-box;
    z-index: 4;
}
#tooltip_critere h3{
	margin: 0;
    padding: 10px 5px 10px 5px;
    font-family: 'Roboto',sans-serif;
    text-align: center;
    color: #039416;
    border-bottom: 1px solid #c9b7f7;
    box-shadow: 0px 5px 5px #cac4ff;
    background-color: #f3f6ff;
	font-weight:400;
}
#tooltip_critere p{
	margin: 0;
    padding: 15px 10px 10px 10px;
    font-family: 'Roboto',sans-serif;
    font-size: 14px;
    text-align: center;
    color: #353434;
}
#tooltip_critere span{
	text-align: center;
    display: block;
    padding: 10px 10px 5px 10px;
    font-size: 12px;
    color: gray;
}
#tooltip_critere a{
	font-weight:bold;
	color:green;
	font-size: 14px;
}
#tooltip_critere a:hover{
	color:blue;
}
#btn_critere{
	padding: 10px;
    text-align: center;
    background-color: #e6e6e6;
    color: #4e4d4d;
    border: none;
    outline: none;
    cursor: pointer;
    width: 100%;
}
#btn_critere:hover{
	background-color: #f1eded;
}
#content_form_bienvenue{
	display: flex;
    justify-content: space-around;
    padding: 13px 0 0;
}
#tooltip_bienvenue{
	display:none;
    position: fixed;
    width: 50%;
    box-shadow: 0px 0px 30px #949494;
    border-radius: 5px;
    background-color: #f9f7f7;
    box-sizing: border-box;
    z-index: 4;
}
#tooltip_bienvenue h3{
	margin: 0;
    padding: 10px 5px 10px 5px;
    font-family: 'Roboto',sans-serif;
    text-align: center;
    color: #039416;
    border-bottom: 1px solid #c9b7f7;
    box-shadow: 0px 0px 30px #adadad;
    background-color: #f3f6ff;
	font-weight:400;
}
#tooltip_bienvenue p{
	margin: 0;
    padding: 15px 10px 10px 10px;
    font-family: 'Roboto',sans-serif;
    font-size: 14px;
    text-align: center;
    color: #353434;
}
#tooltip_bienvenue a{
	font-weight:bold;
	color:green;
	font-size: 14px;
}
#tooltip_bienvenue a:hover{
	color:blue;
}
#content_form_bienvenue{
	display: flex;
    justify-content: space-around;
    padding: 10px;
}
.btn_bienvenue{
	padding: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    display: block;
    text-align: center;
    background-color: #e6e6e6;
    color: #4e4d4d;
    border: none;
    outline: none;
    cursor: pointer;
    width: 120px;
}
.btn_bienvenue:hover{
	background-color: #f1eded;
}
#annul_time{
	color: #ea0404;
}
#plus_clock{
	color: #004580;
}
#dem_play{
	color: #00a200;
}
.text_btn_bienvenue{
	font-size: 12px;
    color: gray;
}
#content_cv{
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#content_cv strong{
	align-self: flex-end;
    text-align: center;
    width: 100%;
    font-size: 13px;
    padding: 5px;
    background-color: black;
    opacity: 0.7;
    color: white;
    font-weight: 400;
}
.cv{
	background-size: cover;
    background-position: center;
    width: 110px;
    height: 70px;
    background-repeat: no-repeat;
    margin: 5px;
	display:flex;
}
.apercu_description_oeuvre{
	font-family: 'Open Sans', sans serif;
    font-size: 11px;
    color: #6a6b6b;
    margin-top: 2px;
    height: 33px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 100;
    display: block;
}
#fp{
	display: none;
    position: fixed;
    border-radius: 100px;
    box-shadow: 0px 2px 10px #808080;
    padding: 10px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    justify-content: center;
    background: white;
    bottom: 8px;
    right: 8px;
    z-index: 100;
    border: 5px solid #8080ff;
}
#fp:hover{
	border:5px solid #4dc100;
}
#fp:focus{
	border:5px solid #4dc100;
}
/*---------------------*
 RESPONSIVE WEB DESIGN
**--------------------*/

@media screen and (max-width:959px){
	.rendering-content{
		display:block;
		padding: 5px 0;
	}
	.rendering{
		padding: 5px 0;
	}
	.rendering-left{
		width:100%;
	}
	.rendering-right{
		width:100%;
	}
	section{
		width:100%;
		min-width:320px;
	}
	#tooltip_bienvenue{
		width:90%;
	}
	.module{
		border-radius:0px;
	}
}
@media screen and (max-width:496px){
	#chart_div{
		width:100%;
	} 
	#chart_div3{
		width:100%;
	}
	#content-stats{
		display: block;
	}
	.btn-switch-stats{
		display:block;
	}
}