@font-face {
    font-family: scheherazade;
    src: url('../font/scheherazade-Regular.ttf');
    /* src: url('static/font/scheherazade-Regular.ttf'); */
}

/* ----------------------
/* arabic quote */
.ar {
    /* align: center; */
    font-family: scheherazade;
    /* font-family: Vazirmatn; */
    font-size: 40px;
    text-align: right;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.arlittle {
    /* align: center; */
    font-family: scheherazade;
    font-size: 18px;
    text-align: right;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.my-form-column-class{
    /* /* background-color: #8dd6df; */
    border-radius: 5px;
    /* margin: 10 px; */
}

.my-form-row-class {
    background-color: rgb(177, 233, 236);
    padding: 25px; /* espace interne : entre bordure et contenu */
    margin: 50px; /* espace externe : entre 2 rows  */
    border-radius: 25px;
}


/* arabic quote */
.ar-for-autocomplete {
    /* align: center; */
    font-family: scheherazade;
    font-size: 20px;
    text-align: right;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

/* Effectivement, ces sélecteurs CSS sont utilisés pour styliser les éléments générés
par jQuery UI, mais ils n'ont pas été spécifiquement appliqués dans le JavaScript.
Cependant, jQuery UI applique automatiquement
certaines classes aux éléments, comme .ui-autocomplete et .ui-menu-item,
lorsqu'il génère la liste de suggestions. */

/* Pour les colonnes du formulaire */

/* Ajustement de la liste d'autocomplétion */
.ui-autocomplete {
    /* Limite la hauteur maximale de la liste pour éviter le débordement */
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000 !important;
    /* Empêche le texte de déborder en ligne unique */
    white-space: nowrap;
}

.ui-menu-item .ui-menu-item-wrapper.ar {
    font-family: scheherazade;
    font-size: 16px;
    text-align: right;
    /* Empêche la sélection de texte */
    user-select: none;
    /* Espacement interne pour les éléments */
    padding: 5px;
    /* Ligne de séparation entre les éléments */
    border-bottom: 1px solid #05f29f;
    /* Permet aux lignes de se plier et de s'ajuster */
    white-space: normal;
}


/* TAG CONTAINER IN QASAID */
.validated-tags-section {
    border: 2px solid #ddd; /* Bordure grise */
    padding: 20px;
    border-radius: 10px;
    background-color: #f9f9f9; /* Couleur de fond légèrement grise */
    margin: 20px 0;
    position: relative;
  }

  .section-title {
    text-align: center;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
  }

  .tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center; /* Centrer les tags */
    margin-bottom: 10px;
  }

  .tag-capsule {
    padding: 8px 15px;
    border-radius: 25px;
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
  }

  .green-capsule {
    background-color: #28a745; /* Vert */
  }

  .brown-capsule {
    background-color: #795548; /* Marron */
  }

  .red-capsule {
    background-color: #dc3545; /* Rouge */
  }

  .tag-capsule:hover {
    opacity: 0.8;
  }

  .remaining-tags-info {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 14px;
    color: #555;
    text-align: right;
  }

  .tag-form-section {
    border: 2px solid #ddd; /* Bordure grise pour le formulaire */
    padding: 20px;
    border-radius: 10px;
    background-color: #f9f9f9; /* Fond légèrement grisé */
    margin: 20px 0;
  }

  .form-title {
    text-align: center;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
  }

  .form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .submit-button {
    padding: 10px 20px;
    border-radius: 25px;
    border: none;
    background-color: #007bff; /* Couleur bleu pour le bouton */
    color: white;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    margin-top: 15px;
  }

  .submit-button:hover {
    background-color: #0056b3;
  }

  /* NOTES section */
  .validated-notes-section {
    border: 2px solid #ddd; /* Bordure grise pour les notes */
    padding: 20px;
    border-radius: 10px;
    background-color: #f9f9f9; /* Fond légèrement grisé */
    margin: 20px 0;
    position: relative;
  }

  .section-title {
    text-align: center;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
  }

  .note-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center; /* Centrer les notes */
    margin-bottom: 10px;
  }

  .note-box {
    padding: 15px;
    border-radius: 10px;
    background-color: #e9ecef; /* Fond gris clair pour chaque note */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%; /* S'étend pour occuper toute la largeur disponible */
    max-width: 600px; /* Limite la largeur maximale */
  }

  .remaining-notes-info {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 14px;
    color: #555;
    text-align: right;
  }

  .note-form-section {
    border: 2px solid #ddd; /* Bordure grise pour le formulaire */
    padding: 20px;
    border-radius: 10px;
    background-color: #f9f9f9; /* Fond légèrement grisé */
    margin: 20px 0;
  }

  .form-title {
    text-align: center;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
  }

  .submit-button {
    padding: 10px 20px;
    border-radius: 25px;
    border: none;
    background-color: #007bff; /* Couleur bleu pour le bouton */
    color: white;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    margin-top: 15px;
  }

  .submit-button:hover {
    background-color: #0056b3;
  }


/* FORMULAIRE TAG et NOTES dans Qasida */

  .form-section-container {
    display: flex;
    gap: 20px; /* Espace entre les deux sections */
    justify-content: space-between;
  }

  .tag-form-section, .note-form-section {
    flex: 1; /* Chaque section occupe la moitié de la largeur */
    border: 2px solid #ddd; /* Bordure grise */
    padding: 20px;
    border-radius: 10px;
    background-color: #f9f9f9; /* Fond légèrement grisé */
    margin: 20px 0;
    box-sizing: border-box;
  }

  .form-title {
    text-align: center;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
  }

  @media (max-width: 768px) {
    .form-section-container {
      flex-direction: column;
    }
  }


/* TECH INFOS section */
.tech-info-section {
    border: 2px solid #ddd; /* Bordure grise pour la section technique */
    padding: 20px;
    border-radius: 10px;
    background-color: #f9f9f9; /* Fond légèrement grisé */
    margin: 20px 0;
  }

  .section-title {
    text-align: center;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
  }

  .tech-info-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center; /* Centre les capsules */
  }

  .tech-info-capsule {
    padding: 10px 20px;
    border-radius: 25px;
    background-color: #0253a9; /* Couleur bleue pour les capsules */
    color: white;
    font-size: 14px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 5px 0;
    flex: 1;
    text-align: center;
    max-width: 250px;
  }

  .tech-info-capsule strong {
    font-weight: bold;
  }

  @media (max-width: 768px) {
    .tech-info-container {
      flex-direction: column;
    }
  }

  /* QASIDA BASIC INFOS */
  .qasida-info-section-wrapper {
    border: 2px solid #ddd; /* Bordure grise pour encadrer toute la section */
    padding: 20px;
    border-radius: 15px;
    background-color: #f9f9f9; /* Fond légèrement grisé */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Légère ombre pour donner de la profondeur */
    margin: 20px 0;
  }

  .qasida-info-section {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center; /* Centre les capsules */
  }

  .qasida-info-capsule {
    padding: 15px;
    border-radius: 25px;
    background-color: #17a2b8; /* Couleur bleu-cyan pour les capsules */
    color: white;
    font-size: 14px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    flex: 1;
    min-width: 200px;
    text-align: center;
    box-sizing: border-box;
  }

  .qasida-info-capsule a {
    color: #ffeb3b; /* Couleur jaune pour les liens dans les capsules */
    text-decoration: none;
    font-weight: bold;
  }

  .qasida-info-capsule a:hover {
    text-decoration: underline;
  }

  .section-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
  }

  @media (max-width: 768px) {
    .qasida-info-section {
      flex-direction: column;
    }
  }

  /* SECTION COMMENTS */
  .comment-add-section,
.reply-form-section {
  border: 2px solid #ddd; /* Bordure grise pour les formulaires */
  padding: 20px;
  border-radius: 15px;
  background-color: #f9f9f9; /* Fond légèrement grisé */
  margin-bottom: 20px;
}

.comments-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-capsule {
  padding: 15px;
  border-radius: 15px;
  background-color: #e9ecef; /* Fond gris clair pour chaque commentaire */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.replies-section {
  margin-top: 15px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reply-capsule {
  padding: 10px;
  border-radius: 10px;
  background-color: #f1f1f1; /* Fond encore plus clair pour les réponses */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.form-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .comment-capsule, .reply-capsule {
    flex-direction: column;
  }
}

/* ------- ------- ------- ------- -------
Disposition G-D page de recherche
------- ------- ------- ------- ------- */

/* body {
    margin: 0;
    font-family: sans-serif;
} */

.subcontainer {
    display: flex;
    height: 100vh;
    overflow-y: auto;
}

.left {
    flex: 2;
    padding: 20px;
    position: sticky;
    top: 0;
    height: fit-content;
    background: #f8f8f8;
    border-right: 1px solid #ddd;
}

.right {
    flex: 6;
    padding: 20px;
    overflow-y: auto;
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-section label {
    margin-bottom: 5px;
}

.form-section select {
    padding: 5px;
}