#analysator {
    font-family: 'Open Sans', sans-serif;
    --blue: #8eb4e3;
    --blueF: #1c5293 ;
    --texte: #222222;
    --lightgrey: #C0BEC3;
    padding : 2em;
}
#analysator * {
    box-sizing: border-box;
}
#analysator  a {
    text-decoration : none;
    color: var(--blue)
}
#analysator hr {
    border:1px solid var(--lightgrey);
    margin: 2em 0
}

#analysator  .btn-gram {
    color:#fff;
    background-color: var(--blue);
    padding:0 0.2em;
    border-radius: 5px;
    margin-right: 0.5em;
}

#analysator menu {
    display: flex;
    justify-content: space-between;
    font-size:28px;
    font-weight: bold;
    margin-bottom:2em
}
    #analysator menu a{
        color:var(--lightgrey);
        margin-right : 0.5em;
    }
        #analysator menu a:hover,#analysator menu a.active{
            color: var(--blue)
        }

#analysator  .row {
    display: flex;
}
#analysator .col {
    display: flex;
    flex-direction: column;
}
#analysator .btn-analyse {
    display: inline;
    background-color: var(--blue);
    border:none;
    color:#fff;
    padding: 1em 2em;
    margin: 1em auto;
    border-radius: 5px;
    font-weight: 600;
    letter-spacing: 1px;
    font-size:16px

}
#analysator #montexte {
    width: 80%;
    margin: 0 auto;
    border: 2px solid var(--lightgrey);
    border-radius:5px;
    height: 50vh
}
#analysator aside, #analysator .regroup{
    width: 20vw;
    min-width: 350px;
    max-width: 350px;;
    padding : 2em;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0,  0.2);
    min-height : 25vh;
}

#analysator  aside#multi {
    box-shadow: none;
    padding: 0;
   
}
    #analysator aside select {
        position:relative;
        color: #ffffff;
        border:none;
        padding: 0.5em 1em;
        display: block;
        width:100%;
        font-weight: 600;
        letter-spacing: 1px;
        font-size: 18px;
        border-radius: 3px;
        appearance: none;
        background: url(down-arrow.svg) 96% / 12% no-repeat  var(--blue);  
        margin-bottom: 1.5em;
    }
        #analysator aside select option{
            position:relative;
            color: var(--texte);           
            background-color:#ffffff;  
            font-size: 16px;
            font-weight: normal;
        }
       /* #analysator option:hover{background-color:#000;}*/

    #analysator aside .titre{
        border-bottom : 2px solid var(--blue);
        justify-content : space-between;
        margin: 1.5em 0 1em 0
    }

        #analysator aside h4{
            margin:0;            
        }
        #analysator aside h3{
         text-align: center;
        
           padding: 0.3em ;
           margin: 0 0 1em;
           color : var(--blueF)      
        }
        #analysator .groupe + h3{
            margin-top:3em        
         }
        #analysator aside .titre  {
            color : var(--blue)
        }
    #analysator .mot .occurence {
        display:inline-block;
        width : 20px;
        margin: 0 1em 0 1em
    }
    #analysator aside .selected {
        color : #ffffff;
        background-color:var(--blue);      
    }
        
#analysator .texte_analyse {
    padding :0 2em;
    max-width: 80vw;
}

#analysator .texte_analyse .selected{
    color : #ffffff;
    background-color:var(--blue)
}

/*SWITCH*/
#analysator aside div {
    margin-top: 0.25em;
  }
#analysator .switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    margin-right: 1em;
  }
  #analysator  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  #analysator .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #C0BEC3;
    transition: .4s;
  }
  
  #analysator .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
  }
  
  #analysator .nomsCommuns input:checked + .slider {
    background-color: #222222;
  }
    #analysator .nomsPropres input:checked + .slider, #analysator .sujets input:checked + .slider {
        background-color: #F2AC57;
    }
    #analysator .adjectifs input:checked + .slider, #analysator .cods input:checked + .slider {
        background-color: #83AE08;
    }
    #analysator .adverbes input:checked + .slider, #analysator .cois input:checked + .slider {
        background-color: #AE086C;
    }
    #analysator .verbes input:checked + .slider, #analysator .ccTemps_ input:checked + .slider {
        background-color: #3CC8FF;
    }
    #analysator .pronoms input:checked + .slider, #analysator .ccLieux input:checked + .slider {
        background-color: #2316BC;
    }
    #analysator .déterminants input:checked + .slider, #analysator .gvs input:checked + .slider  {
        background-color: #B1B1B1;
    }
    #analysator .prepositions input:checked + .slider, #analysator .ccButs input:checked + .slider {
        background-color: #F887BD;
    }
    #analysator .conjonctions input:checked + .slider, #analysator .ccManieres input:checked + .slider {
        background-color: #59D4CD;
    }
    #analysator .inconnus input:checked + .slider {
        background-color: #FF1304;
    }
    #analysator .tous input:checked + .slider {
        background-color: #45b778;
    }
  
  
  
  #analysator input:focus + .slider {
    box-shadow: 0 0 0 1px rgba(21, 156, 228, 0.7);
    outline: none;
  }
  
  #analysator  input:checked + .slider:before {
    transform: translateX(24px);
  }
  
  #analysator .slider.round {
    border-radius: 34px;
  }
  
  #analysator .slider.round:before {
    border-radius: 50%;
  }

  /*END SWITCH*/


  /*GRAMMAIRE NATURE*/
  #analysator .bold {
      font-weight: bold;
  }
  #analysator .nomCommun {
    color: #222222;    
  }
    #analysator .nomPropre  {
        color: #F2AC57;
        
    }
    #analysator .adjectif  {
        color: #83AE08;
    }
    #analysator .adverbe  {
        color: #AE086C;
    }
    #analysator .verbe {
        color: #3CC8FF;
    }
    #analysator .pronom {
        color: #2316BC;
    }
    #analysator .determinant{
        color: #B1B1B1;
    }
    #analysator .preposition{
        color: #F887BD;
    }
    #analysator .conjonction{
        color: #59D4CD;
    }
    #analysator .inconnu {
        color: #FF1304;
    }

    /*GRAMMAIRE GROUPES*/
#analysator .texte_analyse.groupes {
        line-height: 30px;
    }
#analysator .texte_analyse span,.gv {
    display: inline-block;
}
.sujet::after,.cod::after,.coi::after,.ccLieu::after,.ccTemps:after,.ccBut::after, .ccManiere::after,.gv::after {
        content:"";
        display:block;
        height:2px;
        width:100%;
        border-bottom:2px solid red
    }
#analysator .sujet::after {
    border-color:#F2AC57;
}
#analysator .cod::after {
    border-color:#83AE08;
}
#analysator .coi::after {
    border-color:#AE086C;
}
#analysator .ccTemps {
    border-color: #3CC8FF;
}
#analysator .ccLieu::after {
    border-color:#2316BC;
}
#analysator.ccManière::after {
    border-color:#59D4CD;
}
#analysator .ccBut::after {
    border-color:#F887BD;
}
#analysator .gv::after {
    border-color:#B1B1B1;
    padding: 1px
}

/*POPUP*/
.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
  }
  .overlay:target {
    visibility: visible;
    opacity: 1;
  }
  
  .popup {
    margin: 70px auto;
    padding: 0px;
    background: #fff;
    border-radius: 5px;
    width: 80%;
    position: relative;
    transition: all 5s ease-in-out;
    
  }
  .popup .titre {
      justify-content: space-between;
      padding: 0.5em 3em;
      background-color : #333;
      color: #fff
  }
  
  .popup .filtres h4 {
   text-align:center;
   font-size: 20px;
  }
  .popup .close {
    position: absolute;
    top: 0px;
    right: 10px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
  }
  .popup .close:hover {
    color:var(--blue);
  }
  .popup .content {
    padding: 2em;
    overflow: auto;
  }
  .popup .filtres  {
    cursor:pointer
}
  .popup .filtres .menu-filtres {
      display:none;
  }
  .popup .filtres:hover .menu-filtres {
    display:block;
    position: absolute;
    color: #222222;
    background-color: #fff; 
    padding : 2em;
    right:0;
    top:30px;
    width: 100%;
    max-width:500px;
    border: 5px solid #333
}
.popup .filtres:hover .menu-filtres input {
    margin-left : 0.7em;  
}
.popup .menu-filtres h5 {
    margin-bottom: 1em;
}
.popup .filtres .menu-filtres div {
    margin-bottom: 1em;
}

/*TABLE*/
#analysator table {
   border-collapse: collapse;
   margin-top : 1.5em;
   white-space: nowrap;
}
#analysator table td,th{
border : 1px solid var(--lightgrey);
padding: 0.2em 0.5em
}


/*TOOLTIP*/
.wrapper {
    cursor: help;   
    font-size: 14px;
    position: relative;
    display:inline-block
   
    }
    
    .wrapper .tooltip {
    background: #222222;
    border-radius: 3px;
    top: 30px;
    color: #fff !important;
    display: block;
    right: 0px;
    margin-bottom: 15px;
    opacity: 0;
    padding: 20px;
    pointer-events: none;
    position: absolute;
    min-width: 290px;
    width: fit-content;
    width: moz-fit-content;
    max-width:500px;
    -webkit-transform: translateY(10px);
      -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
        transform: translateY(10px);
    -webkit-transition: all .25s ease-out;
      -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
        transition: all .25s ease-out;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        z-index:9
    }

    .wrapper .tooltip:before {
    bottom: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
    }
    
    .wrapper .tooltip:after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-bottom: solid #222 10px;
    top: -10px;
    content: " ";
    height: 0;
    right: 10px;
    margin-left: -13px;
    position: absolute;
    width: 0;
}
    
    .wrapper:hover .tooltip {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0px);
      -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
        transform: translateY(0px);
    }