body {
    font: 300 13px "Helvetica Neue", Helvetica;
}
/* conteneur general */

.chart-container {
    /*flex-grow: 1;*/
    /* margin: 0 auto 5rem auto; */
     /*background: rgba(255,255,255,0.75); */
    /* background: #f6f6f2; */
    /* box-shadow: 1px 1px 4px rgba(0,0,0,0.2); */
    /* padding: 10px 30px; */
    position: relative;
}


/* legende */
.chart-legend {
    display: inline-block;
    font-weight: bold;
    font-size: 1.2rem;
    text-transform: uppercase;
}
.legend-element {
    display: inline-block;
    margin-right: 2rem;
    margin-bottom: 0.5rem;
}

.legend-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0.25rem;
}

.chart-unit {
    display: inline-block;
    font-style: italic;
    font-size: 1.2rem;
    float: right;
}

.chart-source {
    clear: both;
    font-size: 1rem;
    margin-top: 1.8rem;
}

/* graphs */
.chart-container:not(.bubblepielist) svg {
    font-weight: 700;
    font-size: 1.2rem;
    /* text-shadow: 0 1px 1px rgba(255,255,255,0.8);
    background-color: #f7f8f9; */
}

text.country-title {
font-size: 2rem;
}

text.instructions {
font-size: 1.6rem;
}

g.context g.axis path {
stroke-opacity: 0;
}

g.context g.axis line {
stroke-opacity: .1;
}

.axis path, .axis line {
fill: none;
stroke: #aaa;
shape-rendering: crispEdges;
}

.brush .extent {
stroke: #f09f8c;
fill-opacity: .125;
shape-rendering: crispEdges;
}

g.context rect.background{
fill: rgb(200,200,255);
visibility: visible !important;
}

/* tooltips */
div.tooltip {
    color: #545c6b;
    position: absolute;
    min-width: 30rem;
    /*width: 20rem;*/
    padding: 2rem;
    background: #fff;
    box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.19);
    border-radius: 10px;
    pointer-events: none;
    z-index: 1;
}

div.tooltip::after {
    content: "";
    border-style: solid;
    border-width: 8px 8px 0 8px;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

div.tooltip .link {
    display: block;
    margin-top: 1rem;
    padding: 1rem;
    background-color: #f7f8f9;
    border-radius: 1.55rem;
    border: 1px solid #f0f2f5;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    text-transform: uppercase;
}

div.tooltip .title-type {
    text-transform: uppercase;
    font-size: 1.2rem;
}

div.tooltip .title-name {
    font-weight: bold;
    font-size: 1.5rem;
}

div.tooltip .percent {
    font-size: 3rem;
    font-weight: bold;
    margin-right: 1rem;
    display: inline-block;
}

div.tooltip .tooltip-value {
    font-weight: bold;
    font-size: 1.4rem;
    text-align: right;
    display: inline-block;
}

div.tooltip .values {
    margin: 1rem 0;
}

div.tooltip .square {
    border-radius: 50%;
    margin-right: 0.5rem;
}

/* textes ? */
.dataviz-text {
    pointer-events: none;
    /* mix-blend-mode: difference; */
    fill: #fff;
}

.square{
    width: 1rem;
    height: 1rem;
    display: inline-block;
}

.value{
    font-size: 3.8rem;
    line-height: 1;
}

.diff{
    text-align: right;
}

.diff .value{
    color: #c62253;
    margin-left: 1rem;
}

.diff_after {
    position: relative;
    text-align: right;
}

.diff_before {
    position: relative;
    text-align: left;
}

.chart-container .diff_before .title {
    text-transform: none;
}

.diff_after .title,
.diff_before .title {
    top: 1rem;
    position: absolute;
}

.diff_line{
    width: 1px;
    height: 1rem;
    background: black;
    position: absolute;
}

.mapline {
    display: flex;
}

.tree_before{
    display: inline-block;

    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;

    border-left: dashed;
    border-top: dashed;
    border-bottom: dashed;

    border-width: 1px;
}

.tree_after{
    display: inline-block;

    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

    border-right: dashed;
    border-top: dashed;
    border-bottom: dashed;

    border-width: 1px;
}

.tree_before,
.tree_after {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

/* .tree_before .value,
.tree_after .value{
    font-size: 1.2rem;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
} */

.chart-container .tree_before span.value,
.chart-container .tree_after span.value {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    vertical-align: middle;
    text-align: center;
}

.additional {
    font-size: 2rem;
    margin-right: 1rem;
}

/* types de graphs - specifiques */
/* chiffres cles */
.chart-container.keyfigures .mapline > div {
    display: flex;
    align-items: center;
}

.chart-container.keyfigures .mapline > div .title-unit {
    flex-grow: 1;
}

.chart-container.keyfigures .boder-radius {
    border-radius: 1rem;
}

.chart-container.keyfigures .tree {
    padding: 1rem 0;
}
.chart-container.keyfigures .boder-left-radius {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.chart-container.keyfigures .boder-right-radius {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

/* treemaps */
.chart-container.treemapchart .tree ~ div.chartcontainer .title-unit {
    margin-left: 2rem;
}
.chart-container.treemapchart .tree ~ div.chartcontainer .value {
    margin-right: 0;
}

.chart-container.treemapchart #diff_after_div div.value {
    margin: 2rem 0;
    font-weight: bold;
    position: relative;
}

.chart-container.treemapchart #diff_after_div div.value::before {
    content: "";
    width: 0.1rem;
    height: 1.5rem;
    display: block;
    background-color: #bec2c9;
    position: absolute;
    top: -2rem;
    right: 0.4rem;
}

/* bubble charts */
.chart-container.bubblechart svg {
    border-radius: 1rem;
    margin-top: 0.5rem;
}

/* ====== Bubble pie ======= */

circle.hover{
    stroke: #bec2c9;
    stroke-width: 5px;
}

/* ====== Bubble pie list ======= */

.chart-container.bubblepielist table thead th {
    padding: 0 0.5rem;
    border-right: 0;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: normal;
    text-align: left;
}

.chart-container.bubblepielist table thead th.sort {
    cursor: pointer;
}

.chart-container.bubblepielist table thead th.sort::after {
    content: url("/themes/custom/budget/images/tri.png");
    margin-left: 0.5rem;
}

.chart-container.bubblepielist table thead th:first-child {
    padding: 0;
}
.chart-container.bubblepielist table thead th:first-child::after {
    margin-left: 0;
}

.chart-container.bubblepielist table thead tr {
    background-color: #f7f8f9;
    color: #545c6b;
}

.chart-container.bubblepielist table .bande-couleur{
    width: 0.6rem;
    min-width: 2px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.chart-container.bubblepielist table .titre{
    width: 30rem;
}
.chart-container.bubblepielist table .chart{
    height: 0.5rem;
}

/* .chart-container.bubblepielist table .info{
    width: 10%;
} */
.chart-container.bubblepielist table .percent{
    width: 6%;
}

.chart-container.bubblepielist table {
    border-collapse: separate;
    border-spacing: 0 6px;
}
.chart-container.bubblepielist tr {
    background-color: #fff;
    border-bottom: 3px solid #f7f8f9;
    border-radius: 3px;
}

.chart-container.bubblepielist tbody tr:hover,
.chart-container.bubblepielist tbody tr.hover {
    transform: scale(1.01);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.19);
}

.chart-container.bubblepielist td {
    padding: 1.5rem 1rem;
    text-align: left;
}

.chart-container.bubblepielist .details-groupe .details,
.chart-container.bubblepielist .details-groupe .info {
    display: inline-block;
    vertical-align: middle;
}

.chart-container.bubblepielist .details-groupe .details {
    width: 76%;
    border-radius: 5px;
}

.chart-container.bubblepielist .details-groupe .info {
    width: 20%;
    margin-left: 1rem;
}

.chart-container.bubblepielist .details--short {
    width: 8rem;
}

.chart-container.bubblepielist .details--short .info {
    width: 100%;
}

.chart-container.bubblepielist td:first-child {
    padding: 1.8rem 0;
}

.bubblepielist tr.on_click td {
    cursor: pointer;
}

.chart-container.bubblepielist table tbody tr:nth-child(2n+1) td:not(:last-child),
.chart-container.bubblepielist table td:not(:last-child) {
    border-right: 1px solid #f7f8f9;
}


/* ========== chart-dotplot  =========== */
.chart-dotplot{
    line-height: 0px;
}


/* ========== histogram-stacked  =========== */
.bar-title-div {
    min-height: 10rem;
}

.bar-title {
    position: absolute;
}

/* ========== barchart  =========== */
.chart-barchart .main-bar-bar,
.chart-barchart .main-bar-value,
.chart-barchart .sub-bar-background,
.chart-barchart .sub-bar-value{
    display: inline-block;
}

.chart-barchart .sub-bar-groupe .sub-bar-title {
    font-size: 1.1rem;
    font-weight: bold;
}
.chart-barchart .bar-groupe .main-bar-title {
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.bar-groupe hr {
    background-color: #f0f2f5;
    margin: 1rem 0;
}
.chart-barchart .main-bar-value,
.chart-barchart .sub-bar-value {
    width: 12.5%;
    text-align: right;
    font-weight: bold;
    font-size: 1.4rem;
}
/* bouton téléchargement graph csv */
input.download-graph {
    padding: 0.73rem 4rem 0.73rem 1.75rem;
    color: #3b4351;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: bold;
    border: 1px solid #f0f2f5;
    background: #ffffff;
    -webkit-box-shadow: none;
    box-shadow: none;
    line-height: inherit;
    background-image: url(/themes/custom/budget/images/download.svg);
    background-repeat: no-repeat;
    background-position: right center;
    text-decoration: none;
}

input.download-graph:hover,
input.download-graph:focus,
input.download-graph:active {
    border: 1px solid #dfe2e7;
    text-decoration: none;
    -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.03);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.03);
}

/* .bloc-download-graph {
    margin: 2.5rem 0 0 0;
} */

.page-node-type-page-panorama-finances-publiques .field--name-field-contenu-de-la-page > .paragraph--type--groupe.width-100 .histogram-stacked ~ .dataviz-footer {
    margin: 6rem 0 0 0;
}

.page-panorama-finances-publique-comparaison-europeenne .field--name-field-contenu-de-la-page > .paragraph--type--groupe.width-100 .histogram-stacked ~ .dataviz-footer {
    margin: 0;
}


/* .timeline ~ .dataviz-footer {
    margin-bottom: 8rem;
}
 */
.main-chart .bubblepiechart ~ .dataviz-footer {
    margin-bottom: 2rem;
}
.dataviz-footer ~ .chart-additional {
    margin-top: 2rem;
}

.indicateur .dataviz-footer ~ .chart-additional {
    margin-top: 0;
}


.dataviz-footer ~ .field--name-field-calendrier-budgetaire {
    margin-top: 4rem;
}

.indicateur .dataviz-footer {
    margin: 3rem 3rem 0 3rem;
}

.section-budget-etat .main-chart .dataviz-footer .bloc-download-graph {
    text-align: right;
    flex: 1;
}

/* affichage diagonale de la légende */
.page-panorama-finances-publique-comparaison-europeenne .field--name-field-contenu-de-la-page > .paragraph--type--groupe.width-100 .histogram-stacked .bar-title-text,
.field--name-field-contenu-de-la-page > .paragraph--type--groupe.width-100 .histogram-stacked.dette-publique .bar-title-text,
.field--name-field-contenu-de-la-page > .paragraph--type--groupe.width-100 .solde-public .bar-title-text,
.field--name-field-contenu-de-la-page > .paragraph--type--groupe.width-100 .depense-publique-histogram .bar-title-text,
.field--name-field-contenu-de-la-page > .paragraph--type--groupe.width-100 .recette-ue .bar-title-text {
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
    width: 11rem;
    margin-left: -6rem;

}

.field--name-field-contenu-de-la-page > .paragraph--type--groupe.width-100 .histogram-stacked.presentation-categorie .bar-title-text {
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
    width: 20rem;
    margin-left: -10rem;
    margin-top: 3.5rem;

}

.field--name-field-contenu-de-la-page > .paragraph--type--groupe.width-100 .histogram-stacked.presentation-nature .bar-title-text {
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
    width: 18rem;
    margin-left: -7rem;
    margin-top: 2.5rem;
}

.bar-title-text {
    text-align: center;
}

.dataviz-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2.5rem 0 0 0;
}
.dataviz-footer .ext-link-data {
   text-transform: uppercase;
   color: #3b4351;
   text-decoration: none;
   font-weight: bold;
   font-size: 1.3rem;
 }

.dataviz-footer .ext-link-data::after {
        content: '';
        background-image: url('/themes/custom/budget/images/docu-url.png');
        background-repeat: no-repeat;
        width: 2.5rem;
        height: 2rem;
        display: inline-block;
        background-position: top;
        background-size: 100%;

}

.dataviz-footer .ext-link-data:hover,
.dataviz-footer .ext-link-data:focus,
.dataviz-footer .ext-link-data:active {
  color: #c62253;
}

g.x,
g.y {
    font-family: "Lato";
}

g.y {
    font-size: 1rem;
    font-weight: 400;
}

g.x {
    font-size: 1.1rem;
    font-weight: bold;
}

.prelevement-obligatoire svg.chart-histogram-percent g {
    font-size: 1.2rem;
    font-family: Lato;
}

/* Pourrais être fait mieux, avec un select dans le paragaph */
.paragraph--type--graph-reference {
  width: 100%;
}