/*--------------------------------------------------------------------------------------------------------------------
 FONT 
--------------------------------------------------------------------------------------------------------------------*/
@font-face {
    font-family: "kanit--regular";
    src: url("/sites/orecan/files/fonts/Kanit-Regular.ttf");
}



:root {
    --color--primary : #02a9b8;
    --color--primary-ligth : #e5f1f2;
    --color--secondary : #e5f1f2;
    --color--text : #2B2929;
    --font-family : kanit--regular;
    
    --p-primary-color : #02a9b8 !important;
    --p-primary-hover-color : #02a9b8 !important;
    --p-button-primary-background : #02a9b8 !important;
    --p-button-primary-hover-background : #02a9b8 !important;
    --p-button-primary-hover-border-color : #02a9b8 !important;
    --p-floatlabel-focus-color : #02a9b8 !important;
    --p-tabs-tab-active-color : #02a9b8 !important;
    --p-tabs-tablist-background : #e5f1f2 !important;
    
    --p-select-option-selected-focus-background : #e5f1f2 !important;
    --p-select-option-selected-background : #e5f1f2 !important;
    --p-select-option-selected-focus-color :  #02a9b8 !important;
    --p-select-option-selected-color : #02a9b8 !important;
    
}

.p-button:disabled {
    cursor: not-allowed;
}


/*_________________________________________________________________

A voir avec Kevin*/
.content-sidebar {
    background: var(--color--primary-ligth);
    .nav-menu {
        display: flex;
        flex-direction: row;
        justify-content: space-around;        
        .item-title {
            visibility: visible;
            opacity: 1;   
            color : var(--color--primary);
        }
    }
    .nav-toggle {
        display: none
    };
    .icon::before {
        color : var(--color--primary);
        font-size: 3em;
    }
    
}

strong, b {
  font-weight: bold;
  font-family: var(--font-family);
}


/*========================================================================== */
/* PAGE d'acceuil */
/*========================================================================== */
.theme-bg-tertiary  {
    background: var(--color--primary-ligth);
    padding: 15px;
    h1,h2,h3, .list--primary .item-title {
        color : var(--color--primary);
    }
    .list--primary .btn, .block--last-events .item-footer a {
        color : var(--color--primary);
    }
    .list--primary .item-date {
        background: var(--color--primary);
        color : #ffffff;
    }
}

 .list--primary {
    .item-media img {
        width: 100%;
        height: 310px;
    }
     
    .button.button--secondary {
        color: var(--color-white);
        background: var(--color-fg-primary);
        .icon--datagone.icon--plus::before {
            background-color: white;
        }
    }
 }
 
 .btn.btn--primary {
    color: var(--color-white);
    background: var(--color-fg-primary);
    .icon--datagone.icon--arrow-right::before {
        background-color: white;
    }
  }


.slider--slideshow {
    .item-bg-inner {
        display: none;
    }
}



.footer-content-bottom {
    .icon.icon--datagone.icon--phone {
        --icon-size: 30px;
        ::before {
            background-color: white;
        }
    }
    
}
/*========================================================================== */
/* NAV MENU */
/*========================================================================== */
.nav--main {
    .nav-menu {
        
        .nav-item.level-1 + .nav-item.level-1::before
        {
            background: var(--color--primary);
        }
        .nav-item.level-1.nolink span {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 86px;
            padding: 0px 8px;
        }
        .nav-item.level-1.nolink:hover {
            background: var(--color--primary);
            color : white;
        }
    }
}

/*========================================================================== */
/* MEDIATHEQUE TERRITORIALE */
/*========================================================================== */
.page--node--73 {
    .content-builder-main {
        background: var(--color--primary-ligth);
    }
    .list.list--media-library {
        background: var(--color--primary-ligth);
        padding: 0 25px;
        li {
            margin-top: 20px;
        }
    }

    .media-bilan-render-container,.media-bilanenr-render-container {
        .view-filters  {
            display: none;
        }
    }
}

/*========================================================================== */
/*    FOOTER */
/*========================================================================== */
.main-footer-inner {
    padding : 0;
    .row.row--fluid {
        padding: 0;
        max-width: none;
        
        .block.block--footer {
            align-items: flex-start;
            flex-direction: column;
            padding-top: 0;
            width: 100%;
            
            .footer-content-top  {
                width: 100%;
            }
            .footer-content-bottom {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                padding-top: 54px;
                padding-bottom: 18px;
                background-color: #2B2929;
            }
        }
    }
}

/* Page INtroduction */
.page.category--dashboard {
    .content-header {
        display: none;
    }
}

.layout.introduction {
    margin-top : 0;
    margin-bottom: 25px;
    .block.block--richtext {
        margin: 60px 96px 108px;
        width: 90%;
        h2 {
            font-size: 1.8em;
        }
    }
}

.nav--children a {
    border-radius: 0;
    height: 300px;
}

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

.list--page-selection {
  & .item-header {
    min-height: 50px;
  }
  .button.button--primary {
    background: var(--color--primary);   
    color : white;
  }
}

/*========================================================================== */
/* Modele de dataviz */
/*========================================================================== */
.dataviz {
    font-family: var(--font-family);
    .dataviz-header {
        background: none;
        border-radius: 0px;
        font-size: 1.5em;
        border-bottom: 2px solid var(--color--primary);        
        .title--dataviz {
            .replace--text.unit {
                font-size: 0.9em;
                font-style: italic;
            }
        }
    }
    
    strong {
        font-family: var(--font-family);
        font-weight: bold;
    }
    .source {
        font-size: 0.8em;
        line-height: 1;
        margin-top: 10px;
        color : var(--p-form-field-placeholder-color);
    }
}

.dataviz.category--modele-sidebar-gauche {
    .dataviz-sidebar-container {
        display: flex;
        flex-direction: row;
    }
    .dataviz-super-container {
        width: 75%;
    }
    .dataviz-container {
        width: 75%;
    }
    .dataviz-sidebar {
        width: 25%;
        padding: 6px;
    }
    .buttonFilter {
        margin-bottom : 15px;
    }
}


.dataviz.category--modele-sidebar-droite {
     .dataviz-sidebar-container {
        display: flex;
        flex-direction: row-reverse;
        
    }
    .dataviz-super-container {
        width: 75%;
    }
    .dataviz-sidebar {
        width: 25%;
        padding: 6px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;     
        margin-right: 15px;
        background: white;
        padding: 25px 10px;
    }
    .buttonFilter {
        margin-bottom : 15px;
    }
}

.dataviz.category--modele-sidebar-top {
    .dataviz-sidebar-container {
        display: flex;
        flex-direction: column-reverse;
    }
    .dataviz-form.top {
        margin-bottom: 15px;
    }
    .form-first {
        display: flex;
        flex-direction: row;
        justify-content: space-between;        
        margin-bottom: 15px;
    }
    .form-second {
        display: flex;
        flex-direction: row;
        justify-content: space-between;        
        background: var(--color--primary-ligth);
        padding: 20px 5px;
        margin-bottom: 20px;
        .buttonFilter[scanname="typeDecoupageButton"] {
            width: 33%;
        }
        .buttonFilter[scanname="zoomButton"] {
            width: 60%;
        }
    }
    
}



.dataviz .keynumber.style1 {
    color : white;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    .prefixtext {
        font-size: 1.3em;
    }
    .text {
        font-family: var(--font-family);
        text-align: center;
        font-size : 15px; 
        .title {
            font-size : 1.2em;
            font-weight: bold;
        }
        strong {
            font-family: var(--font-family);
            display: block;
            font-size : 3em;
            font-weight: bold;;
        }
        b {
            font-family: var(--font-family);
            font-weight: bold;;
        }
        .icon {
            font-size: 1.8em;
            vertical-align: middle;
        }
    }
    .title {
        margin-top: 25px;
        font-weight: bold;
    }
    .sufixtext {
        margin-bottom: 25px;
        font-family: var(--font-family);
        b {
            font-family: var(--font-family);
            font-weight: bold;;            
        }
    }
 }




/*========================================================================== */
/* 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);
    }
}


.leaflet-container {
    background: #ffffff;    
}

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


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

.dataviz .leaflet-pane > svg path.leaflet-interactive {
    fill : none;
    pointer-events: none;
    stroke: white;
    stroke-width: 2px;
}


.dataviz .tooltip.scan.map {
    background: var(--color--primary-ligth);
    border-radius: 5px;
    font-size : 0.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;
    }
}