:root {
    --background: #eee;
    --selected: #d42382;
    --text:#222;
    --border:#222;
    --font: Tahoma, sans-serif;
    --pink:#d42382;
    --blue:#4464c0;
    --green:#147c14;
}
@media (prefers-color-scheme: dark) {
    :root {
        --background: #333;
        --text:#ccc;
        --border:#ccc;
    }
}
.BackToTop {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
}
.BackToTop svg { 
    width: 50px;
    height: 50px;
    fill: var(--text);
}
.BackToTop svg:hover { 
    fill: var(--selected);
}
.BackToTop svg:hover #arrow1, .BackToTop svg:hover #arrow2 { 
    animation: up 1s ease normal infinite;
}
.loading {
    width: 100%;
    position: fixed;
    height: 100%;
    background: rgba(34,34,34,0.8);
    top: 0;
}
.loading .icon {
    width: 50px;
    position: absolute;
    top: 50%;
    left: calc(50% - 25px);
}
.loading .text {
    color: #eee;
    position: absolute;
    top: calc(50% + 50px);
    left: calc(50% - 98px);
}
#_Path_, #_Path_1, #_Path_2, #_Path_3, #_Path_4, #line1 {
    animation: left 1s ease normal infinite;
}
#_Path_5, #_Path_6, #_Path_7, #_Path_8, #line2 {
    animation: right 1s ease normal infinite;
}
#mouth, #right_eye, #left_eye, #right_chick, #left_chick, #_Path_15, #_Path_16, #_Path_17 {
    animation: up 1s ease normal infinite;
}
@keyframes left {
    50% {
      transform: rotate(-18deg) translateY(5px) translateX(-12px)
    }
    100% {
      transform: rotate(0) translateY(0) translateX(0)
    }
}
@keyframes right {
    50% {
      transform: rotate(18deg) translateY(-10px) translateX(10px)
    }
    100% {
      transform: rotate(0) translateY(0) translateX(0)
    }
}
@keyframes up {
    50% {
        transform: translateY(-2px);
    }
    100% {
        transform: translateY(0);
    }
}
body::-webkit-scrollbar {
    width: 12px;               /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
    background: transparent;        /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
    background-color: var(--pink);    /* color of the scroll thumb */
    border-radius: 20px;       /* roundness of the scroll thumb */
    border: 0;  /* creates padding around scroll thumb */
}
body {
    background: var(--background);
    color: var(--text);
}
body, input, select {
    font-family: var(--font);
}
h1 {
    text-align: center;
    color: var(--blue);
}
h3 {
    margin-bottom: 5px;
}
a,a:visited {color:var(--blue)}
a:hover {color:var(--pink)}
.inseechart {
    height: 100px;
    width: 250px;
}
.item > * {margin-bottom: 10px}
.masculin .prenom,.masculin > *:before,.nbPersonnes .masculin{color:var(--blue)}
.féminin .prenom,.féminin > *:before,.nbPersonnes .féminin{color:var(--pink)}
.mixte .prenom,.mixte > *:before{color:var(--green)}
.select2-container {
    width: 100%
}
input.text {
    width: 100%;
    height:22px;
}
.orderbyitem {
    cursor: pointer;
}
.orderbyitem, .deselectstartover {
    cursor: pointer;
}
.orderbyitem:hover, .deselectstartover:hover {
    color: var(--selected);
}
.facettotalcount {
    font-weight: bold;
}
.facettotalcount .count {
    color:var(--selected);
}
.irs--flat .irs-from, .irs--flat .irs-to, .irs--flat .irs-handle>i:first-child, .irs--flat .irs-handle.state_hover>i:first-child, .irs--flat .irs-handle:hover>i:first-child {
    background-color: var(--pink);
}
.irs--flat .irs-bar, .irs--flat .irs-single {
    background-color: var(--blue);
}
.irs--flat .irs-from:before, .irs--flat .irs-to:before, .irs--flat .irs-single:before {
    border-top-color: var(--pink);
}
#showmorebutton {
    text-align: center;
    font-weight: bold;
    background: var(--text);
    color: var(--background);
    border-radius: 8px;
    width: 250px;
    height: 30px;
    line-height: 30px;
    margin: 20px auto;
    cursor: pointer;
}
#showmorebutton:hover {
    background: var(--selected);
    color: var(--text);
} 

/*@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 

    /* FACETS */
    #facets {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat(10, auto);
        padding: 0 20px 20px 20px;
        border: dotted 2px var(--border);
    }
    #facets.close {
        gap: 1px 20px;
    }
    #facets.open {
        gap: 5px 20px;
    }
    #facets:before {
        cursor: pointer;
        content: 'FILTRES';
        grid-row: 1;
        grid-column: 1;
        margin-top: -7px;
        font-weight: bold;
        background: var(--background);
        width: 77px;
        letter-spacing: 4px;
        padding-left: 5px;
        font-family: monospace;
        height: 20px;
        color: var(--pink);
    }
    #facets:after {
        cursor: pointer;
        content: attr(data-after);
        grid-row: 1;
        grid-column: 1;
        margin-top: -10px;
        margin-left: -13px;
        background: var(--background);
        width: 15px;
        height: 20px;
        color: var(--pink);
    }
    #facets:hover:after, #facets:hover:before {
        color: var(--blue);
    }
    #texte {
        grid-row: 2
    }
    #initiale {
        grid-row: 5
    }
    #nombreLettres {
        grid-row: 4
    }
    #sexe {
        grid-row: 3
    }
    #populariteHommes {
        grid-row: 6
    }
    #populariteFemmes {
        grid-row: 7
    }
    #langues {
        grid-row: 8
    }
    #caractere {
        grid-row: 9
    }
    .bottomline {
        grid-row: 10;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat(3, auto);
        gap: 5px 20px;
    }
    .facettotalcount {
        grid-row: 3;
        margin-top: 20px;
    }
    .deselectstartover {
        grid-row: 1;
        text-align: right;
    }
    .orderby {
        grid-row: 2;
    }
    .orderbyitem {
        display: inline-block;
    }    
    .orderbyitem:after {
        content: '|';
        padding: 0 5px;
        color: var(--text);
    }
    .orderbyitem:last-child:after {
        content: '';
    }

    /* RESULTS */
    #results {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-auto-flow: row;
        margin-top: 20px;
        border-top: solid 2px var(--border);
    }
    #results #items {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat(20, auto);
        grid-auto-flow: row;
    }
    .item{
        border-bottom: solid 2px var(--border);
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: repeat(8, auto);
        gap: 0;
        padding: 10px 0
    }
    .prenom {
        grid-column: 1 / 3;
        grid-row: 1;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 1.2em;
    }
    .insee {
        grid-column: 1;
        grid-row: 2;
    }
    .nbPersonnes {
        grid-column: 2;
        grid-row: 2;
    }
    .sens {
        grid-column: 1 / 3;
        grid-row: 3;
        color: var(--text);
    }
    .item > *:before {
        text-decoration: underline;
        margin-right: 10px;
    }
    .sens:before {
        content: 'Signification:';
    }
    .origine {
        grid-column: 1 / 3;
        grid-row: 4;
    }
    .origine:before {
        content: 'Origine:';
    }
    .langue {
        grid-column: 1 / 3;
        grid-row: 5;
    }
    .langue:before {
        content: 'Langues:';
    }
    .fete {
        grid-column: 1 / 3;
        grid-row: 6;
    }
    .fete:before {
        content: 'Fête:';
    }
    .caractere {
        grid-column: 1 / 3;
        grid-row: 7;
    }
    .caractere:before {
        content: 'Caractère:';
    }
    .autre {
        grid-column: 1 / 3;
        grid-row: 8;
    }
    .autre:before {
        content: 'Autres prénoms:';
    }
/*}*/
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ 

    /* FACETS */
    #facets {
        grid-template-columns: auto auto;
        grid-template-rows: repeat(5, auto);
    }
    #texte {
        grid-column: 1;
        grid-row: 1
    }
    #initiale {
        grid-column: 1;
        grid-row: 2
    }
    #nombreLettres {
        grid-column: 2;
        grid-row: 2
    }
    #sexe {
        grid-column: 2;
        grid-row: 1
    }
    #populariteHommes {
        grid-column: 1;
        grid-row: 3
    }
    #populariteFemmes {
        grid-column: 2;
        grid-row: 3
    }
    #langues {
        grid-column: 1;
        grid-row: 4
    }
    #caractere {
        grid-column: 2;
        grid-row: 4
    }
    .bottomline {
        grid-column: 1 / 3;
        margin-top: 0;
        display: grid;
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        gap: 5px 20px;
    }
    .facettotalcount {
        grid-row: 1;
        grid-column: 1;
        margin-top: 0;
    }
    .deselectstartover {
        text-align: right;
        grid-row: 1;
        grid-column: 2;
    }
    .orderby {
        grid-row: 2;
        grid-column: 1 / 3;
    }
}
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ 

    /* RESULTS */
    .item > * {
        place-self: center left;
    }
    .prenom {
        grid-column: 1;
    }
    .insee {
        grid-column: 2;
        grid-row: 1 / 4;
    }
    .nbPersonnes {
        grid-column: 1;
    }
    .fete {
        grid-column: 1;
        grid-row: 3;
    }
    .sens {
        grid-row: 4;
    }
    .origine {
        grid-row: 5;
    }
    .langue {
        grid-row: 6;
    }

}
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ 

    /* RESULTS */
    .item {
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(5, auto);
        gap: 5px;
        padding: 5px;
    }
    .item > * {
        place-self: auto;
    }
    .sens {
        grid-row: 1;
        grid-column: 3;
    }
    .origine {
        grid-row: 4;
        grid-column: 1 / 4;
        border-top: dotted 1px var(--text);
        margin-top: 10px;
        padding-top: 10px;
    }
    .langue {
        grid-row: 2;
        grid-column: 3;
    }
    .caractere {
        grid-row: 3;
        grid-column: 3;
    }
    .autre {
        grid-row: 5;
        grid-column: 1 / 4;
    }

}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ 
    /* RESULTS */
    .item {
        grid-template-rows: repeat(5, auto);
        grid-template-columns: repeat(4, auto);
    }
    .nbPersonnes {
        grid-row: 2;
    }
    .fete {
        grid-column: 1;
        grid-row: 3;
    }
    .origine {
        grid-column: 1 / 5;
        grid-row: 4;
    }
    .langue {
        grid-column: 4;
        grid-row: 1;
    }
    .caractere {
        grid-column: 3 / 5;
        grid-row: 2;
    }
    .autre {
        grid-column: 1 / 5;
        grid-row: 5;
    }
}
@media (min-width:1281px) { /* hi-res laptops and desktops */ 

}