/*Les tinytext au repos*/
.tox-edit-area, .tox-edit-area__iframe{ border:1px solid black!important;  }

/* recherche KNW */
#detailsSearch { display:flex; align-items:left ; gap:0.5rem;/* espace entre les éléments */ margin-top:0.3%; width:40%;}
#knwsearchresult{ margin:0.5%; }
/* Les boutons */
#support_bt{ position:relative; display:block; width:100%; text-align:left;  }
#contain_lnk{ position:relative; display:inline-block; margin:1%; padding: 0%; width: 100%;  }
.contain_lnkcopy, .contain_lnknocopy{ position:relative; display:inline-table; margin:1%; padding:1%; width:25%; border:1px solid #cfcfcf; border-spacing:24px; vertical-align:text-top; }

.knopf{ position:relative; display:grid; place-content:center; width:35%; height:12vh; margin:auto; padding:0%; border-radius: 20%; font-size:15px; font-weight:bold; font-stretch: extra-condensed; text-decoration:none; }
.knopf:hover{ cursor: pointer; }

.bt{ position:relative; display:grid; place-content:center; width:98%; aspect-ratio: 1 / 1; margin:0%; padding:0%; border-radius: 20%; font-size:15px; font-weight:bold; font-stretch: extra-condensed; text-decoration:none; }
.bt:hover{ cursor: pointer; box-shadow: 3px 4px 5px gray; }
.bt:after { content: ""; position: absolute; width: 32px; height: 32px; top: 99%; right: 0px; background: url("/image/boutons/hand_32_30.png"); border-radius: 100%; }
.bt:hover:after, .copy:hover:after { cursor: pointer; box-shadow: 3px 4px 5px gray; }

.btmarge{ display:block; height:50px; }

.copy{ position:relative; display:grid; place-content:center; width:98%; aspect-ratio: 1/1; margin:0%; padding:0%; border-radius: 20%; font-size:15px; font-weight:bold; font-stretch: extra-condensed; text-decoration:none; }
.copy:hover{ cursor: pointer; box-shadow: 3px 4px 5px gray; }
.copy:after { content: ""; position: absolute; width: 32px; height: 32px; top: 100%; right: 0px; background: url("/image/boutons/hand_32_30.png"); border-radius: 100%; }
.copy img{ width: 48%; transform: translate(0%, 35%);  }

.copyG{ position:relative; display:grid; place-content:center; width:100%; aspect-ratio: 5/1; margin:0%; padding:1%; border-radius: 20%; font-size:15px; font-weight:bold; font-stretch: extra-condensed; text-decoration:none; }
.copyG:hover{ cursor: pointer; box-shadow: 3px 4px 5px gray; } 
.copyG:after { content: ""; position: absolute; width: 32px; height: 32px; top: 53%; right:5%; background: url("/image/boutons/hand_32_30.png"); border-radius: 100%; }
.copyG img{ width: 100%; transform: translate(0%, 35%);  }


#contain_ferme{ position:absolute; left:90%; margin-top:3%; padding:0%; z-index:10;  } 
#contain_ferme #ferme{ } 
#contain_ferme #ferme:hover{ cursor:pointer; } 

.btbleu { background:#ddf4ff; border:3px solid #4ECAFF;  }
.btjaune{ background:#fef1d4; border:3px solid #F8BA00; }
.btvert { background:#e0f7d9; border:3px solid #61D836; }
.btgris { background:#e8e8e8; border:3px solid #929292; }
.btrose { background:#ffd2ef; border:3px solid #FF00AC; }


.contain_eyes{ position:relative; }
.eyes{ position:absolute; left:90%; top:-10%; z-index:1001; } 
.eyes {
	background-image: url(../image/img/icons/view_3.png);
	background-repeat: no-repeat;
	width:32px; height:32px;
}
.eyes:hover{ cursor:pointer; }

.seeInl{ display:inline-block; }

.see{ display:block; }
.nosee{ display:none; }


.disabled{ cursor: default; pointer-events: none; text-decoration: none; color: grey; opacity:0.3;   }

.vert{ background: green;}
.rouge{ background: red;}
.blanc{ background: white;}

.fvert{ color: green;}
.frouge{ color: red;}
.fblanc{ color: white;}

.flecheB::before {
    /* content: "\25B6"; */
}
.flecheB:hover{
    cursor: pointer;
	color:green;
}
.active { background-color: yellow; }
.menuactive{ background-color:#E8F8FF; }

.flecheD::before {
    /* content: "\25BC"; */
}
.flecheD:hover {
    cursor: pointer;
}

.triangleB::before { content: "\25B6"; }
.triangleB:hover{ cursor: pointer; color:green; }
.triangleD::before { content: "\25BC"; }
.triangleD:hover { cursor: pointer; }

.hr { display:block; width:60%; height: 1px; text-align: left; margin:auto; padding:0%; background-color: #ffa500; }
#totls{ position:absolute; top:0%; left:98%; font-size:48px; font-weight:bold; color:red; text-decoration:none; z-index:100; }
/* les input required */
.etoile{ display:inline-block; font-weight:bold; color:red; }
input:required {  box-shadow: 1px 1px 2px rgba(200, 0, 0, 0.85); }
input:required:focus { border: 1px solid red; outline: none; }
input:required:hover { opacity: 1; }

/* waiting */
#blinkCMT{ position:absolute; top:8%; width:100%; }
.messcursor{ align-items:center; width:50%; height:150px; background:black; color:white; text-align:center; margin:auto; padding:auto; } 
.blink { font-size:32px; animation: blink 1s infinite;	}
@keyframes blink { 
	  0% { opacity:0; }
	  50% { opacity:1; } 
	  100% { opacity:0; }
}

.spinner { width: 24px; height: 24px; border: 3px solid #ccc; border-top: 3px solid #333; border-radius: 50%; animation: spin 1s linear infinite;  margin-top: 8px;  }
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* ou toute autre hauteur appropriée */
}

.spinner-container .spinner { /* pour les themes dans POST */
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top: 4px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Fin waiting */

	
.center {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
}	

/* Video et Audio recorder */
#recorderAV, #recorderAVCMT{ position:relative; width: 100%; height: 80vh;	background: #312b2b; color: black;
	text-align: center; align-items: center; 
	margin: auto; padding: auto;
}		
.recorder{ width:3%; margin-left:1%; padding:0%; vertical-align:middle; }	
.recorder:hover{ cursor:pointer; }