/*!
* Template WP et MR @author: IAD Territoire Digital
* Last update : 3 juillet 2019
*/

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
/*
Roboto
300 : light
400 : regular
500 : medium
700 : bold
*/

/* Classes personnalisées à utiliser sur les templates HTML */

.color-contr {color: #1d81a2}
.bg-contr {background: #1d81a2}

.color-fig {color: #1d81a2}
.bg-fig {background: #1d81a2}

/*<span style="color:#83DBD7;">⬤</span><span style="color:#2F7E9F;">⬤</span><span style="color:#E57873;">*/
/*<span style="color:#02DBF0;">⬤</span><span style="color:#024B78;">⬤</span><span style="color:#FFB55B;">⬤</span><span style="color:#BA5800;">⬤</span>*/
/*<span style="color:#C96424;">⬤</span><span style="color:#F2CC86;">⬤</span><span style="color:#82BAFF;">⬤</span><span style="color:#FFA502;">⬤</span><span style="color:#2B568C;">⬤</span> */
/*<span style="color:#B404F3;">⬤</span><span style="color:#2A11A0;">⬤</span><span style="color:#E7E000;">⬤</span><span style="color:#D4AD00;">⬤</span>*/

.bg-red {background: #D50803}
.bg-blue {background: #023D7D}
.color-red {color: #D50803}
.color-contr {color: #1d81a2}
.color-blue {color: #023D7D}
.color-white {color: #FFF}
.color-orange {color: #F6931E}
.txt-justify {text-align: left} /*N'est pas une bonne pratique Web

/*.tabulator-tableHolder{
    min-height: calc(100% - 0px) !important;
    height: calc(100% - 0px) !important;
    max-height: calc(100% - 0px) !important;
}*/

/* logo club*/
div.logoclub img{
    /*height: 19px;*/
}

/*..........boutons............*/
/*bouton rouge qui sera selectionné par defaut(bordure et taille plus grande)*/
button.btn {
    color: #FFF;
    font-size: 0.875em ;
    background: #D50803;
    padding: 0.5rem;
    border: 2px solid rgba(2, 61, 125,0.7);
    border-radius:4px 4px;
}

/*enleve bordure appliqué par navigateur lors de la selection d'un bouton*/
button:focus {outline:0;}

/*bouton vert sans bordure au chargement de la page*/
button.btn_green {
    color: #FFF;
    font-size: 0.775em;
    background: #008000;
    padding: 0.5rem;
    border:none;
    border-radius:4px 4px;
}

/*bouton vert qui sera selectionné par defaut(bordure et taille plus grande) pour fig10*/
button.btn_green_first {
    color: #FFF;
    font-size: 0.875em ;
    background: #008000;
    padding: 0.5rem;
    border: 2px solid rgba(2, 61, 125,0.7);
    border-radius:4px 4px;

}

/*bouton rouge sans bordure au chargement de la page pour fig10*/
button.btn_red {
    color: #FFF;
    font-size: 0.775em;
    background: #D50803;
    padding: 0.5rem;
    border:none;
    border-radius:4px 4px;
}

.info_graph_fig3 {
    position: absolute;
    right: 7%;
    bottom: 30%;
    font-size: 12px;
    color: rgba(218,145,0,1);
}

.info_graph_fig6{
    position:absolute;
    right:8%;
    bottom:30%;
    font-size:12px;
    color: rgba(218,145,0,1);
}

.nb_barre{
    position: absolute;
    left: 25px;
}
.carre_cat{
    background-color: #89BCEE;
    width: 23px;
    height: 23px;
    display: inline-block;
    padding-left: 8px;
    padding-top: 2px;
    position: relative;
    top: -5px;
    left:-5px;
}
.arrow-up {
    width: 16px;
    height: 10px;
    background-color: #84BEE3;
    display: inline-block;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.arrow-down {
    width: 0;
    height: 0;
    display: inline-block;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-top: 10px solid #84BEE3;
}
.chart-container {
  position: relative;
  margin: auto;
}

.tabulator .tabulator-header div.tabulator-col.diff {
  width:90px !important;
  min-width:90px !important;
}
.tabulator .tabulator-header div.tabulator-col.after_diff {
  min-width: 30px !important;
  width:30px !important;
}

/*	Epaisseur des barres dans les tableaux */
div[data-max] { 
/*    height:66% !important;
    margin-top:3px;*/
    margin-top: 2px;
    height: 80% !important;
}
/*construction carré*/
.carre{
    height: 10px;
    width: 10px;
    position: relative;
    display:inline-block;
}
/*construction de la fleche*/
.foo{
  display: inline-block;
  vertical-align: middle;

}
.rectangle {
  height: 6px;
  width: 20px;
  background-color: rgba(29,129,162,1);
  margin:-5px;
  margin-left:40px;
}

.rectangle_val {
    height: 8px;
    width: 20px;
    background-color: #008000;
    left:40px;
}

.rectangle-right { 
    height: 8px;
    width: 20px;
    background-color: #D50803;
    margin-right:0px;
}

.div_barre_perc_perso{
    display: flex;
    top: 6px;
    position: relative;
}

.triangle-right {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 10px solid rgba(29,129,162,1);
    border-bottom: 5px solid transparent;
    padding-right: 10px;
}
/*construction sucette*/
.trait {
    height: 2px;
    background-color: rgba(218,145,0,0.5);
    margin:-5px;
    margin-left:0px;
  }
.rond-right {
    width: 10px;
    height: 10px !important;
    border-radius: 5px;
    background: rgba(218,145,0,1);
}


/*	Précisions */
.poste{
    font-size:10px;
    color: #1d81a2 ;

}

/*.................................*/
.legende{
    font-size: 0.75em;
    display:inline-block;
    position:relative;
    top:10px;
}


/*enleve bordure appliqué par navigateur lors de la selection d'un bouton*/
button:focus {outline:0;}


/* Barre de progression dans les tableaux type "pour cent" */
.progressBarMin{
    position: absolute;
    width: 60px;
    border: 0 solid green;
    left: 50px;
    height: 9px;
    top: 9px;

}

/* Fond des barres de progression pour Chrome rgba(22,33,44,1)*/
.progressBarMin::-webkit-progress-bar {
background-color:rgba(180,180,180,0.3); /*rgba(17,159,17,0.3)*/
}
	
/* Apparence value barre de progression dans tableau pour chrome*/
.progressBarMin::-webkit-progress-value {
  background-color: rgba(29,129,162,1); /*rgba(17,159,17,1)*/
}

/*Apparence value barre de progression dans tableau pour mozilla*/
.progressBarMin::-moz-progress-bar{
    background-color:rgba(29,129,162,1); /*rgba(17,159,17,1)*/
}

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
    width:55px !important;
}

#progressBarMin::-ms-fill {
  background-color: rgba(180,180,180,0.3); /*rgba(213,8,3,0.7);*/
}

/*	Eléments par défaut */
body {
    background: #FFF;
    color: #000;
    font-family: 'Roboto';
}

h1, h2, h3, h4, h5, h6, dd {
    font-family: 'Roboto';
}

p {
    /*font-size: 1em; /*16px*/
	font-size: 1em; /*14px*/
	font-weight: 400;
}

hr {
    color: #1d81a2;
    background-color: #1d81a2;
    height: 1px;
    margin-bottom: 1em;
}

.detail{
    font-size:0.875em;
	color: #1d81a2 ; 
}

.detail2{
    font-size:0.875em;
	color: #e5e5e5 ; 
}

/* Grille et structure */

/* Header*/

#header {
    background: #fff;
    color: #1d81a2;
    min-height: 150px;
    min-width: 250px;
}

.container-header {
    max-width: 768px;
    margin: auto;
    min-height: 100px;
    display: block;
    justify-content: space-between;
    flex-direction: column;
}

p.pre-title {
	font-size: 0.825em;
    line-height: 1.25em;
    max-width: 768px;
    margin: auto;
	color: #000;
    height: 40px;
    padding: 0 1.5em;
}

h1 {
    font-size: 1.75em;
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 2rem;
    padding: 0 0.75em;
    line-height: 1.25em;
}

p.header-author {
    font-size: 0.75em; /*12px*/
    margin: 0;
	color:#000;
    padding: 0 1.5em;
	line-height: 2em;
}

/* Main */

h2 {
    color: #000;
    padding: 1.5rem 0 0.75rem 0;
    font-size: 1.125em;
    margin: 0;
    font-weight: 700;
}

.page-container {
    max-width: 768px;
    margin: auto;
}

.container-twitter {
    margin: 1em 0 0;
    text-align: right;
}

main {
    background: #FFF;
    margin: 0 auto 3em auto;
    padding: 0 1.15em;
    min-width: 320px;
}

article header {
    font-weight: 500;
}

article p {
    line-height: 1.25em;
}

/* Figure */

.content-graphique, .content-tableau {
    margin: 0 0 0 0;
}

.cadre-figure {
	border: 1px solid;
	border-color: #D0D3D5;
	background: #FFF;
	padding: 0.5em;
	margin: 1.00em 0px;
}

.legend-gt .title {
    font-weight: 500;
	font-size: 0.875em;
    margin-bottom: 0;
}

.title{
    margin-bottom: 10px !important;
}

.legend-gt .subtitle {
    font-size: 0.75em; /*12px*/
}

.subtitle{
    margin-top: -0.8rem;
}
/*	Footer	*/

footer {
    background: #1d81a2;
    min-width: 320px;
}

.container-footer {
    width: 768px;
    margin: auto;
    min-height: 60px;
    display: flex;
    flex-direction: row-reverse;
    padding: 0.5em 0 0 0.5em;
}

footer p {
    color: #FFF;
    font-size: 0.75em; /*12px*/
    margin-bottom: 0;
    line-height: 1.2em;
}

footer .footer-report {
    padding-top: 0.5em
}

footer .footer-logo {
    margin-left: auto;
    padding-top: 0.25em;
	align-items: right;
}

/* Tabulator - filtres*/

.filter-item {
    display: inline-flex;
    align-items: center;
    margin-right: 2rem;
	color: #1d81a2;
}

.spleft{
     margin-left: .5rem;
}

.flagst{
	width: 28px;
	border: 1px solid rgb(189,189,189);
	border-radius: 4px;
	margin-bottom: 1px;
}	

label {
    font-size: 0.825em;
    font-weight: 500;
    margin: 0 0.5rem 0 0;
}

select, input[type="text"] {
   font-size: 0.875em; 
}


.tabulator {
    background-color:#FFF;
    border: none; /*contour du tableau 1px solid #D50803*/
    font-size: 13.2px;
}

/* Tabulator - header*/

.tabulator .tabulator-header {
    background-color: #FFFFFF;
    color:var(--tableau-color);
    font-weight: 500;
    border-color: var(--tableau-color);
	color: #1d81a2;
}

/* Allow column header names to wrap lines */
.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-header .tabulator-col-row-handle {
   background-color: #FFFFFF;
   white-space: normal;
   border: 0px;
}

/* en tete des colonnes qu'on peut trier */
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
   background-color: #e6e6e6;
}

/* espace entre colonne */
.tabulator .tabulator-row .tabulator-cell {
    border-right: 0px solid;
    border-left: 0px solid; 
    height: 27px ;
}

/* espace entre colonne */
.tabulator.fig2_mr72 .tabulator-row .tabulator-cell {
    border-right: 0px solid;
    border-left: 0px solid; 
    height: auto !important ;
}

.texte-bas{
    color:#D50803;
}

/* Color the table rows */
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row {
    color:#000;
    background-color: #fff;
    margin-left: 0px;
    border-bottom: 1px solid rgb(189,189,189);
}

/* Color even rows */
    .tabulator .tabulator-tableHolder .tabulator-table .tabulator-row:nth-child(even) {
    background-color: #fff;
}

/* Supprime trait haut du tableau */
.tabulator.delete_border_top .tabulator-tableHolder {
    border-top: 0px solid #999;
}
/* Nécessaire pour faire afficher une progress-bar en responsive */
.tabulator-row .tabulator-responsive-collapse table tr td {
    display: inline-block;
    height: 30px;
    min-width: 100px;
}

/* Hover line */
.tabulator .tabulator-row.tabulator-selectable:hover .tabulator-cell {
    background-color: #bbb;
}
 /* Button +/- */
.tabulator .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle {
    background-color: #023D7D;
    width: 20px;
    height: 20px;
    font-weight: 500;
    font-size: 1.5em;
}

/* Progress bar+/- */
.tabulator-row .tabulator-cell.evol_neg div[data-max]{
    position:absolute !important;
    right:0px !important;
}

.tabulator-row .tabulator-cell.evol_pos div[data-max]{
    position:absolute !important;
    left:0px !important;
}

.table-progress-bar {
    width: 100%;
    border: 1px solid;
}

.table-progress-bar .bar {
	height: 100%;
	}

.table-progress-number {
    display: inline-block;
}

/*Position R (coefficient de correlation) dans graphique*/
.info_graph_fig4 {
    position: absolute;
    right: 5%;
    bottom: 80%;
    font-size: 9px;
    color:rgba(218,145,0,1);
}

.info_graph_fig5{
    position:absolute;
    right:8%;
    bottom:84%;
    font-size:12px;
    color:rgba(218,145,0,1);
}



/* Responsive class */

@media (max-width: 767px) {
    
	p {
		font-size: 0.875em;
	}
	
	.ptm {
        padding-top: 1rem;
    }
	
    p.pre-title, p.header-author {
        padding: 0 0.7em;
    }
    
    h1 {
        padding: 0 0.35em;
    }
	
	.legend-gt .title {
		font-size: 0.750em;
	}
    
    main, .container-footer {
        padding: 0 0.55em;
    }
    
    .link-pdf {
        position: absolute;
        left: -9999px;
    }
    
    .container-footer {
        width: auto;
        max-width: 768px;
    }

}

/* tiny screens */

@media (max-width: 575px) {
    body {
        font-size: 1.6rem;
    }
	
	h1 {
        font-size: 1.25rem
		padding: 0 0.35em;
    }
    
}