@charset "UTF-8";@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,700&display=swap");

body{
    background-color: black;
}

.bv-container {
    font-family: 'Rubik', sans-serif;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    text-align: center !important;
    transition: max-height 1s ease-in-out;
    position: relative; /* Ajouter position relative à la div parente */
}

.bv-titre {
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: center;
}

.bv-titre h2{
    font-family: 'Rubik', sans-serif;
}

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

.bv-tooltip .bv-tooltiptext {
    visibility: hidden;
    width: 400px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    position: absolute;
    bottom: -40px; /* Positionne le tooltip au milieu de la hauteur du texte */
    right: 125%; /* Positionne le tooltip à gauche du texte */
    margin-left: 0; /* Réinitialise la marge gauche */
    margin-right: 10px; /* Ajoute une marge à droite pour l'espace entre le texte et le tooltip */
    opacity: 0;
    transition: opacity 0.3s;
    /* transform: translateX(50%); */
    z-index:99999999 !important;
}


.bv-tooltip img {
    width: 16px !important;
    height: 16px !important;
}

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

span .libelle-question {
    font-size: 20px;
}

    /* min-width: 850px; */
#tableauComposants {
    width: 100%;

    border-collapse: collapse;
    margin-top: 0px !important;
    margin-bottom: 20px !important;
    border: none !important; /* Supprime toutes les bordures du tableau */
  }

  th {
    padding: 10px;
    text-align: left;
    border: none !important; /* Supprime toutes les bordures des cellules */
  }

  tr td {
    padding: 10px;
    text-align: left;
    border: none;
    border-bottom: 1px solid #ccc !important; /* Supprime toutes les bordures du tableau */
  }

  tr td.td-reload-composant {
    border: none !important;
  }

  tr td.td-bv-tooltip {
    border: none !important;
  }

  th {
    background-color: #f2f2f2;
  }

  td img {
    max-width: 45px;
    max-height: 45px;
  }

  a.link-composant {
    color: black;
  }

  #pagination {
    margin-top: 10px;
    text-align: center;
  }


.bv-type-utilisation{
  padding-right: 3px;
  border-bottom: 1px solid #ccc !important;
}

.delete-button {
    border-bottom: 1px solid #ccc !important;
}

.delete-button .trash-icon {
    width: 20px;
    height: 20px;
    margin-bottom: -4px;
    fill: red;
    cursor: pointer;
    transition: transform 0.3s;
}

.delete-button .trash-icon:hover {
    transform: scale(120%);
}

.bv-entete-build {
  display: flex;
  font-size: 17px;
  text-align: left;
}

.edit-button {
  margin-right: 3px;
}

.edit-button .edit-icon {
  width: 23px;
  height: 23px;
  margin-bottom: -4px;
  cursor: pointer;
  transition: transform 0.3s;
}

.edit-button .edit-icon:hover {
  transform: scale(120%);
}

.alert-consommable {
  background-color: #bfd5ff;
  border: 1px solid #90b7ff;
  padding: 15px;
  margin: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
}

.alert-consommable h2 {
  font-family: 'Rubik', sans-serif;
  color: #2872fa;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
}

.alert-consommable p {
  font-size: 14px;
  margin-bottom: 5px;
}

.alert-consommable a {
  color: #2872fa;
  text-decoration: none;
  font-weight: bold;
}

.tableau-container{
  overflow: visible;
}

@media screen and (max-width: 1024px) {

  .bv-container {
    display: block;
  }

}

@media screen and (max-width: 985px) {

  .tableau-container {
    overflow: auto;
  }

}




/* .delete {
  overflow: visible;
  position: relative;
  padding: 10px;
  border: 2px solid;
  border-radius: 10px;
  border-image: red;
  -webkit-mask: 
    conic-gradient(from 180deg at top 2px right 2px, red 90deg,red 0)
     var(--_i,200%) 0  /200% var(--_i,2px) border-box no-repeat,
    conic-gradient(at bottom 2px left  2px,  red 90deg,red 0)
     0   var(--_i,200%)/var(--_i,2px) 200% border-box no-repeat,
    linear-gradient(red 0 0) padding-box no-repeat;
  transition: .7s, -webkit-mask-position .7s .7s;
}

.delete-hovered {
--_i: 100%;
color: red;
transition: .7s, -webkit-mask-size .7s .7s;
}

.delete-button {
  background-color: white !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: -20px;
  left: 420px;
  z-index:99999999 !important;
}

.delete-button .trash-icon {
  width: 20px;
  height: 20px;
  fill: red;
}



.svg-wrapper {
position: relative;
margin: 0 auto;
width: 500px;
}
.shape1,
.shape2 {
stroke-dasharray: 1120;
stroke-width: 5px;
fill: transparent;
stroke: #19f6e8;
border-bottom: 5px solid black;
transition-timing-function: linear;
transition: stroke-dashoffset 4s, stroke-dasharray 4s;
}
.shape1 {
stroke-dashoffset: 1120;
}
.shape2 {
stroke-dashoffset: -1120;
}
.text {
font-family: 'Roboto Condensed';
font-size: 22px;
line-height: 32px;
letter-spacing: 8px;
color: #fff;
top: -48px;
position: relative;
}
.svg-wrapper:hover .shape1,
.svg-wrapper:hover .shape2 {
stroke-dashoffset: 0;
stroke-dasharray: 1120;
} */