[data-bs-theme=light] body {  
  background-color: #b8dbff;
}
[data-bs-theme=light] .bg-body {  
  background-color: #b8dbff!important;
}

[data-bs-theme=auto] body {  
  background-color: #b8dbff;
}
[data-bs-theme=auto] .bg-body {  
  background-color: #b8dbff!important;
}
[data-bs-theme=light]{
      --bs-border-radius: 1rem!important;
}
[data-bs-theme=dark]{
      --bs-border-radius: 1rem!important;
}
[data-bs-theme=auto]{
      --bs-border-radius: 1rem!important;
}
html,
body {
    overscroll-behavior-y: contain;
}
.click {
  cursor: pointer;
}
.missatge {
    cursor: pointer;
  }
  .nom {
    cursor: pointer;
  }
  .zoom-container {
  overflow: hidden;
}

.zoomable {
  transition: transform 0.5s;
}

.zoomable.zoomed {
  transform: scale(2); /* Augmenta el zoom al valor desitjat, com 2 per un 200% */
  cursor: zoom-out; /* Canvia el cursor quan està ampliada */
}
  .quadrat{
    height:350px;
    aspect-ratio:1/1;
   

  }
  .cover{
     object-fit: cover;
  }
  .imatge-cercle {
  width: 100px; /* Ajusta l'amplada i l'alçada segons les teves necessitats */
  height: 100px;
  border-radius: 50%; /* Això converteix el quadrat en un cercle mitjançant una mitjana del 50% */
  overflow: hidden; /* Assegura't que la imatge no surti del cercle */
 
}

.imatge-cercle img {
  width: 100%; /* Assegura't que la imatge ompli tot l'espai del cercle */
  height: 100%;
  object-fit: cover; /* Ajusta l'escala de la imatge per cobrir el cercle sense deformar-la */
}
.imatge-container {
  display: inline-block;
  cursor: pointer;
}
.imatge-completa {
  width: 100%;
  height: 100%;
  border-radius: 0.375rem; /* Elimina la forma de cercle per veure la imatge completa */
  overflow: auto; /* Si l'imatge és més gran que la finestra, permet desplaçar-se */
}
  /* Estil CSS personalitzat per al cercle */
  .circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #5c8365;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: bold;
    object-fit: cover;
  }

  small {
    font-size: 00.75em;
  }

  figure.zoom {
    & img:hover {
      opacity: 0;
    }

    img {
      transition: opacity .5s;
      display: block;
      width: 100%;
      max-height: 500px;
    }

    background-position: 50% 50%;
    position: relative;

    overflow: hidden;
    cursor: zoom-in;
  }

  .imgTallada {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    text-align: center;
  }

  /* highlightTyped use mark */
  .autocomplete-menu mark {
    text-decoration: underline;
    background: none;
    color: currentColor;
    padding: 0;
  }

  /* Optional nicer scrollbars */
  .autocomplete-menu {
    --scroller-color: 0, 0%;
    --scroller-color-lightness: 80%;
    --scroller-bg-lightness: 90%;
    --scroller-hover-factor: 0.8;
    --scroller-thumb: hsl(var(--scroller-color), var(--scroller-color-lightness));
    /* Replicate hover for webkit */
    --scroller-thumb-hover: hsl(var(--scroller-color), calc(var(--scroller-color-lightness) * var(--scroller-hover-factor)));
    --scroller-background: hsl(var(--scroller-color), calc(var(--scroller-bg-lightness)));
    scrollbar-color: var(--scroller-thumb) var(--scroller-background);
    scrollbar-width: thin;
  }

  .autocomplete-menu::-webkit-scrollbar {
    width: 8px;
  }

  .autocomplete-menu::-webkit-scrollbar-track {
    background: var(--scroller-background);
  }

  .autocomplete-menu::-webkit-scrollbar-thumb {
    background: var(--scroller-thumb);
  }

  .autocomplete-menu::-webkit-scrollbar-thumb:hover {
    background: var(--scroller-thumb-hover);
  }


.desplega::after {
    content: "";
  position: absolute;
  top: 4.5rem;
  left: 1.5rem; /* A la dreta del card-body */ 
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.3em 0.3em 0 0.3em; /* Fletxa orientada cap avall inicialment */
  border-color: #000 transparent transparent transparent;
  transition: transform 0.3s; /* Transició per la rotació */    
}

.nom {
  cursor:pointer;
}

.mot {
    color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));
    text-decoration: underline;
    cursor:pointer;
}
.edit {

    background: #c3c3c3;
    border-radius: 50%;
    bottom: 24px;
    height: 30px;
    position: absolute;
    right: 0;
    width: 30px;
    cursor:pointer;
}

.icon {
    
    border-radius: 50%;
    border: 1px solid transparent;
   
    box-sizing: border-box;
    color: #3c4043;
    height: 30px;
    padding: 2px;
    position: absolute;
    right: 0;
    width: 30px;
    bottom: 0;
}
.imgedit{
  position:relative;
}
  @keyframes apareixdreta {
    from {
      transform: translateX(100%);
      opacity: 0;
    }

    to {
      transform: translateX(0%);
      opacity: 1;
    }
  }

  .apareixdreta {
    animation: apareixdreta ease 0.5s;
  }

  @keyframes creix {
    from {

      transform: scale(1, 0.1);

      opacity: 0;

    }

    to {
      transform: scale(1, 1);
      opacity: 1;
    }
  }

  @keyframes apareixesquerra {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }

    to {
      transform: translateX(0%);
      opacity: 1;
    }
  }

  .apareixesquerra {
    animation: apareixesquerra ease 0.5s;
  }

  @keyframes desapareixdreta {
    from {
      transform: translateX(0%);
      opacity: 0;
    }

    to {
      transform: translateX(100%);
      opacity: 1;
    }
  }

  .desapareixdreta {
    animation: desapareixdreta 0.5s;
  }


  @keyframes desapareixesquerra {
    from {
      transform: translateX(0%);
      opacity: 0;
    }

    to {
      transform: translateX(-100%);
      opacity: 1;
    }
  }
.desapareixesquerra {
    animation: desapareixesquerra 0.5s;
  }

#number {
      font-size: 1rem;
      color: #333;
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.5);
      opacity: 0;
      transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  z-index:3000;
    }

  .dorsal {
            /* Bootstrap classes: d-flex align-items-center justify-content-center position-relative */
            width: 96px; /* Amplada de l'embolcall per a la icona i el número */
            height: 96px; /* Alçada de l'embolcall */
            border-radius: 50%; /* Per fer-lo rodó (Bootstrap té rounded-circle) */
            background-color: white; /*#387D38;  Color de fons verd */
            color:  #387D38; /* Color del text */
            font-family: "Inter", sans-serif; /* Font Inter */
            font-weight: bold;
            font-size: 1.25rem; /* Mida de la font per al número */
            overflow: hidden; /* Amaga qualsevol contingut que sobresurti */
        }

        .dorsal .material-symbols-outlined {
            font-size: 5rem; /* Mida de la icona */
            /* Bootstrap classes: position-absolute top-50 start-50 translate-middle */
            z-index: 1; /* Assegura que la icona estigui al darrere del número */
           opacity: 0.7;  /* Fes la icona semitransparent */
        }

        .dorsal .id-number {
            /* Bootstrap classes: position-relative */
            z-index: 2; /* Assegura que el número estigui per sobre de la icona */
        }