/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
.vert {
  color: #34E5A6;
}
.bg-primary {
  background-color:rgba(1, 4, 136, 0.9) !important;
}
.text-primary {
  color:rgb(1, 4, 136) !important;
}
.border-vert {
  border: 1px solid #34E5A6;
}
.bg-vert {
  background-color: #34E5A6;
  color: white;
}
.shadow-vert {
  box-shadow: 0 .125rem .25rem #34E5A6;
}

.hr-style {
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
  margin: 10px 0px;
}

.hr-text {
  width: 100%; 
  text-align: center; 
  border-bottom: 1px solid rgb(228, 228, 228); 
  line-height: 0.1em;
  margin: 10px 0 20px; 
} 

.hr-text span { 
   background:#fff; 
   padding:0 10px; 
}

#main img {
  border-radius: 5px;
}

pre {
  margin: 20px;
  padding: 20px;
  border: 1px solid black;
  background-color: silver;
  border-radius: 10px;
}

.text-sc {
  font-variant: small-caps;
}

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-dark);
  --bs-tooltip-max-width: 300px;
  --bs-tooltip-opacity: 1;
}

.sortable thead th {
  position: relative;
}
.sortable thead th:hover {
  cursor: pointer;
}
.sortable thead th:hover .bx.bxs-sort-alt {
  display: inline-block;
  position: absolute;
  right: 0px;
  top: 12px;
  color: silver;
}

.sortable .bx.bxs-sort-alt {
  display: none;
}
.hoverRow:hover {
  box-shadow: inset 5px 5px 50px 5px rgba(0,0,0,0.05);
}

.stripedRow:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}
.circle-button {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle-buttonhover {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.stretched-linkhover:hover {
  box-shadow: inset 5px 5px 50px 5px rgba(0,0,0,0.1);
  border-radius: 4px;
}
.afficheHover:hover .affiche {
  display: inline !important;
}
.resizable {
  resize: horizontal;
  overflow: auto;
  width: 33.33%;
  min-width: 200px;
  max-width: 50%;
}

.tooltipStyle a {
  text-decoration: underline !important;
}

/*--------------------------------------------------------------
# Page cotation
--------------------------------------------------------------*/
@keyframes color {
  0% {
    background: #5d7daf;
  }

  20% {
    background: #978066;
  }

  40% {
    background: #fac250;
  }

  60% {
    background: #4d4180;
  }

  80% {
    background: #334660;
  }

  100% {
    background: #203442;
  }
}

#critereTH {
  background: #5d7daf;
  animation: color 15s infinite linear alternate;
}


body {
  background-image: url("../img/background.jpg");
  background-attachment: fixed;
}

#body .bg-complexite {
  background-color: #5d7daf;
  color: white;
}
.text-complexite {
  color: #5d7daf;
}

#body .bg-connaissances {
  background-color: #978066;
  color: white;
}
.text-connaissances {
  color: #978066;
}

#body .bg-autonomie {
  background-color: #fac250;
  color: #000000;
}
.text-autonomie {
  color: #fac250;
}

#body .bg-contribution {
  background-color: #4d4180;
  color: white;
}
.text-contribution {
  color: #4d4180;
}

#body .bg-encadrement {
  background-color: #334660;
  color: white;
}
.text-encadrement {
  color: #334660;
}

#body .bg-communication {
  background-color: #203442;
  color: white;
}
.text-communication {
  color: #203442;
}

#body .bg-degre {
  background-color: #2e6a66;
  color: white;
}

#referentiel {
  text-align: center;
}

#referentiel tbody td,
#referentiel thead th:not(:first-child) {
  border-right: 2px solid silver;
  min-width: 200px;
}

#referentiel thead tr th {
  color: rgb(255, 255, 255);
  vertical-align: middle;
}

#referentiel tbody a {
  text-decoration: none;
  font-style: italic;
  color: rgb(12, 0, 122);
  cursor: help;
  z-index: 2;
  position: relative;
}

#referentiel tbody td {
  position: relative;
  height: 100%;
}

#referentiel tbody th {
  border-right: 2px solid silver;
  color: #2e6a66;
  background-color: white;
}

#referentiel tbody tr:last-child {
  font-style: italic;
}

#referentiel tbody input {
  visibility: hidden;
  position: absolute;
}

#referentiel tbody label {
  cursor: pointer;
  border-radius: 5px;
}

#referentiel input:checked+label a,
#referentiel label:hover a {
  color: silver;
}

#referentiel .degre {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 12px;
  border: 1px solid white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  margin: 2px;
  color: white;
  font-size: 10px;
  font-weight: bolder;
  display: none;
}

#referentiel td:hover .degre{
  display: block;
}
#referentiel td:has(> input:checked) .degre {
  display: block;
}

#referentiel td:has(> input:checked) {
  box-shadow: inset 0 0 10px #02020288;
}

#referentiel .complexite input:checked+label,
#referentiel .complexite:hover,
#cotationPaP button.text-complexite.active {
  background-color: #5d7daf;
  color: white;
}
.border-complexite {
  border: 1px solid #5d7daf !important;
}

#referentiel .complexite:has(> input:checked) {
  background-color: #5d7daf !important;
  color: white;
}

#referentiel .connaissances input:checked+label,
#referentiel .connaissances:hover,
#cotationPaP button.text-connaissances.active {
  background-color: #978066;
  color: white;
}
#referentiel .connaissances:has(> input:checked) {
  background-color: #978066;
  color: white;
}
.border-connaissances {
  border: 1px solid #978066 !important;
}


#referentiel .autonomie input:checked+label,
#referentiel .autonomie:hover,
#cotationPaP button.text-autonomie.active {
  background-color: #fac250;
  color: #000000;
}
#referentiel .autonomie:has(> input:checked){
  background-color: #fac250;
  color: #000000;
}

.border-autonomie {
  border: 1px solid #fac250 !important;
}

#referentiel .autonomie label:hover a,
#referentiel .autonomie input:checked+label a {
  color: #5f5f5f;
}

#referentiel .contribution input:checked+label,
#referentiel .contribution:hover,
#cotationPaP button.text-contribution.active {
  background-color: #4d4180;
  color: white;
}
#referentiel .contribution:has(> input:checked){
  background-color: #4d4180;
  color: white;
}

.border-contribution {
  border: 1px solid #4d4180 !important;
}

#referentiel .encadrement input:checked+label,
#referentiel .encadrement:hover,
#cotationPaP button.text-encadrement.active {
  background-color: #334660;
  color: white;
}

#referentiel .encadrement:has(> input:checked) {
  background-color: #334660;
  color: 1px solid white;
}

.border-encadrement {
  border: 1px solid #334660 !important;
}

#referentiel .communication input:checked+label,
#referentiel .communication:hover,
#cotationPaP button.text-communication.active {
  background-color: #203442;
  color: white;
}
#referentiel .communication:has(> input:checked){
  background-color: #203442;
  color: white;
}

.border-communication {
  border: 1px solid #203442 !important;

}

.degreButton button.active {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  font-weight: bolder;
}

/* Afficher le bouton Sortir du plein écran uniquement lorsqu'on est en mode plein écran */
:-webkit-full-screen #exit-fullscreen-btn,
:-moz-full-screen #exit-fullscreen-btn,
:fullscreen #exit-fullscreen-btn {
  display: inline;
}

#copieCell td {
  cursor: pointer;
  line-height: 1;
}
.text-shadow {
  text-shadow: 1px 1px 1px #000000;
}