/* style.css */
body, html {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
    justify-content: space-around;
    padding: 20px;
}

.form-panel, .xml-panel {
    border: 1px solid #ccc;
    padding: 20px;
    width: 40%;
}

.xml-panel{
    overflow-x: scroll;
    max-height: 450px;
}



h2 {
    color: #333;
}

label, input {
    display: block;
    margin-bottom: 10px;
    width: 90%;
}

input[type="number"], input[type="text"] {
    padding: 8px;
}

button {
    padding: 10px 15px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}

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

pre {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    padding: 10px;
}


.box-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    padding: 10px;
}

.course-box {
    display: flex;
    /*flex-direction: column;*/
    justify-content: space-around;
    width: 200px;
    height: 750px;
    margin: 10px;
    background-color: #add8e6; /* Light blue background */
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    position: relative; 
}

.course-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.course-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.course-info {
    font-size: 14px;
    color: #666;
}


select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.course-box select {
    display: block;
}



.container {
    display: flex;
    flex-direction: column; /* Organise les enfants de container en colonne */
}

.form-panel, .xml-panel {
    flex: 1; /* Donne une flexibilité égale, permettant aux deux panels de prendre la moitié de l'espace horizontal disponible */
    padding: 10px;
}

.course-visualization {
    width: 100%; /* Utilise toute la largeur disponible */
    padding: 10px;
}

@media (min-width: 768px) { /* Utiliser une media query pour les écrans plus larges */
    .top-row {
        display: flex;
        flex-direction: row; /* Organise les enfants de top-row en ligne */
    }
}



.top-row {
    display: flex;
    flex-direction: row; /* Organise les enfants de top-row en ligne */
    font-size: 0.9em; /* Réduire la taille de la police pour tout le contenu dans top-row */
}

.top-row input,
.top-row button {
    padding: 5px;
    margin: 2px;
}

.form-panel{
    flex: 1;
    padding: 10px;
    box-sizing: border-box; /* Assure que le padding et la bordure sont inclus dans la largeur */
}

.xml-panel {
    flex: 2;
    padding: 10px;
    box-sizing: border-box; /* Assure que le padding et la bordure sont inclus dans la largeur */
}



.course-visualization {
    font-size: 1.1em; /* Augmenter la taille de la police pour tout le contenu dans course-visualization */
    padding: 15px;
    width: 100%;
}

.course-visualization .box-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.course-visualization .course-box {
    flex: 1 1 400px; /* Chaque box prend au moins 300px de large et grandit si de l'espace est disponible */
    padding: 10px;
    border: 1px solid #ccc;
    margin: 5px;
    background-color: #f9f9f9;
}


.session-details-container {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante si l'espace horizontal est insuffisant */
    gap: 10px; /* Espacement entre les éléments */
    padding: 10px;
    margin-top: 10px;
}

.session-details {
    flex: 1 1 200px; /* Chaque détail de session peut grandir mais commence à 200px */
    display: flex;
    align-items: center; /* Alignement vertical des items */
    justify-content: space-between; /* Répartition de l'espace autour des éléments */
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f3f3f3;
    overflow: hidden; /* Empêche les débordements */
}


.course-box {
    flex: 1 2 400px; /* Chaque boîte prend au moins 300px de large et peut s'agrandir si de l'espace est disponible */
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    margin: 40px 40px; /* Augmente la marge verticale à 20px, garde la marge horizontale à 10px */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optionnel: ajoute une ombre pour un effet de profondeur */
}

.course-visualization .box-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Ce gap ajoute un espacement entre les éléments s'ils sont sur la même ligne ou colonne */
    justify-content: flex-start; /* Alignement des boîtes au début du conteneur */
}


select {
    max-width: 100px;
}


.session-details-container{
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Assure que tout est aligné au centre verticalement */
    gap: 5px; /* Réduit l'espace entre les éléments */

}

.session-details {
    padding: 5px;
    margin: 2px;
    align-items: flex-end;
    font-size: 0.5em; /* Réduit la taille de la police */
    box-sizing: border-box; /* Inclut padding et border dans la largeur calculée */
}

.session-details input[type="number"],
.session-details button {
    max-width: 300px;
    /*width: 5px;  Permet aux éléments de s'adapter à leur contenu */
    padding: 4px 6px; /* Réduit le padding pour économiser de l'espace */
    margin: 0 2px; /* Réduit les marges extérieures */
}

.session-details h4 {
    margin: 0;
    flex-grow: 0; /* Empêche le titre de prendre plus de place que nécessaire */
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
}




.course-box {
    display: flex;
    justify-content: space-between; /* Distribue l'espace entre les éléments enfants */
    /*align-items: flex-start;  Alignement vertical au début pour aligner les enfants en haut */
    flex-direction: column;
    padding: 10px;
    margin-bottom: 20px;
}

.left {
    flex: 1; /* Chaque côté prend la moitié de l'espace disponible */
    display: flex;
    gap: 50px;
    flex-direction: line; /* Les enfants sont organisés verticalement */
}
 .right {/* Chaque côté prend la moitié de l'espace disponible */
    display: flex;
    flex-grow: 1;
    flex-direction: column; /* Les enfants sont organisés verticalement */
}

.left {
    align-items: flex-start; /* Alignement des enfants du côté gauche à gauche */
    position: relative; 
}

select, button {
    margin: 5px 0; /* Marge pour les éléments de formulaire */
}

.session-details-container {
    width: 100%; /* Assure que le conteneur utilise toute la largeur disponible */
}



.session-details-container {
    position: relative; /* Nécessaire pour la position absolue du bouton */
}


.course-title {
    display: flex;
    flex: 2;
    align-items: flex-start; /* Alignement des enfants du côté droit à droite */
}

.contain-data {
    display: none;
}

.left button{
    display: flex;
    flex: 1;
    align-items: flex-end; /* Alignement des enfants du côté droit à droite */
}

.left select{
    flex: 1;
}



.resource-tab {
    display: flex;
    flex: 3;
    flex-direction: column;
    margin-top: 20px;
}

.resources {
    display: flex;
    justify-content: space-between;
}

.rooms, .teachers, .groups {
    flex: 1;
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.room, .teacher , .group{
    margin-bottom: 10px;
}

label {
    margin-right: 5px;
}

input[type="number"], input[type="text"] {
    margin-bottom: 10px;
}


.room, .teacher, .group {
    background-color: #ffffff; /* Fond blanc pour que chaque room et teacher se démarque */
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd; /* Une bordure subtile */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Ombre légère pour 'soulever' l'élément */
    border-radius: 5px; /* Bords arrondis pour une apparence plus douce */
}


.room, .teacher, .group {
    display: flex;
    flex: 3;
    flex-direction: line;
}
.room input[type="number"] {
    max-width: 50px;
}
.room p {
    border-right: 10px;
}
.teacher p {
    border-right: 10px;
}
 .group p {
    border-right: 10px;
}


#selectedKeywords {
    margin-top: 10px;
    padding: 5px;
}

.keyword {
    display: inline-block;
    background-color: #d9edf7;
    color: #31708f;
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
}

.keyword span {
    margin-left: 10px;
    cursor: pointer;
    font-weight: bold;
}

.keyword-bubble {
    display: inline-block;
    margin: 0 5px;
    padding: 5px 10px;
    background-color: #e0e0e0; /* Light gray background */
    border-radius: 10px; /* Rounded borders for the bubble look */
    font-size: 0.8em;
    color: #333; /* Dark text color for contrast */
}

div[name="teacherContainBubble"] {
    display: flex;
    align-items: center; /* Alignement vertical des enfants au centre */
    justify-content: flex-start; /* Alignement horizontal au début du conteneur */
    gap: 10px; /* Espace entre les éléments enfants */
}
  
.teacherContainBubble button{
    flex: 1;
    display: flex;
    font-size: 0.8em; 
    flex-direction: line
}

.keykey{
    font-size: 0.6em;
}

#buttonPlaceXML {
    display: flex;
    align-items: center; /* Alignement vertical des enfants au centre */
    justify-content: flex-start; /* Alignement horizontal au début du conteneur */
    gap: 10px; /* Espace entre les éléments enfants */
}

#horizonTemporalXML {
    display: flex;
    align-items: center; /* Alignement vertical des enfants au centre */
    justify-content: flex-start; /* Alignement horizontal au début du conteneur */
    gap: 5px; /* Réduit l'espace entre les éléments enfants */
}

#horizonTemporalXML label {
    margin-right: 0; /* Supprime la marge à droite du label */
}

#horizonTemporalXML input {
    margin-left: -20px; /* Supprime la marge à gauche de l'input */
}












.course-container {
    display: flex;
    flex-direction: column;
}

.course-header {
    display: flex;
    align-items: center; /* Centrer les éléments verticalement */
    gap: 10px; /* Espacement entre les éléments */
}

.flex-item {
    flex: 1; /* Chaque élément prend une part égale de l'espace disponible */
}

.remove-btn {
    flex: 0; /* Le bouton de suppression ne grandit pas */
    cursor: pointer; /* Style du curseur pour le bouton */
}

.teacher-bubble {
    display: flex;
    align-items: center; /* Alignement vertical au centre */
    margin-top: 10px; /* Espacement entre les lignes */
}

.flex-select {
    flex: 1; /* Permet au select de prendre l'espace disponible */
}

.keywords-container {
    display: flex;
    flex-wrap: wrap; /* Permet aux mots-clés de passer à la ligne suivante si nécessaire */
    margin-top: 10px; /* Espacement entre les lignes */
}