.no-caret { 
	user-select: none; /* Empêche la sélection de texte */ 
	caret-color: transparent; /* Masque le caret */ 
	}

    
.caret {
  caret-color: #333; /* Couleur du curseur */
  user-select: text; /* Autorise la sélection */
}

#logoSpringit { 
position: absolute; 
}
:root { 
	--dore: #EEB54F; /* Définir la couleur dorée */ 
	--bleu: #1D71B8;
	--bordeaux: #BE1621;
}

body {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.resize-handle {
  position: relative;
  top: 0;
  bottom: 0;
  right: 0; /* bcr */
  left: 0;
  width: 7px;
  background-color: #d1d5db;
  cursor: ew-resize;
  /*touch-action: none; /* Désactive le comportement par défaut du navigateur pour les gestes tactiles */
}

@media (pointer: coarse) {
  .resize-handle {
    width: 20px; /* Augmente la zone de redimensionnement pour les appareils tactiles */
  }
}

input {
	border: 2px solid #000; /* Bordure noire de 2 pixels */
    padding: 10px; /* Espacement intérieur de 10 pixels */
    font-size: 16px; /* Taille de police de 16 pixels */
    border-radius: 5px; /* Coins arrondis de 5 pixels */
    /*background-color: #f0f0f0;  Couleur de fond gris clair */
	caret-color: black;
}
 .password-container {
      position: relative;
      width: 100%;
	  caret-color: black;
    }
    .password-container input {
      width: 100%;
      padding-right: 40px;
    }
    .password-container .toggle-password {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
    }
	

/*  CSS pour creer un utilisateur*/
/* Pour faire un tableau */
        .uflex-row {
            display: flex;
         /*   border-bottom: 1px solid black;*/
			margin-bottom: 15px;
        }
     <!--    .flex-row:last-child {
            border-bottom: none;
        } -->
        .uflex-cell {
            width: 300px;
			flex: 0;
            padding: 5px;
            <!-- border-right: 1px solid black; -->
        }
       <!--  .flex-cell:last-child {
            border-right: none;
        } -->
/* FIN Pour faire un tableau */		
        
		.ubox {
            
			width: 450px;
            /*height: 450px;*/
           <!--  display: flex-row; -->
			align-items: flex-start;
            color: var(--bleu);
           /* font-size: 20px;*/
            border: 2px solid var(--bordeaux);
			border-radius: 5px;
			padding: 10px;
			background-Color : white;
        }
		
		.ulabel {
		padding: 2px;
		}
		
        
.uInput {
  height:20px;
  padding:10px;
  margin:5px 0;
  /*box-sizing: border-box;*/
  border: 2px solid var(--bordeaux);
  border-radius: 4px;
  font-size: 16px;
  margin-left: 1rem;
  caret-color: var(--bordeaux);
  color: black; /* Définit la couleur du texte en noir */
}

.uInput:focus {
  border-color: var(--dore);;
  outline: none;
}


		
.ucheckbox { 
	width: 20px; 
	height: 20px; 
	cursor: pointer; 
}
/*  CSS pour creer un utilisateur*/




	.container4 {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            /*min-height: 80vh;*/
			
        }

        .columns {
            display: flex;
            gap: 20px;
            width: 100%;
			align-items: flex-start; 
        }

        .column1 {
            flex: 1;
            padding: 20px;
            background-color: var(--bleu);
            border-radius: 8px;
			border: 0.5px solid var(--bleu);
			min-height: 510px;
            overflow-y: auto;
        }
		
		.column-titleBlancSurBleu {
            margin: 10px; 
			font-size: 20px;
			margin-bottom: 20px;
			font-weight: bold;
            border-bottom: 2px solid var(--dore);
            padding-bottom: 5px;
            display: inline-block;
			color: rgb(255, 255, 255);
        }

		.column-titleBlancSurDoré {
            margin: 10px; 
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 20px;
            border-bottom: 2px solid var(--bordeaux);
            padding-bottom: 5px;
            display: inline-block;
			color: rgb(255, 255, 255);
        }

		.column2 {
            flex: 1;
            padding: 20px;
            background-color: var(--dore);
            border-radius: 8px;
			border: 0.5px solid var(--dore);
			min-height: 510px;
            overflow-y: auto;
        }
		
		.info-zone {
            /*gap: 20px;*/
			width: 100%;
            /*padding: 20px;*/
            background-color: var(--bleu);
            border-radius: 8px;
            color: white;
            /*min-height: 50px;*/
        }

        @media (max-width: 768px) {
            .columns {
                flex-direction: column;
            }
        }
		
		.box1 {
			background-color: white;
			color: var(--bleu);
        }
		
		.aBox2 {
			font-weight: bold;
			color: var(--bleu); /*white;*/
			text-decoration: none; /* Supprime le soulignement des liens */
			padding: 5px;
			display: inline-block; /* Affiche les liens en ligne avec un bloc */
			/*margin-bottom: 10px;*/
		}

		.aBox2:hover {
			/*text-decoration: underline; *//* Ajoute un soulignement lors du survol */
			color : var(--bordeaux);
		}

		.box2 {
			background-color: white;/*var(--bleu);*/
			font-weight: bold;
			color: var(--bleu); 
			/*color : white;*/
			border: 0.5px solid var(--bordeaux);
        }
		
	


.boutonBordeaux {
			background-color: var(--bordeaux); /* Couleur de fond */
			color: white; /* Couleur du texte */
			font-weight: bold;
			border: none; /* Supprime la bordure par défaut */
			border-radius: 10px; /* Coins arrondis */
			padding: 10px 20px; /* Espacement interne */
			cursor: pointer; /* Change le curseur au survol */
			font-size: 16px; /* Taille de la police */
			padding: 5px;
			min-width: 100px; /* Largeur minimale */
		}

		.boutonBordeaux:hover {
			background-color: darkred; /* Change la couleur de fond au survol */
		}
.divListe {
    background-color: dore;/*transparent; /* Couleur de fond initiale */
}

.divListe:hover {
    background-color: #d1d1d1; /* Couleur de fond lors du survol */
}

.divListe.active {
    background-color: var(--dore); /* Couleur de fond active */
}



.fondBlanc{
	background-image: url('fondBlanc.jpg'); 
	background-repeat: repeat; 
	color: black; 
}	

.fondBleu{
	background-image: url('fondBleu.jpg'); 
	background-repeat: repeat; 
	color: white; 
}	

.fondVert{
	background-image: url('fondVert.jpg'); 
	background-repeat: repeat; 
	color: white; 
}	


	   .tab-btn {
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 0.25rem;
            background-color: #d0d0d0;
            transition: background-color 0.3s;
        }

        .tab-btn:hover {
            background-color: #e0e0e0;
        }

        .tab-btn.active {
            background-color: #EEB54F;
        }
	
	.tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }


    .resize-handle:hover {
      background-color: #9ca3af;
    }
	
	.cours-list-container {
    	height: calc(100vh - 195px);
		margin-top: 0px; /* Ajoutez une marge supérieure pour compenser la hauteur de l'en-tête */	
		padding:20px; /* Permet d'avoir la liste sans coupure de mot en bas*/
		overflow-y: auto;
	}
	
	.questions-list-container {
    	/*height: calc(100vh - 195px);*/
		margin-top: 0px; /* Ajoutez une marge supérieure pour compenser la hauteur de l'en-tête */	
		padding:20px; /* Permet d'avoir la liste sans coupure de mot en bas*/
		overflow-y: auto;
	}

	.question-container {/* dans ejs */
		display: flex;
		/*height : calc(100vh - 195px);*/
		overflow-y :scroll;
		/*margin-top : 50px;
		margin-left: 50px; */
}


	.custom-checkbox { /*dans ejs*/
    width: 24px !important; /* Augmente la taille de 100% */
    height: 24px !important;
    margin-right: 20px !important; /* Ajoute 20px d'espacement à droite */
    vertical-align: middle;
	cursor: pointer !important; /* Ajoute le curseur en forme de doigt */
  }
	
	.grey-div{
	background-Color:#f0f0f0; 
	border-Radius:20px; 
	padding:20px;
	}
	
	.springit-banner{
	background-Color:#3C3C3B; 
	/*border-Radius:20px; 
	padding:20px;*/
	
	}
	
	 .scroll-container {
      display: flex;
      align-items: center;
    }
	  .scroll-bar {
      width: 20px;
      height: 90%; 
      position: relative;
      background: white;
      border: 2px solid #888;
      border-radius: 4px;
      cursor: pointer;
      box-sizing: border-box;
    }

    .scroll-bar:hover {
      border-color: #555;
    }

    .scroll-cursor {
      width: 16px;
      height: 20px;
      background: #888;
      position: relative;
      left: 0;
      top: 0;
      border-radius: 2px;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .scroll-cursor:hover {
      background: #555;
    }
	
	.listeQCMs { 
		background-color: #EEB54F; /*doré*/ /*60A5FA; */
		/*color: black; */
		color: white; 
		width: 180px; /* Largeur de 80 pixels */ 
	}
	
	.swal2-title { 
		color: white;
		}
	.swal2-content { 
		color: white;
		}

/* Fixer l'en-tête en haut de la page */ 
headerSite { 
            position: fixed; 
            top: 0; 
            width: 100%; 
            /* background-color: #f0f0f0;  */
            z-index: 1; /* Assurez-vous que l'en-tête reste au-dessus du contenu */     
        }


.sidebar {
	width : 200px;
	background-color : #f5f5f5;
	overflow-y : auto;
}

footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #f0f0f0;
            z-index: 1; /* Assurez-vous que le pied de page reste au-dessus du contenu */
            text-align: center;
            padding: 10px 0;
        }

.content-Container
			width: 100%;
            height: 400px;
            border: 1px solid #000;
            overflow-y: scroll;
        }

.pdf-container {
            
			width: 100%;
            height: 400px;
            border: 1px solid #000;
            overflow-y: scroll;
        }
	
	#status { 
		position: relative; 
		background-color: lightgrey; 
		text-align: center; 
	}
	
	.button-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.first-group, .second-group, .third-group{
    display: flex;
    align-items: center;
}
.first-group {
    justify-content: flex-start;
    width: 25%;
	
}
.second-group {
    justify-content: flex-start;
    width: 250px;
	gap: 30px;
}

.third-group {
    justify-content: flex-start;
    width: 50%;
}

.image-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}
.image-button img {
    width: 20px;
    height: 20px;
}

.image-fullscreen img {
    width: 20px;
    height: 20px;
}


@media print {
    body {
        display: none;
    }
}

body {
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}
	
	
	/* 
	.button-group { 
		display: flex; 
		gap: 50px; 
	}
	
	.first-group { 
		margin-left: 275%;  
	} 
	
	.second-group { 
		margin-left: 40%;  
	} 
	
	.third-group { 
		margin-left: 51%;  
	}/*
	 
	.container {
  display: flex;
  flex-direction: column;
}

/* Pour faire un tableau */
 .flex-container {
            display: flex;
            flex-direction: column;
            width: 500px;
            border: 1px solid black;
        }
        .flex-row {
            display: flex;
            border-bottom: 1px solid black;
        }
     <!--    .flex-row:last-child {
            border-bottom: none;
        } -->
        .flex-cell {
            width: 100px;
			flex: 1;
            padding: 10px;
            border-right: 1px solid black;
        }
       <!--  .flex-cell:last-child {
            border-right: none;
        } -->
/* FIN Pour faire un tableau */		
ul{ 
	list-style-type: disc;
}

ol { 
	list-style-type: decimal; 
}

ol[type="i"] { 
	list-style-type: lower-roman; 
}

ol[type="i"] li::marker { 
	color: red; /* Définit la couleur des lettres en rouge */ 
}

ol[type="ab"] { 
   list-style-type: lower-alpha;  
 } 

ol[type="ab"] li::marker { 
	color: red; /* Définit la couleur des lettres en rouge */ 
}

ol[type="A"] {
  list-style-type: upper-alpha; /* Utilise des lettres majuscules */
 }
 
 ol[type="A"] li::marker {
  color: red; /* Définit la couleur des lettres en rouge */
}

  .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 35%;
            top: 25%;
            width: 600px;
            /*transform: translate(-50%, -50%);*/
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
            padding-top: 0px;
			padding: 0;
			
        }
        .modal-content {
            background-color: #fefefe;
            /*margin: 15% auto;*/
			margin: 0 auto;
            padding: 20px;
            border: 1px solid #888;
            position: relative;
			width: 100%; /* Ajoutez cette ligne pour définir la largeur à 100% de la modale */
			box-sizing: border-box; /* Inclut le padding et les bordures dans la largeur */
        }
        .close {
            color: white;/*#aaaa;*/
            float: right;
            font-size: 28px;
            font-weight: bold;
			top: -10;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        .title-bar {
            cursor: move;
            background-color: var(--bleu);
            color: white;
            padding: 10px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
			box-sizing: border-box; /* Inclut le padding dans la largeur */
        }

       

  .btn-raz{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;          /* espace autour du texte */
    font-size: 0.50rem;        /* petit texte — ajustez ici */
    font-weight: 600;
    line-height: 1;
    border-radius: 6px;
    border: 1px solid #cfcfcf;
    background: #f5f5f5;
    color: #111;
    cursor: pointer;
    user-select: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }

  .btn-raz:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  }

  .btn-raz:active {
    transform: translateY(0);
    box-shadow: none;
  }

  /* Variante encore plus petite */
  .btn-raz.tiny {
    font-size: 0.55rem;
    padding: 2px 6px;
    border-radius: 4px;
  }