:root{
    --color-spe: hsl(234, 12%, 34%);;
    --color-com: #e0e0e0;

    --color-c1 : hsl(0, 78%, 90%);
    --color-c2 : hsl(24, 78%, 90%);
    --color-c3 : hsl(49, 97%, 90%);
    --color-c4 : hsl(180, 62%, 90%);
    --color-c5 : hsl(212, 86%, 90%);
    --color-c6 : hsl(229, 6%, 90%);

    --red: hsl(0, 78%, 62%);
    --cyan: hsl(180, 62%, 55%);
    --orange: hsl(34, 97%, 64%);
    --blue: hsl(212, 86%, 64%);
    --green : hsl(88, 47%, 52%);
    --veryDarkBlue: hsl(234, 12%, 34%);
    --grayishBlue: hsl(229, 6%, 66%);
    --veryLightGray: hsl(0, 0%, 98%);

    --weight1: 200;
    --weight2: 400;
    --weight3: 600;

    font-size: 0.9rem;
}
body{
    display: flex;
    flex-direction: column;
    height: 100vh;
    
}
header {
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
}
header h2 {
    font-size: 18pt;
}
header h2>a{
    text-decoration: none;
}
footer{
    margin-top: 4rem;
    padding: 1rem;
    background-color: var(--color-com);
    font-size: smaller;
    color: var(--grayishBlue);
}
footer>*{
    margin: 0;
}

main{
    height: 100%;
}

hr{
    width:80%;
    margin: 4rem auto;
}


.ref-comp{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 1rem;
}
.ref-comp > table{
    border: thin solid var(--grayishBlue);
}
.ref-comp > table:hover{
    border: thin solid var(--veryDarkBlue);
}
.ref-comp > table:hover caption{
    color: var(--veryDarkBlue);
    font-weight: bold;
}
.ref-comp td{
    width: 2rem;
    height:2rem;
    pointer-events: none;
}
.ref-comp caption{
    text-align: center;
}

#create-ref-comp{
    display:flex;
    flex-wrap: wrap;
    gap:1rem;
}

table, input, input.form-control{
    font-size:0.9rem;
  }
table{
    border-collapse: separate !important;
}

td{
    padding: 1em;
}
input{
   
}

td.c1{
    background-color: var(--color-c1);
}
td.c2{
    background-color: var(--color-c2);
}
td.c3{
    background-color: var(--color-c3);
}
td.c4{
    background-color: var(--color-c4);
}
td.c5{
    background-color: var(--color-c5);
}
td.c6{
    background-color: var(--color-c6);
}

input[type=number].form-control{
    background-color: rgba(255,255,255,0.5);
    text-align: center; 
    margin-bottom: 0.2em;
}

.outline{
    border: thin solid currentColor;
    border-radius: 0.2em;
    padding-inline: 0.2em;
    padding-block: 0.1em;
    font-weight: bold;
}

.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e9ecef;
    border-left-width: 0.25rem;
    border-radius: 0.25rem;

    border-left-color: #f0ad4e;
}

td>p{
    font-weight: bold;
    text-align: right;
    margin-right: 0.5em;
    margin-bottom: 0;
}

td[data-statut]{
    outline: 0.2em solid var(--statut-clr);
    outline-offset: -0.5em;
    color: var(--statut-clr);
}
/* td[data-statut] p{
   color: var(--statut-clr);
} */
td[data-statut='val']{
    --statut-clr:var(--green);
}
td[data-statut='nval']{
    --statut-clr:var(--red);
}


/* .comp-valid::before {
    content:'✓'; 
    font-weight: bold;
    text-align:right;
    color: green;
    text-align: center;
    position: relative;
    left:7em;
} */

.d-disable{
    opacity: .2;
    pointer-events: none;
}
.d-disable input{
    color:transparent;
}
.d-invisible{
    opacity: 0;
    pointer-events: none;
}
.d-close{
    pointer-events: none;
}

.rounded-badge{

}

p.lead{
    margin-top: 2rem;;
}

.fs-xs{
    font-size: 0.7rem;
    color: white !important;
}