input, textarea
 { 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px; 
	line-height: 1;
	vertical-align: middle;
	border-radius: 5px;
}

input.checkbox
{
	height: 25px;
	width: 25px;
	font-size:0.75vw; 
	vertical-align: middle;
}

textarea:focus, input:focus, select:focus
{
	background: #ACE3FF;
}

body
 { 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px; 
	line-height: 1;
	width: 100%;
}

select
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px; 
	line-height: 1;
	vertical-align: middle;
}

input.validation_error 
{
	background: #FF0000;
}

label 
{
  display:inline-block;
}

.div_60
{
	width: 50%;
	align: center;
	display: block;
	margin: auto;
}

#banner_top {
	position: fixed;	
	width: 100%;
	top: 0px;
	left: 0px;
	right: 0px;	
	margin: 0px 0px;
	background-color: #000000;
	width: 100%;
	min-height: 50px;	
	
	
}

#menu_top {
	position: fixed;
	top: 35px;
	left: 0px;
	right: 0px;
	width: 100%;
	margin: 0px 0px;
	background-color: #FAFAFA;
	width: 100%;
	min-height: 80px;	

	
}

.lbl_top
{
	color: #0404B4;
	font-size: 0.6vw;
}

.tab1 {
	width: 100%;
	background-color: #DCDCDC;
	vertical-align: middle;	
	height: 25px;
}
.tab1:hover , .tab2:hover{
	background-color: #FFE9A0;
}
.tab2 {
	width: 100%;
	vertical-align: middle;	
	height: 25px;
	background-color: #C0C0C0;
}

/*.tab_blue_1 {
	width: 100%;
	background-color: #CED8F6;
	vertical-align: middle;	
	height: 25px;
}*/
.tab_blue_1:hover , .tab_blue_2:hover, .tab_yellow:hover, .tab_rose_1:hover , .tab_rose_2:hover, .tab_green_1:hover , .tab_green_2:hover
{
	background-color: #FFE9A0;
}
/*.tab_blue_2 
{
	width: 100%;
	vertical-align: middle;	
	height: 25px;
	background-color: #FAFAFA;
}*/
.tab_yellow 
{
	width: 100%;
	vertical-align: middle;	
	height: 25px;
	background-color: #F3F781;
}
.tab_rose_1 
{
	width: 100%;
	background-color: #F6D9FA;
	vertical-align: middle;	
	height: 25px;
}
.tab_rose_2 
{
	width: 100%;
	vertical-align: middle;	
	height: 25px;
	background-color: #E8C8F5;
}
.tab_green_1 
{
	width: 100%;
	background-color: #D4FFE5;
	vertical-align: middle;	
	height: 25px;
}
.tab_green_2 
{
	width: 100%;
	vertical-align: middle;	
	height: 25px;
	background-color: #A7FDC7;
}




/* DATE PICKER */
.ui-datepicker-week-end >.ui-state-default{
    color: red ;
}

/* MAIN*/

.img_statut{
	cursor: pointer;
	height: 20px;
	width: 'auto';
}

.menu_main{
	float: left;
	width: 10%;
	top: 50px;
	position: relative;
}


/* MAIN CONTEXT MENU */

.cont_row_1{
	width: 100%;
	vertical-align: middle;	
	height: 25px;
}
.cont_row_1:hover{
	background-color: #81BEF7;
}

/* HEADER MENU */

.menu_row{
	width: 100%;
	vertical-align: middle;	
	height: 25px;
}
/*.menu_row:hover{
	background-color: #1eabed; 
}*/


/* MAIN  PAGE */


.img_div_gen{
	cursor: pointer;
	height: 25px;
	width: 'auto';
	transition: transform .1s;
}

.img_div_gen:hover{
	-ms-transform: scale(1.5); /* IE 9 */
	-webkit-transform: scale(1.5); /* Safari 3-8 */
	transform: scale(1.5);
}



/* PRESENCES */

.lbl_menu_2{
	font-size: 0.6vw;
	cursor: pointer;
	text-align: left;
	transition: transform .1s;
}

.lbl_menu_2:hover{
	font-weight: bold;
	-ms-transform: scale(1.1); /* IE 9 */
	-webkit-transform: scale(1.1); /* Safari 3-8 */
	transform: scale(1.1);
}

.hr_gris{
	border-top: 1px solid #D8D8D8;
}

/* ----------------------- DASHBOARD ----------------------- */

/*.div_2_increase{
	font-size: 0.7vw;
	cursor: pointer;
	text-align: left;
	transition: transform .1s;
}

.div_2_increase:hover{
	transform-origin: left 50%;
	-ms-transform: scale(1.5); /* IE 9 */
/*	-webkit-transform: scale(1.5); /* Safari 3-8 */
/*	transform: scale(1.5);
	transition: transform 0.3s ease;
}*/

.div_2_increase {
    font-size: 0.7vw;
    cursor: pointer;
    text-align: left;
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.div_2_increase:hover {
    transform: scale(1.8);
}

#info_ps {
    width: 15%;
    float: left;
    z-index: 100;
}

#info_ps table {
    width: 100%;
    margin-bottom: 10px;
}

#LblBulletin {
    color: #FFFFFF;
    font-size: 0.8vw;
    font-weight: bold;
    display: block;
    padding: 5px;
    border-radius: 10px;
    background: #1eabed;
    text-align: center;
}

#html_bul {
    width: 100%;
    margin: 0 auto;
    z-index: 100;
    position: relative;
}


/* ----------------------- CALENDRIER ----------------------- */
.cal_AM
{
	float: left;
	width:28px;
	height:12px;
	border:0px solid #A9A9A9;
	background:#F2F2F2;
	color:#000000;
	border-radius: 5px;
	vertical-align: middle;			
	display: block;	
	line-height: 12px;
	text-align: right;
	padding-right: 3px;
	opacity: 1.0;
	cursor: default;
}
.big_cal
{
	float: left;
	width:28px;
	height:24px;
	border:1px solid #A9A9A9;
	background:#F2F2F2;
	color:#000000;
	border-radius: 5px;
	vertical-align: middle;			
	display: block;	
	line-height: 24px;
	text-align: right;
	padding-right: 3px;
	opacity: 1.0;
	cursor: default;
}
.big_cal_day
{
	float: left;
	width:28px;
	height:24px;
	border:1px solid #A9A9A9;
	background:#CEECF5;
	color:#000000;
	border-radius: 5px;
	vertical-align: middle;			
	display: block;	
	line-height: 24px;
	text-align: center;
	padding-right: 3px;
	opacity: 1.0;
	cursor: default;
}
.big_cal_we_day
{
	float: left;
	width:28px;
	height:24px;
	border:1px solid #000000;
	background:#A9BCF5;
	color:#000000;
	border-radius: 5px;
	vertical-align: middle;			
	display: block;	
	line-height: 24px;
	text-align: center;
	padding-right: 3px;
	opacity: 1.0;
	cursor: default;
}
.cal_null
{
	float: left;
	width:28px;
	height:12px;
	border:1px solid #A9A9A9;
	background:#F2F2F2;
	color:#000000;
	border-radius: 5px;
	vertical-align: middle;			
	display: block;	
	line-height: 12px;
	text-align: right;
	padding-right: 3px;
	opacity: 0.0;
	cursor: default;
}
.cal_we_AM
{
	float: left;
	width:28px;
	height:12px;
	border:0px solid #000000;
	background:#D3D3D3;
	color:#000000;
	border-radius: 5px;
	vertical-align: middle;			
	display: block;	
	line-height: 12px;
	text-align: right;
	padding-right: 3px;
	opacity: 0.8;
	cursor: default;
}	
.big_cal_we
{
	float: left;
	width:28px;
	height:24px;
	border:1px solid #000000;
	background:#D3D3D3;
	color:#000000;
	border-radius: 5px;
	vertical-align: middle;			
	display: block;	
	line-height: 24px;
	text-align: right;
	padding-right: 3px;
	opacity: 1.0;
	cursor: default;
}

/* ---------------------------- AlertBox 2 ------------------------------- */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .YesButton
{
 /*   font-size:15px;*/
    color: #000000;
 /*   width: 150px;	*/
    background: #C4FF71; 
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .CancelButton
{
 /*   font-size:15px;*/
    color: #FFFFFF;
 /*   width: 150px;	*/
    background: #FE93A3;
}

.TitleAlertRed .ui-dialog-titlebar 
{
	background:red;
	border-color: red;
	color: #FFFFFF;
}
/* ---------------------------- BARCODE ------------------------------- */
.codebar
{
	barWidth: 1;
	barHeight: 50;
	moduleSize: 5;
	showHRI: true;
	addQuietZone: true;
	marginHRI: 5;
	bgColor: "#FFFFFF";
	color: "#000000";
	fontSize: 10;
	output: "css";
	posX: 0;
	posY: 0;
}

/* ---------------------------- CHECKBOX SLIDER ------------------------------- */

	
.switch 
{
  position: relative;
  display: inline-block;
  width: 60px;
  height: 24px;
}

.switch input 
{ 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider 
{
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e72b34;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before 
{
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 6px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider 
{
  background-color: #3ADF00;
}

input:focus + .slider 
{
  box-shadow: 0 0 1px #3ADF00;
}

input:checked + .slider:before 
{
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
}

/* Rounded sliders */
.slider.round 
{
  border-radius: 34px;
}

.slider.round:before 
{
  border-radius: 50%;
}

/* ---------------------------- CHECKBOX TINY SLIDER ------------------------------- */

.switch_tiny 
{
	position: relative;
	display: inline-block;
	width: 60px;
	height: 24px;
}

.switch_tiny input 
{ 
	opacity: 0;
	width: 0;
	height: 0;
}

.slider_tiny 
{
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #e72b34;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider_tiny:before 
{
	position: absolute;
	content: "";
	height: 17px;
	width: 17px;
	left: 6px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider_tiny 
{
	background-color: #3ADF00;
}

input:focus + .slider_tiny 
{
	box-shadow: 0 0 1px #3ADF00;
}

input:checked + .slider_tiny:before 
{
	-webkit-transform: translateX(30px);
	-ms-transform: translateX(30px);
	transform: translateX(30px);
}

/* Rounded sliders */
.slider_tiny.round_tiny 
{
	border-radius: 34px;
}

.slider_tiny.round_tiny:before 
{
	border-radius: 50%;
}

/* ---------------------------- CHECKBOX TINY SLIDER BLUE ------------------------------- */

/* ---------------------------- CHECKBOX TINY SLIDER BLUE (OFF vert / ON bleu) ------------------------------- */

.switch_tiny_blue 
{
	position: relative;
	display: inline-block;
	width: 60px;
	height: 24px;
}

.switch_tiny_blue input 
{ 
	opacity: 0;
	width: 0;
	height: 0;
}

.slider_tiny_blue 
{
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #3ADF00; /* OFF = vert */
	-webkit-transition: .4s;
	transition: .4s;
}

.slider_tiny_blue:before 
{
	position: absolute;
	content: "";
	height: 17px;
	width: 17px;
	left: 6px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

.switch_tiny_blue input:checked + .slider_tiny_blue 
{
	background-color: #1eabed; /* ON = bleu */
}

.switch_tiny_blue input:focus + .slider_tiny_blue 
{
	box-shadow: 0 0 3px #1eabed;
}

.switch_tiny_blue input:checked + .slider_tiny_blue:before 
{
	-webkit-transform: translateX(30px);
	-ms-transform: translateX(30px);
	transform: translateX(30px);
}

/* Rounded sliders */
.slider_tiny_blue.round_tiny 
{
	border-radius: 34px;
}

.slider_tiny_blue.round_tiny:before 
{
	border-radius: 50%;
}

/*    BLOCAGE      */
.disabled 
{
	pointer-events: none;
	opacity: 0.9; /* visuel optionnel */
}

.disabled_8 
{
	pointer-events: none;
	opacity: 0.8; /* visuel optionnel */
}

.disabled_06 
{
	pointer-events: none;
	opacity: 0.6; /* visuel optionnel */
}
	
/* bloque tous les clics à l’intérieur, sans casser l’affichage */
.no-interact 
{
	pointer-events: none;   /* plus de clics/touch */
	opacity: .6;            /* optionnel: visuel “désactivé” */
}

/* --- Styles compacts, adaptables dropzone --- */
.uploader 
{ 
	max-width: 560px; 
	margin: 16px 0; 
	font-family: system-ui, sans-serif; 
}

.drop-zone 
{
	border: 2px dashed #b8c6e0; 
	border-radius: 14px; 
	padding: 28px; 
	text-align: center;
	transition: border-color .2s, background-color .2s;
}
	
.drop-zone.dragover 
{ 
	border-color: #4a77ff; 
	background: #f6f8ff; 
}
	
.dz-content 
{ 
	display: grid; 
	gap: 6px; 
	justify-items: center; 

}
.dz-icon 
{ 
	font-size: 28px; 
}

.dz-title 
{ 
	font-weight: 600; 
}

.dz-sub 
{ 
	opacity: .9; 
}

.dz-hint 
{ 
	font-size: 12px; 
	color:#63708a; 
}

.btn 
{
	padding: 8px 14px; 
	border-radius: 10px; 
	border: 1px solid #4a77ff; 
	background: #4a77ff; 
	color:#fff;
	font-weight: 600; 
	cursor: pointer;
}

.btn:hover 
{ 
	filter: brightness(1.05); 
}

.btn-ghost 
{ 
	background: #fff; 
	color:#1f2a44; 
	border-color:#cfd7ea; 
}

.btn-ghost:hover 
{ 
	background:#f5f7fc; 
}

.preview 
{ 
	margin-top: 14px; 
	display: grid; 
	gap: 10px; 
}

.pv-info 
{ 
	font-size: 14px; 
}

.pv-image-wrap 
{ 
	display: grid; 
	place-items: center; 
}

.pv-image-wrap img 
{ 
	max-width: 100%; 
	max-height: 220px; 
	border-radius: 10px; 
	border:1px solid #e6ebf5; 
}

.pv-base64 
{
	width: 100%; r
	esize: vertical; 
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px; 
	padding:10px; 
	border-radius:10px;
	border:1px solid #e2e8f0; 
	background:#fafbff;
}

.actions 
{ 
	display: flex; 
	gap: 10px; 
	justify-content: flex-end; 
}
/* Look des pages */
	.body-class
	{
		margin: 0;
		width: 100%;
		height: 100vh;
		background-image: url('../images/Wave_fond.jpg');
		background-position: center top;
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}
	
/* FIELDSET */

	.fieldset_tp
	{
		width: 98%;
		background-color: #FFFFFF;
		border-radius: 15px;
		height: 100%;
		min-height: 100%;

		/* 🎨 Bordure bleu-gris harmonisée */
		border: 2px solid #7BAECF;

		/* ✨ Glow doux pour rappeler le gradient */
		box-shadow:
			0 0 10px #A3C8E4,
			0 0 20px #D9ECFF,
			inset 0 0 10px rgba(123,174,207,0.35);
	}

	.legend_tp 
	{
		padding: 4px 14px;
		border-radius: 11px;

		/* ⭐ Fond plus visible */
		background: rgba(230,243,255,0.5); /* AU LIEU DE 0.20 */

		border: 1px solid rgba(123,174,207,0.55);

		color: #000000;		/*CCD8E3;*/
		font-weight: bold;

		text-shadow:
			0 0 3px rgba(0,0,0,0.85),
			0 0 8px rgba(250,116,0,0.75);

		box-shadow:
			0 2px 6px rgba(0,0,0,0.25),
			inset 0 1px 2px rgba(255,255,255,0.25);
	}
	
.legend_ts 
{
    padding: 4px 14px;
    border-radius: 11px;

    /* Fond doux et lisible */
    background: rgba(230,243,255,0.5);
    border: 1px solid rgba(123,174,207,0.55);

    color: #0A27A4;
    font-size: 1vw;
    font-weight: bold;

    /* ⭐ Ombres éclaircies */
    text-shadow:
        0 0 2px rgba(0,0,0,0.35),      /* légère profondeur */
        0 0 4px rgba(250,116,0,0.35);  /* glow orange bcp plus discret */

    box-shadow:
        0 1px 3px rgba(0,0,0,0.15),           /* ombre externe plus soft */
        inset 0 1px 1px rgba(255,255,255,0.12);/* léger relief interne */
}