:root {
    --color-bg-primary: rgba(70, 161, 65, .1); /* --color-primary to rgba */
    --color-secondary: #EEF4EA;
}

#web-editor {
    height: 500px;
}
.node--page .block.block--richtext p,
.node--page .block.block--richtext li {
    color : #666;
}
.introduction .block.block--richtext p {
    color : #fff;
}

.node.node--page .builder-row.l-background {
    margin-top: 0;
    margin-bottom: 0;
    min-height: 400px;
    
    .block.block--richtext {
        margin : 15px;
    }
}

.nav-item.level-1 .donnees_territoriales + .nav-menu.level-2,
.nav-item.level-1 .no-level2 + .nav-menu.level-2,
.nav-item.level-2 .no-level3 + .nav-menu.level-3,
.nav--main .nav-item.level-2.is-parent a.no-level3::after {
    display: none;
}

.content-builder-sidebar {
    background: none;
}
.nav--detail {
    .nav-item .icon {
        display: block;
        margin-right: 10px;
    }
    .nav-item .icon::before {
        font-size: 2em;
    }
    .nav-item a {
        padding: 9px 10px 9px 25px;
    }
    .nav-item .item-title {
        font-size: .85em;
    }
    .nav-item a.is-active {
        background: var(--color-primary);
        color : white;
    }
}


.block--image {
    &:before {
        content: none;
    }
    img {
        border-radius: 5px;
    }
}

.nav--children a {
    border-radius: 5px;
}

.layout--onecol .dataviz {
  margin: 0
}

.list--page-selection .item-wrapper {
    border-radius: 5px;
}

select option:hover,select option:focus, select option:active {
    box-shadow: 0 0 10px 100px #f00 inset;
    background-color: red ;
}

/*
//_________________________________________________________________
// La class  align-vetical-block sur une section aligne verticalement les blocs */
.node--page .layout.align-vetical-block  {
    .builder-item.layout__region {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.node--page .block.block--richtext {
    h3 {
        margin-bottom : 0;        
    }
    p {
        margin-bottom : 10px;
    }
    strong {
        font-family: var(--font-family);
        font-weight: bold;
        color: #2B2929;
    }
    
    .icon {
        --icon-size: 3em;
        vertical-align: middle;
        
        &:before {
            background-color: var(--color-primary);   
        }
    }
}


.block.block--nav-summary {
    padding: 0;
    background: #ecf5eb;
    color : var(--color-primary);
    
    .nav-item {
        min-height: 35px;
        
        .l-accordion.is-open {
            background: var(--color-primary);
            
            .nav-menu-trigger {
                color : white;    
            }
        }
    }
    .nav-menu-trigger {
        color: var(--color-primary);    
    }
}


/*_________________________________________________________________
//
// DATAVIZ MENU de selection de terrioire
//
//_________________________________________________________________*/
.dataviz.category--menu {
    z-index : 50;
    position: inherit;
    
    .title {
        font-family: var(--font-family);
        font-weight: bold;
        line-height: 1.1;
        color: var(--color-primary); 
        text-transform: uppercase;
        
        .sub-title {
            text-transform: initial;
            font-style: italic;
            font-size: .8em;
        }
    }
    .menu-secteur {
        color: var(--color-primary); 
        font-weight: bold;
    }
    .typeahead__filter-button {
        color: var(--color-primary); 
        text-align: left;
    }
    .lib-search-epci {
        color: var(--color-primary); 
        font-style: italic;
        cursor : pointer;
        font-size: .8em;
    }

    .btn.icon {
        font-size: 2.5em;
        color: var(--color-primary); 
        line-height: 1;
        background: none;
        padding: 0;
        
    }
    .btn:hover{
        background: var(--color-primary); 
    }
    .btn.icon:hover{
        color: #fff;
    }
}


/*_________________________________________________________________
//
// DATAVIZ CHIFFRE CLE
//
//_________________________________________________________________*/
.dataviz .keynumber.style1 {
    margin : 5px;
    
    strong {
        font-size: 2em;
        font-weight: bold;
    }
}

.keynumber.text.style1 {
    padding: 25px 0 25px 0;
    background: var(--color-primary); 
    display: flex;
    flex-direction: column;
    text-align: center;
    color: white;
    .title {
        margin-bottom: 15px;
        color: white;
    }
    .icon {
        background-color: white;
        border-radius: 50%;
        color: var(--color-primary); 
        width: 100px;
    }
    .icon::before {
        transform: translateX(9px);
    }
    .number {
        font-size: 1.8em;
        font-weight: bold;
        color: white;        
    }
    .text {
        font-weight: bold;
        margin-bottom: 15px;
        color: white;        
    }
    .sufixtext {
        color : white;
    }
}

/*_________________________________________________________________
//
// DATAVIZ HEADER
//
//_________________________________________________________________*/
.dataviz-header {
    .title.title--dataviz {
        .replace--text.icon {
            font-size: 2em;
            line-height: 0.75;
        }
    }
}

/*_________________________________________________________________
//
// DATAVIZ CONTAINER
//
//_________________________________________________________________*/
.dataviz-sidebar-container {
    display: flex;
    
    .dataviz-container {
        flex: 1;
        width: 75%;   
    }
    .dataviz-sidebar {
        width: 25%;
        padding: 0px 0 0 24px;
    }
}

.dataviz.category--dataviz-modele-2 {
    .dataviz-sidebar-container {
        flex-direction: column-reverse;
        
    }
    .dataviz-container,
    .dataviz-sidebar {
        width: 100%;   
    }
}

.dataviz.category--dataviz-modele-3 {
    .dataviz-sidebar-container {
        flex-direction: column
    }
    .dataviz-container,
    .dataviz-sidebar {
        width: 100%;   
    }
}


/* category--dataviz-modele-1 : */
.dataviz.category--dataviz-modele-1 {
    .dataviz-sidebar {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
    }
    .dataviz-form--prefix {
        display: none;
    }
}

/*_________________________________________________________________
//
// SCANLIB
//
//_________________________________________________________________*/
.dataviz .source {
    font-size: .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 : 1.5em
    }
    .legend-text {
        font-size: 0.8em;
        fill: var(--color-text);
    }
    .legend-value {
        font-size: 1.2em;
        dominant-baseline: auto;        
    }
    .legend-title {
        font-size: 0.95em;
        fill: var(--color-text);
        font-weight: bold;
    }
}


/*_________________________________________________________________
// FORMULAIRE
//_________________________________________________________________*/
.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: 0;
    }
    .radioFilter--groupcontent {
        display: flex;
    }
    .radioFilter--content {
        display: block;
    }
}

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

/* Style spécifique à la dataviz 222, 223 */
.dataviz[data-nid="222"] .dataviz-form.top,
.dataviz[data-nid="223"] .dataviz-form.top {
    display: block;
    
    .topright {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
}

/* dropdown button
//______________________________________________*/
.dataviz-form .buttonFilter.dropdownFilter {
    margin-top: 5px;
    margin-bottom : 10px;
    
    select {
        background: none;
        border: none;
        color: var(--color-primary);
        padding: 5px;
        border-top: 1px solid var(--color-primary);
    }
    label {
        font-family: var(--font-family);
        font-weight: bold;
        font-size: 1em;
        margin-bottom: 0;
    }
}

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


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

/* RadioRepresentation tab
//__________________________________________________________________*/
.dataviz-form .radioFilter.tabs {
     margin: 0 10px 0 0;
     
    .radioFilter--groupcontent {
        display: flex;
        padding-left: 0;
        width: fit-content;
    }
    .radioFilter--content {
        display: flex;
        overflow: hidden;
        border-radius: 0 15px 0 0;
        background: var(--color-secondary);
        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: .95em;
        font-weight: normal;
        line-height: 1;
        text-align: center;
        transition: all .1s ease-in-out;        
        
        &:hover {
           cursor: pointer; 
        }
    }
    
    .radioFilter--content.selected {
        background-color: var(--color-primary);
    }
    input:checked + label {
        color : white;
        font-weight: bold;
        box-shadow: none;
    }
}

/* vertical
//__________________________________________________________________*/
.dataviz-form  .buttonFilter.buttonFilter.radioFilter.vertical {
    margin-top: 0;
    margin-bottom : 20px;
    
    .radioFilter--label {
        font-weight: bold;
    }
    .radioFilter--groupcontent {
        line-height: 1;
        display: block;
    }
    .radioFilter--content {
        display: flex;
        margin-bottom: 5px;
        
        input {
            accent-color: var(--color-primary);
        }
        label {
            font-family: var(--font-family);
            font-size: 13px;
            margin : 0 0 0 5px;
        }
        label.selected {
            font-weight: bold;
        }
    }
}

/* Cas particulier dma-compétence */
.dataviz-form .radioFilter.buttonFilter.vertical[scanname='dma-competence'] {
    .radioFilter--content {
        margin : 0;
    }
    .collecte label {
        display: flex;
        align-items: center;
        margin: 0;
        --icon-size: 3em;
        
        &:before {
            mask-image: var(--icon-competence_collecte);
            background-color: var(--color-primary);
            margin: 0 5px;
        }
    }
    .traitement label {
        display: flex;
        align-items: center;
        margin: 0;
        --icon-size: 3em;
        
        &:before {
            mask-image: var(--icon-competence_traitement);
            background-color: var(--color-primary);
            margin: 0 5px;
        }
    }
}

/* button-representation
//_______________________________________________________________________________________*/
 .dataviz .radioFilter.switch {
     margin: 0 10px 10px 0;
     
     .radioFilter--label {
         display: none;
     }
    .radioFilter--groupcontent {
        display: flex;
        border: 1px solid var(--color-primary);
        padding-left: 0;
        border-radius: 50em;
        width: fit-content;
    }
    .radioFilter--content {
        display: flex;
        overflow: hidden;
        
        > * {
            border-left: 1px solid var(--color-primary);
        }
        &:first-child {
            border-radius: 50em 0 0 50em;
            
            label {
                border-left: none;
            }
        }
        &:last-child {
            border-radius: 0 50em 50em 0;
            
            label {
                border-right: none;
            }
        }
    } 

    input {
        position: absolute !important;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        width: 1px;
        border: 0;
        overflow: hidden;
    } 
    label {
        margin : 0;
        background-color: var(--color-secondary);
        color: var(--color-primary);
        font-size: 12px;
        font-weight: normal;
        line-height: 1;
        text-align: center;
        padding: 8px 16px;
        transition: all 0.1s ease-in-out;        
    } 
    label:hover {
	    cursor: pointer;
    }
    
    input:checked + label {
        background-color: var(--color-primary);
        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,
.plotbox--tooltip {
    background: var(--color-secondary);
    color: var(--color-text);
    border-radius: 5px;
    font-size : .9em;
    font-family: var(--font-family);
    max-width: 500px;
    padding: 10px;
    pointer-events: none;
}
.dataviz .tooltip.plotBar tr.content {
    text-align: left;
}
.dataviz .scan.bubble {
    foreignObject {
        color : white;
    }
}

/*_________________________________________________________________
// DATAVIZ : plotBar
//_________________________________________________________________*/
.dataviz .scan--bar .axis.xaxis,
.dataviz .scan--bar .axis.yaxis {
    font-size: .85em;
    font-family: var(--font-family);
}
.dataviz .scan--bar .axis.yaxis text {
    font-family: var(--font-family);
    fill: var(--color-text);
    font-size: .85em;
}
.dataviz .scan--bar .axis.yaxis #tick-reg28 {
    font-family: var(--font-family);
    fill: var(--color-primary);
    font-weight: bold;
    font-size: .85em;
}
.dataviz .graphBar .svg-fond-line,
.svg-fond-line {
    stroke: var(--color-text);
    stroke-dasharray: 4;
}
.dataviz .graphBar text.bar_label {
    font-size: .8em;
}
.dataviz .graphBar text.stagger-label {
    font-size: 1em;
}

/*_________________________________________________________________
// DATAVIZ : heatmap
//_________________________________________________________________*/
.dataviz .scan.heatmap {
    .axis.xaxis  {
        font-size: 15px;
    }
    .axis.yaxis  {
        font-size: 12px;
    }
}

/*_________________________________________________________________
// DATAVIZ : Treemap
//_________________________________________________________________*/
.dataviz .scan.treemap {
    .labels--treemap {
        font-size: .8em;
    }
}
 
/*_________________________________________________________________
// 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,
.dataviz .leaflet-container {
    font-family: var(--font-family);
}

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

/*.dataviz .leaflet-contour-departement-pane > path {*/
.dataviz .leaflet-pane > svg path.leaflet-interactive {
    fill: none;
    pointer-events: none;
    stroke: white;
    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[data-nid="80"] path.static {
    stroke: #ffffff;
    stroke-width: .25px;
}
.dataviz path.applat {
    stroke: #ffffff;
    stroke-width: 1px;
}
.dataviz .legend-container .icon-group {
    .legend-block[select="unchecked"] {
            opacity: .3;
    }
}

.dataviz .tooltip.scan.map {
    background: var(--color-secondary);
    color: var(--color-text);
    border-radius: 5px;
    font-size: .9em;
    font-family: var(--font-family);
    max-width: 350px;
    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;
    }
}

/*-------------------------------------------------------------
// Fancy BOX
//-------------------------------------------------------------*/
.fancybox-infobar, .fancybox-button {
    color : white;
    background: var(--color-primary);
}

.messages__nodata {
    background: #483e1e;
    padding: 12px;
    border: 2px solid transparent;
    border-radius: 10px;
    
    .messages__header {
        color: #efcf64;
        font-weight: bold;
    }
    .messages__content {
        color: #efcf64;
    }
}