/*_________________________________________________________________
//
// SCANLIB
//
_________________________________________________________________*/

/*_________________________________________________________________
 
 BUTTON 
 Surcharge du primeVue
 _________________________________________________________________*/


.dataviz .buttonFilter.tabs {
    margin-top : 15px;
    .p-tab {
        font-size: 0.8em;
        border-radius: 0 15px 0 0;
    }
    .p-tab.p-tab-active {
            border-radius: 0 15px 0 0;
    }
    button:nth-child(1) {z-index : 10;}
    button:nth-child(2) {transform: translateX(-15px); z-index : 9;}
    button:nth-child(3) {transform: translateX(-30px); z-index : 8;}
    button:nth-child(4) {transform: translateX(-45px); z-index : 7;}
    button:nth-child(5) {transform: translateX(-60px); z-index : 6;}
}

.dataviz .buttonRepresentation {
    text-align: right;
    .p-selectbutton {
        .p-togglebutton {
            padding: 0 !important;
            border : none !important;
            font-size: 12px !important;
            .p-togglebutton-content {
                border-radius : 0 !important;
                .p-togglebutton-label {
                    margin: 5px 10px !important;
                }
            }
        }
        .p-togglebutton:first-child {
          border-start-start-radius: 15px !important;
          border-end-start-radius: 15px !important;
        }
        .p-togglebutton:last-child {
            border-start-end-radius: 15px !important;
            border-end-end-radius: 15px !important;
        }
    }
}


.dataviz .source {
    font-size: 0.8em;
    font-style: italic;
    fill: var(--color--text);
}

/*_________________________________________________________________
LEGEND
_________________________________________________________________*/
.dataviz .dataviz-form--suffix {
    margin-top : 10px;
}

.dataviz .legend, .dataviz .legend-div  {
    .legend-icon {
        /*font-size : 24px*/
        transform: scale(0.05);
    }
    .legend-text {
        font-size: 1em;
        fill : var(--color--text);
    }
    .legend-value {
        font-size: 0.9em;
        dominant-baseline: auto;       
        font-style: italic;
    }
    .legend-title {
        font-style: italic;
        font-size: 0.8em;
        fill : #cccccc;
    }
}


/*_________________________________________________________________
//
// FORMULAIRE
//_________________________________________________________________*/


.dataviz .dataviz-form .radioFilter.buttonFilter[scanname="select_type_jour"] > div {
    display: flex;
    
}


.dataviz-form .form-align, .dataviz-form .first, .dataviz-form .second { 
    display: block;
    .buttonFilter {
        margin-right: 10px;
    }
}

.dataviz-form .form-align, .dataviz-form .first-align { 
    display: flex;
    flex-direction: row;
    justify-content: space-between
}


.buttonFilter.radioFilter {
    .radioFilter--label {
        margin : 0px;
    }
    .radioFilter--groupcontent {
        display: flex;
    }
    .radioFilter--content {
        display : block ruby;
    }
}

/* Style du formulaire : .dataviz-form.top*/
.dataviz-form.top {
    display: flex;
    justify-content: space-between;
    .topleft { 
        display: flex;
        .buttonFilter {
            margin-right: 10px;
        }
    }
    .topright { 
        display: flex;
        .buttonFilter {
            margin-right: 10px;
        }
    }
}


.dataviz-sidebar .dataviz-form .buttonFilter.dropdownFilter {
    select {
        max-width: 250px;
    }
}


/* Radio button
//______________________________________________*/
.dataviz-form .buttonFilter.radioFilter--label {
    margin: 0 0 0px;
}

/* RadioRepresentation tab
//__________________________________________________________________*/
.dataviz-form .radioFilter.tabs {
     margin: 0 10px 0 0px;
    .radioFilter--groupcontent {
        display: flex;
        padding-left: 0px;
        width: fit-content;
    }
    .radioFilter--content {
        display: flex;
        overflow: hidden;
        border-radius: 0em 15px 0 0em;
        background: var(--color--primary-ligth);
        border : 1px solid var(--color--primary);
    }
     .radioFilter--content:nth-child(1) {
        z-index: 6;
    }
    .radioFilter--content:nth-child(2) {
        transform: translateX(-12.5px);
        z-index: 5;
    }
    .radioFilter--content:nth-child(3) {
        transform: translateX(-25px);
        z-index: 4;        
    }
    .radioFilter--content:nth-child(4) {
        transform: translateX(-37.5px);
        z-index: 3;        
    }
    .radioFilter--content:nth-child(5) {
        transform: translateX(-50px);
        z-index: 2;        
    }
    .radioFilter--content:nth-child(6) {
        transform: translateX(-62.5px);
        z-index : 1;
    }
    input {
        position: absolute !important;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        width: 1px;
        border: 0;
        overflow: hidden;
    } 
    label {
        margin : 12px 15px 12px 25px;
        color: var(--color--primary);
        font-size: 0.95em;
        font-weight: normal;
        line-height: 1;
        text-align: center;
        transition: all 0.1s ease-in-out;        
    } 
    label:hover {
        cursor: pointer;
    }
    
    
    .radioFilter--content.selected {
        background-color: var(--color--primary);
    }
    input:checked + label {
        
        color : white;
        font-weight: bold;
        box-shadow: none;
    }
    
 }


/*_________________________________________________________________
DATAVIZ : Plot
_________________________________________________________________*/
 

/* Tooltip
_________________________________________________________________*/
 
 .dataviz .tooltip.pie, .dataviz .tooltip.plotBar,.dataviz .tooltip.treemap--tooltip,  .tooltip.Heatmap--tooltip, .tooltip.area--tooltip,
 .voronoi--tooltip, .waffle--tooltip,.specialBubble--tooltip, .bubble--tooltip, .barlink--tooltip,  .plotbox--tooltip {
    background: var(--color--primary-ligth);
    color: var(--color--text);
    border-radius: 5px;
    font-size : 0.9em;
    font-family: var(--font-family);
    max-width: 500px;
    padding: 10px;
    pointer-events: none;
}


.dataviz .tooltip.plotBar tr.content {
    text-align: left;
}

.dataviz .tooltip.plotBar tr.content.isActive {
    font-weight: bold;
}

.dataviz .tooltip.plotBar tr.content.not-representative {
    color : var(--color--warning);
    font-size: 0.8em;
}


.dataviz .scan.bubble {
    foreignObject {
        color : white;
    }
}

/*_________________________________________________________________
// DATAVIZ : plotBar
//_________________________________________________________________*/

.dataviz .scan--bar .axis.xaxis, .dataviz .scan--bar .axis.yaxis {
    font-size: 0.85em;
    font-family: var(--font-family);
}

.dataviz .scan--bar .axis.yaxis {
    font-family: var(--font-family);
    fill : var(--color--text);
    font-size: 0.85em;
}

.dataviz .graphBar .svg-fond-line {
    stroke: var(--color--text);
    stroke-dasharray: 4;
}

.svg-fond-line {
    stroke: var(--color--text);
    stroke-dasharray: 4;
}

.dataviz .graphBar text.bar_label {
    font-size: 0.8em;
    &[defy="equip0"] {
        fill : var(--color--text);
    }
    &[defy="freq_4"] {
        fill : var(--color--text);
    }
}

.dataviz .graphBar text.bar_label.not-representative {
    fill : var(--color--warning);
}

.dataviz .graphBar text.stagger-label {
    font-size: 1em;
}

.dataviz .scan--bar .bar.grouped {
    stroke : white;
    stroke-width: 2px;
}

.dataviz .scan.mapflow{
    path.secteur_geo {
        stroke : var(--color--primary)
    }
}

/*_________________________________________________________________
// DATAVIZ : Marimekko
//_________________________________________________________________*/

.dataviz .plotMarimekko {
    .text_colomn {
        font-weight: bold;
    }
    .text_cell {
        font-size: 0.9em;
        fill: white;
    }
}

/*_________________________________________________________________
// DATAVIZ : Treemap
//_________________________________________________________________*/

.dataviz .treemap {
    .points_g text {
        font-family: var(--font-family);
    }

}


/*_________________________________________________________________
// DATAVIZ : Voronoi
//_________________________________________________________________*/

.dataviz .scan.heatmap {
    .label--voronoi {
        fill : var(--color--text);
        font-family: var(--font);
        
    }
}
/*_________________________________________________________________
// DATAVIZ : heatmap
//_________________________________________________________________*/
 
 .dataviz .scan.heatmap {
     
    .axis.xaxis  {
        font-size: 12px;
        font-family: var(--font);
    }
    .axis.yaxis  {
        font-size: 12px;
        font-family: var(--font);
    }
     
 }
 
 
/*_________________________________________________________________
// DATAVIZ : SpecialBubble
//_________________________________________________________________*/
 
 .dataviz .scan.specialBubble {
    .bubble-circle {
        stroke : white;
    }
}
 
/*_________________________________________________________________
// DATAVIZ :  plotBarLink
//_________________________________________________________________*/
 .dataviz .scan.plotBarLink {
    .text-xLabel, .text-yLabel {
        font-size: 1.2em ;
    }
 }

 
/*_________________________________________________________________
// DATAVIZ : MapLeaflet
//_________________________________________________________________*/

.dataviz .leaflet-control-container > * {
    z-index : 0;
}

.dataviz  .leaflet-control-layers {
    .leaflet-control-layers-toggle {
        background-image: url(/sites/observatoires-normandie/files/imgs/layers.png);
    }
}

.dataviz .leaflet-control-layers-base {
    label {
        font-family: var(--font-family);
    }
}


.dataviz .leaflet-bottom.leaflet-left {
    width: 50%;
}

.dataviz .leaflet-control.leaflet-control-graphicscale {
    margin-bottom :0;
    color : var(--color--text);
}

.leaflet-container {
    background: #ffffff;    
}

.leaflet-legend {
    background: #ffffff;
    padding: 10px;
}


.dataviz .leaflet-container {
    font-family: var(--font-family);
}

.dataviz .leaflet-pane.leaflet-contour-parent-pane > svg path.leaflet-interactive {
    fill : none;
    pointer-events: none;
    stroke: var(--color--active-link);
    stroke-width: 2px;
}

.dataviz .leaflet-contour-epci-pane  > svg path.leaflet-interactive {
    stroke: #808080;
    stroke-width: 2px;
}

.dataviz path.static {
    stroke: #ffffff;
    stroke-width: 1px;
}

.dataviz path.applat {
    stroke: #ffffff;
    stroke-width: 1px;
}

.dataviz .legend-container .icon-group {
    .legend-block[select="unchecked"] {
            opacity : 0.3;
    }
}

.dataviz .text-legend-map .tick{
    font-family: var(--font-family);
    font-size: 14px;
    fill : var(--color--text);
    text {
        fill : var(--color--text);      
    }
}

.dataviz .tooltip.scan.map {
    background: var(--color--primary-ligth);
    color: var(--color--text);
    border-radius: 5px;
    font-size : 0.9em;
    font-family: var(--font-family);
    max-width: 200px;
    padding : 10px;
    .tooltip-title {
        font-weight: bold;
        font-family: var(--font-family);
        color : var(--color--primary);
        text-align: center;
    }
    .tooltip-content {
        font-family: var(--font-family);
        text-align: center;
        b {
            font-family: var(--font-family);
            font-weight: bold;
        }
    }
    .tooltip-suffix {
        font-style: italic;
        font-weight: lighter;
        text-align: center;

    }
    .dataviz {
        font-size : 0.8em;
    }
}