:root {
    --m-top: 20px;
    --m-left: 20px;
    --font-1 : 'Antonio', sans-serif;
    --font-2 : 'Montserrat', sans-serif;
    --color-purple: #484995;
    --color-purple-l1: #54559C;
    --color-grey-l1:#F2F2F7;
    --color-grey-l2:#A1A1A4;
    --color-dark: #11253B;
    --color-dark-l1:#475667;
  }
*{
    font-family: var(--font-2);
}

.graph-wrapper{
    aspect-ratio: 16 / 9;
}
/* BARRE DE NAVIGATION */

/* #tabs{
    position: sticky;
    top: 0;
    z-index: 999;
} */
#tabs > *{
    font-family: var(--font-2);
    font-weight: bold;
    background-color: white;
    color : lightgray;
    border-width: 0px;
    position: relative;
}
#tabs > .tab--selected {
    color : var(--color-dark);
}
#tabs > .tab--selected ::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 40%; /* La bordure commencera à 10% de la largeur de l'onglet */
    width: 20%; /* La bordure couvrira 80% de la largeur de l'onglet */
    border-bottom: 2px solid var(--color-dark-l1);

  }
#tabs{
    border-bottom: 2px solid lightgray ;
}

#tabs > .active_tab{
    color:green;
}
/* BLOCS PRINCIPAUX */
/* .panel-main{
    width: auto;
} */
.panel-main-overview{
    /* margin: 20px; */
    padding: 20px;
}
.panel-main{
    margin: 0px;
}
.panel-filters{
    line-height: 200%;
    padding-right: 10px;
    padding-bottom: 20px;
    flex: 1 1 auto;
    height: calc(60vh);
    overflow-y: auto;
}
.panel-filters label {
    padding-left: 5px;
}
.panel-buttons{
    flex: 0 0 auto;
    position: sticky;
    text-align: center;
    line-height: 150%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.panel-left{
    padding-left:0;
}
.panel-left-content{
    position: sticky;
    top: 0;
    padding: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    background-color: var(--color-grey-l1);
    height: calc(100vh);
    display: flex;
    flex-direction: column;
}
.panel-right{
    padding: 20px 40px;
    background-color: white;
}

/* FILTRES */

/* date picker */

.filter-date-picker{
    display: block;
}
.DateInput_1{
    width:40%;
}
/* hide help button */
.DayPickerKeyboardShortcuts_showSpan, .DayPickerKeyboardShortcuts_show {
    display:None;
}
/* select input */
.DateInput_input {
    font-size: small;
    color: black;
    text-decoration: solid;
    width: 130%;
}
.DateInput_input__focused{
    border-bottom: 2px solid var(--color-purple);
}

/* arrow */
.DateRangePickerInput_arrow, .DateRangePickerInput_arrow_svg {
    /* display:None; */
    width: 10px;
}
/* date selection */
.CalendarDay__selected, .CalendarDay__selected:active, .CalendarDay__selected:hover, .CalendarDay__selected_span:active, .CalendarDay__selected_span:hover {
    background: var(--color-purple);
    border: var(--color-purple);
    color:white;
}
/* middle date selection */
.CalendarDay__selected_span, .CalendarDay__hovered_span, .CalendarDay__hovered_span:hover{
    background: var(--color-purple-l1);
    border: var(--color-purple-l1);
    color:white;
}
/* month name */
.CalendarMonth_caption, .CalendarMonth_caption_1{
    font-size: medium;
}

/* slider filters */
.rc-slider-track{
    background-color: var(--color-purple-l1);
}
.rc-slider-handle, .rc-slider-handle:hover, .rc-slider-handle-dragging, .rc-slider-handle-click-focused{
    border: solid 2px var(--color-purple-l1);
}
/* dropdown options, selected options , default option*/
.VirtualizedSelectOption ,.Select-value-label, .Select-placeholder{
    font-family: var(--font-2);
 }
 /* dropdown option hover effect */
.VirtualizedSelectFocusedOption {
    background-color: var(--color-grey-l1);
    color : var(--color-purple-l1);
}
.VirtualizedSelectOption{
    font-size: small;
    line-height: 140%;
    height: auto;
}
.Select, .Select-control{
    border-color: 0
}
.filter-block{
    background-color: white;
    padding:10px;
    padding-top:7px;
    margin-top: 20px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

}
.filter-block > label{
    font-family: var(--font-2);
    color: var(--color-purple);
    font-weight: 600;
    font-size: small;
    line-height: 150%;
}
/* BOUTONS */
.btn{
    font-size: small;
    font-weight: 500;
    font-family: var(--font-2);
}
.btn-success, .btn-secondary{
    background-color:var(--color-purple);
    border-color:var(--color-purple);
}
.btn-success:hover, .btn-secondary:hover{
    background-color:var(--color-purple-l1);
    border-color:var(--color-purple-l1);
}
.btn-danger{
    background-color:#EF799D;
    border-color: #EF799D;
}
.btn-outline-primary{
    border-color: var(--color-purple);
    color: var(--color-purple);
}
.btn-outline-primary:hover{
    border-color: var(--color-purple);
    background-color: var(--color-purple);
    color:white;
}

/* INDICATEURS */

.overview-ind-panel, .panel-ind{
    display: flex;
    justify-content: start;
    margin-bottom: 10px;
}

.overview-ind, .content-ind{
    font-family: var(--font-2);
    font-weight: bold;
    color: var(--color-purple);
    margin-bottom: 10px;
    font-size: large;
}
.overview-ind-label, .content-ind-label{
    font-family: var(--font-2);
    font-size: 70%;
    font-weight: bold;
    margin-top: 3px;
}
.overview-ind-block, .content-ind-block{
    padding-left: 10px;
    padding-right: 10px;
    width: 15%;
}

/* GRAPHIQUES */

.overview-graph-label, .content-graph-label {
    font-family: var(--font-2);
    font-weight: bold;
    color: var(--color-purple);
  }

/* TABLEAUX */
.column-header--sort {
    display: none;
  }

/* GRAPHIQUES DYNAMIQUES */
.panel-dyn{
    background-color: #DCE3EC;
    margin-top: 30px;
    padding-top: 10px;
    padding-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.panel-dyn > :nth-child(3){
    margin-top: 10px;
    margin-bottom: 10px;
}
i{
    margin-left:5px;
}
.hidden-element{
    display: none;
}

/* SPINNER */
.spinner{
    color: var(--color-purple);
}
.spinner-container{
    position: fixed;
    z-index: 999999;
    top:17%;
    right:3%;
    width: 2rem;
    height: 2rem;
    size: "md";
}