:root {
    --couleur-jaune: rgb(255,221,6);
    --couleur-jaune-20 : rgb(255,248,205);
    --couleur-jaune-40 : rgb(255,241,155);
    --couleur-jaune-60 : rgb(255,235,106);
    --couleur-noir: rgb(0,0,0);
    --couleur-gris-fonce: rgb(126,129,135);
    --couleur-gris-clair: rgb(223,222,223);
    --couleur-agen: rgb(154,155,157);
    }


    .border-jaune{
               border:var(--couleur-jaune);
            }
    
    .main-vr {
        max-width: 600px;
        margin: auto;
        clear: both;
        border-radius: 30px;
        border: solid 5px var(--couleur-gris-fonce);
    }    
    


    .btn-outline-success {
        border-color: var(--couleur-jaune) !important;
        color: var(--couleur-jaune) !important;
    }
    .btn-outline-success:hover, .btn-outline-success:active, .btn-outline-success:visited {
        border-color: var(--couleur-gris-fonce) !important;
        background-color:var(--couleur-jaune) !important;
        color:var(--couleur-gris-fonce) !important;
    }
    
    
    .btn-outline-danger {
        border-color: var(--couleur-gris-fonce) !important;
        color: var(--couleur-gris-fonce) !important;
    }
    .btn-outline-danger:hover, .btn-outline-danger:active, .btn-outline-danger:visited {
        border-color: var(--couleur-gris-fonce) !important;
        background-color:var(--couleur-gris-fonce) !important;
        color:white !important;
    }
    
    .btn-primary, btn-primary:hover, .btn-primary:active, .btn-primary:visited {
        border-color: var(--couleur-gris-fonce) !important;
        background-color:var(--couleur-gris-fonce) !important;
        color:white !important;
    }
    .bg-primary {
        background-color:var(--couleur-jaune) !important;
        color:var(--couleur-gris-fonce) !important;
    }
    .effets {
        margin-top:5px;
        opacity: 1;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }
    .effets:hover {
        opacity: 1;

        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    .list-group{
        max-height:50vh;
    }


    body {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 12px;
        margin: auto;
        background-color: var(--couleur-gris-clair);
    }
    table {
        border-collapse: collapse;
        box-sizing: border-box;
    }
    a.info {
        position: relative;
        text-decoration: none;
    }
    a:hover.info {
        text-decoration: none;
        background: none;
    }
    a.info span {
        display: none;
    }
    a:hover.info span {
        display: inline;
        position: absolute;
        top: 20px;
        left: 0px;
        z-index: 20;
        background: white;
        color: var(--couleur-gris-fonce);
        border: 3px solid var(--couleur-gris-fonce);
        border-radius: 5px;
        text-align: center;
        font-weight: normal;
        font-size: 10px;
        line-height: 10px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        padding: 5px;
        white-space: nowrap;
    }
    div.info span {
        display: none;
    }
    
    div:hover.info span {

        position: relative;
        top: -10px;
        left: -40px;
        z-index: 20;
        background: white;
        color: blue;
        border: 3px solid blue;
        border-radius: 5px;
        /*width: 150px;*/
        text-align: center;
        font-weight: normal;
        font-size: 10px;
        line-height: 10px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        padding: 5px;
        white-space: nowrap;
    }
    
    section {
        display: block;
        width: 50%;
        height: 50%;
        overflow-y: auto;
    }
    
    .none {
        border-style: none;
    }
    
    .main {
        width: 100%;
        margin: auto;
        clear: both;
    }
    
    
.fond-jaune {
    background-color: var(--couleur-jaune);
}
.fond-gris-fonce {
    background-color: var(--couleur-gris-fonce);
}
.fond-gris-clair {
    background-color: var(--couleur-gris-clair);
}

.txt-jaune {
    color: var(--couleur-jaune);
}
.txt-blanc {
    color: white;
}
.txt-gris-fonce {
    color: var(--couleur-gris-fonce);
}
.txt-gris-clair {
    color: var(--couleur-gris-clair);
}    

.border-jaune {
    border-color: var(--couleur-jaune);
}
.border-gris-fonce {
    border-color: var(--couleur-gris-fonce);
}
.border-gris-clair {
    border-color: var(--couleur-gris-clair);
}      
    
    
    
.contenu,
.footer {
        box-sizing: border-box;
    }
    

    .contenu {
        width: 100%;
        /*max-height: 300px;*/
        border-style: none;
        overflow-y: auto;
        clear: both;
    }
    
    .footer {
        width: 100%;
        color: var(--couleur-jaune) !important;
        border-style: none;
        text-align: center;

        clear: both;
    }
    
    
.enteteSondage {
        width: 100%;
        background-color: royalblue;
        border-style: solid solid none;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        clear: both;
    }
    
.contenuSondage {
        width: 100%;
        border-style: none solid;
        overflow-y: auto;
        clear: both;
        background-color: white;
    }

.footerSondage {
        width: 100%;
        color: white;
        border-style: none solid solid;
        text-align: center;
        background-color: royalblue;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        padding: 15px;
        clear: both;
    }

    
    .blanc {
        color: white;
        font-size: x-large;
        border-style: none;
    }
    
    .bleu {
        color: blue;
        font-size: 30px;
        border-style: none;
    }
    
    .photo {
        width: 75px;
        border-radius: 20px;
    }
    
    form {
        width: 100%;
    }
    
    fieldset {
        padding: 10px;
        /*
        margin-bottom: 10px;
        */
        border: 3px solid var(--couleur-gris-fonce) !important;
        border-radius: 10px;
    }
    
    legend {
        color: var(--couleur-jaune) !important;
        font-weight: bold
    }

    input,
    option {
        width: 150px;
        background-color:  var(--couleur-gris-clair) !important;
        color: var(--couleur-gris-fonce) !important;
    }
    
    select,
    textarea,
    canvas {
        background-color:  var(--couleur-jaune-20) !important;
        color: black !important;
        opacity: 1 !important;
        padding: 3px;
        border: 1px solid var(--couleur-gris-fonce);
        border-radius: 5px;
        box-shadow: 1px 1px 2px var(--couleur-jaune) inset;
    }
               textarea, canvas {
                   width: 100%;
               } 
    
    select {
        margin-top: 0px;
    }
    

    
    
    input[type=radio],
    input[type=checkbox] {
        background-color: transparent;
        border: none;
        width: auto;
        box-shadow: none;
        vertical-align: middle;
        cursor: pointer;
    }


        .noClass:hover {
        background-color: red;
        color: white;
    }











.tooltip {
  position: relative;
  display: inline-block;
}

        
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}






    #home {
        display: block;
        top: 0px;
        left: 0px;
    }
    
    .cellulesEspacees{
        border-collapse: separate;
        border-spacing: 5px;
    }
    
.cherche {
        width: 60px;
        height:auto;
        font-family: 'Material Icons';
        font-size: 60px;
        border:0;
        background-color: transparent !important;
        color: var(--couleur-gris-fonce) !important;
        box-shadow: none;
    }
    
.cherche:hover {
        /*background-color: blue;*/
        color: var(--couleur-gris-clair) !important;
    }

            .callout {
              padding: 20px;
              margin: 20px 0;
              border: 1px solid #eee;
              border-left-width: 5px;
              border-radius: 3px;
            }
            .callout h4 {
              margin-top: 0;
              margin-bottom: 5px;
            }
            .callout p:last-child {
              margin-bottom: 0;
            }
            .callout code {
              border-radius: 3px;
            }
            .callout + .bs-callout {
              margin-top: -5px;
            }
            
            .callout-default {
              border-left-color: #777;
            }
            .callout-default h4 {
              color: #777;
            }
            
            .callout-primary {
              border-left-color: #428bca;
            }
            .callout-primary h4 {
              color: #428bca;
            }
            
            .callout-success {
              border-left-color: #5cb85c;
            }
            .callout-success h4 {
              color: #5cb85c;
            }
            
            .callout-danger {
              border-left-color: #d9534f;
            }
            .callout-danger h4 {
              color: #d9534f;
            }
            
            .callout-warning {
              border-left-color: #f0ad4e;
            }
            .callout-warning h4 {
              color: #f0ad4e;
            }
            
            .callout-info {
              border-left-color: var(--couleur-jaune);
;
            }
            .callout-info h4 {
              color: var(--couleur-jaune);
            }
            
            .callout-bdc {
              border-left-color: #29527a;
            }
            .callout-bdc h4 {
              color: #29527a;
            }


    #icone {
            width: 100%;
            font-family: 'Material Icons';
            font-size: 30px;
            background-color: transparent;
            color: blue;
            box-shadow: none;
        }
        
    #icone:hover {
            /*background-color: blue;*/
            color: white;
    }
    
    
    
input[type="radio"].competence {
    display: none;
}

input[type="radio"].competence+label {
    padding: 0.0rem 0.5rem;
    border: 1px dashed var(--couleur-jaune);
    color: var(--couleur-jaune);
    cursor: pointer;
}

input[type="radio"].competence:checked+label {
    border: 1px solid blue;
}

input[type="radio"].competence:checked+label.quatre {
    border: 1px solid green;
    background-color: green;
    color: white;
}


input[type="radio"].competence:hover+label.quatre {
    border: 1px solid green;
    background-color: green;
    color: white;
}

input[type="radio"].competence:checked+label.trois {
    border: 1px solid yellow;
    background-color: yellow;
    color: orange;
}

input[type="radio"].competence:hover+label.trois {
    border: 1px solid yellow;
    background-color: yellow;
    color: orange;
}

input[type="radio"].competence:checked+label.deux {
    border: 1px solid orange;
    background-color: orange;
    color: yellow;
}

input[type="radio"].competence:hover+label.deux {
    border: 1px solid orange;
    background-color: orange;
    color: yellow;
}

input[type="radio"].competence:checked+label.un {
    border: 1px solid red;
    background-color: red;
    color: white;
}

input[type="radio"].competence:hover+label.un {
    border: 1px solid red;
    background-color: red;
    color: white;
}

input[type="radio"].competence:checked+label.zero {
    border: 1px solid blue;
    background-color: blue;
    color: white;
}

input[type="radio"].competence:hover+label.zero {
    border: 1px solid blue;
    background-color: blue;
    color: white;
}

input[type="radio"].competence:checked+label.vide {
    border: 1px solid blue;
    background-color: white;
    color: blue;
}

input[type="radio"].competence:hover+label.vide {
    border: 1px solid blue;
    background-color: white;
    color: blue;
}

.val5,
.val4,
.val3,
.val2,
.val1,
.val0 {
    padding: 2px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 20%;
}

.val4 {
    border: 1px solid green;
    background-color: green;
    color: white;
}

.val3 {
    border: 1px solid yellow;
    background-color: yellow;
    color: orange;
}

.val2 {
    border: 1px solid orange;
    background-color: orange;
    color: yellow;
}

.val1 {
    border: 1px solid red;
    background-color: red;
    color: white;
}

.val0 {
    border: 1px solid blue;
    background-color: blue;
    color: white;
}

.val5 {
    border: 1px solid blue;
    background-color: blue;
    color: white;
}    





/* For width 800px and larger: */
@media only screen and (min-width: 600px) {
  .main {
            width: 90%;
        }
        
        
    .card{
        border-radius: 26px !important;
        border:1px solid var(--couleur-gris-fonce) !important;
    }
    .card-header{
        border-top-left-radius: 25px !important;
        border-top-right-radius: 25px !important;
    }        
    .card-footer{
        border-bottom-left-radius: 25px !important;
        border-bottom-right-radius: 25px !important;
    }     
}