body{}
html{font-size:.93rem;}

/* Font Awesome 6 : les classes de taille relative (fa-2xs, fa-xs, fa-sm, fa-lg,
   fa-xl, fa-2xl) fixent volontairement un line-height minuscule (ex. 0.05em
   pour fa-lg), pensees pour une icone au milieu de texte courant, avec un
   vertical-align negatif pour la recentrer dans CETTE ligne de texte.
   Dans cette appli, ces classes servent surtout dans des boutons/liens ou
   l'icone est seule (ou accompagnee d'un texte souvent masque en responsive,
   via d-xl-inline-block etc.) : sans texte pour etablir une hauteur de ligne
   normale, tout le bouton s'ecrase a la hauteur (minuscule) de l'icone.
   Symptome observe : bouton "Aujourd'hui", "<", ">", "Ajouter une tache" du
   planning nettement plus bas que le bouton de choix de dates (qui contient
   du texte visible, donc pas affecte). Le selecteur type+classe (i.fa-lg...)
   a une specificite superieure a la regle .fa-lg de Font Awesome, ce qui la
   fait gagner meme si Font Awesome est charge apres ce fichier.
   `line-height:inherit` seul ne suffit pas : sur un line-height sans unite
   (ex. 1.5 sur .btn), l'heritage transmet le NOMBRE 1.5, pas le pixel calcule,
   et ce nombre est reapplique a la taille de police propre a l'icone (plus
   grande, a cause du font-size:1.25em de fa-lg) -> un bouton icone seule finit
   quand meme plus haut qu'un bouton texte. On compense chaque classe par
   l'inverse exact de son propre ratio de font-size (1.5 / ratio), en `em`
   (donc relatif a la taille de l'icone elle-meme) : le resultat en pixels est
   alors identique, que le contenu du bouton soit une icone ou du texte. */
i.fa-2xs { line-height: 2.4em; vertical-align: middle; }      /* 1.5 / .625 */
i.fa-xs  { line-height: 2em; vertical-align: middle; }        /* 1.5 / .75  */
i.fa-sm  { line-height: 1.714286em; vertical-align: middle; } /* 1.5 / .875 */
i.fa-lg  { line-height: 1.2em; vertical-align: middle; }      /* 1.5 / 1.25 */
i.fa-xl  { line-height: 1em; vertical-align: middle; }        /* 1.5 / 1.5  */
i.fa-2xl { line-height: .75em; vertical-align: middle; }      /* 1.5 / 2    */
img{
	border:0;
}
td{
	vertical-align:top;
	white-space:nowrap;
}

.datepicker .datepicker-days table {
	border-collapse: separate;
}

.datepicker .datepicker-days .datepicker-switch {
	background-color:#F6F6F6;
	border: 1px solid #C5C5C5 !important;
}
.datepicker .datepicker-days .prev {
	background-color:#F6F6F6;
	border: 1px solid #C5C5C5 !important;
}
.datepicker .datepicker-days .next {
	background-color:#F6F6F6;
	border: 1px solid #C5C5C5 !important;
}

.datepicker .datepicker-days td.day {
	vertical-align:middle;
	padding:4px;
	background-color:#F6F6F6;
	border: 1px solid #C5C5C5 !important;
}

.datepicker-dropdown {
	z-index:1100 !important;
}

hr{
	width: 100%; 
	color: #e5e5e5; 
	height: 1px;
	padding:0;
	margin-top:8px;
	margin-bottom:8px;
}
.footer{height:40px;}
.wrap{white-space: normal;}
.nowrap{white-space: normal;}

/* width */
.w12 {width:12px}
.w25 {width:25px}
.w40 {width:40px}
.w50{width:50px}
.w100 {width:100px}
.w140 {width:140px;min-width:140px;}

/* vertical-align */
.left-0{padding-left:0;margin-left:0;}
.top-0{margin-top:0;}

/* Menu */
.navbar-dark .navbar-nav .nav-link,.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-toggler, div.nav-item a.nav-link {
	color: #fff;
	white-space: nowrap;
}
.navbar-nav li:hover>.dropdown-menu {
  display: block;
}

.navbar-brand-logo
{
	padding-top:0px;
	padding-bottom:0px;
}
.logo {
	max-height:35px;
}
.dropdown-menu {
}
#planningDateSelectorDropdown {
	width: 470px;
}
.modal {
  overflow: auto;
}

.modal-body {
  overflow: visible;

}
.myPosition {
    position: fixed;
}
/* Buttons */

div.btn-group
{
	margin-right:5px;
}
.btn
{
	font-size:.90rem;
}

/* Soplanning Box */
.soplanning-box .inline,.soplanning-box .inline .input-append {
	margin:0;
}

.soplanning-box .inline .input-append input {
	height: 16px;
}

.soplanning-box {
	border-radius: 4px;
	padding: 7px;
}

.soplanning-box form {
	margin:0;
}

/* Modal Box */
.modal-dialog-normal{
	max-width:610px;
}

.modalBig {
	max-width: 960px;
	height:auto;

}

.modal-tutoriel{
	max-width:690px;
}

.modal-backdrop,.modal-backdrop.fade.in {
	opacity: .5;
}

.modal-header {
	cursor: move;
	border-bottom-color: #EEEEEE;
	background-color: #FAFAFA;
}

.modal-header h5 {
	font-weight:700;
}

/* Modales generiques soAlert() / soConfirm() (remplacement de alert()/confirm() natifs) */
#soAlertModal .modal-title, #soConfirmModal .modal-title {
	flex:1;
}
#soAlertModal .so-modal-icon, #soConfirmModal .so-modal-icon {
	width:28px;
	text-align:center;
}
#soAlertModal .modal-body, #soConfirmModal .modal-body {
	white-space:pre-line;
}

/* Empiler soAlert()/soConfirm() (et l'erreur serveur xajax) par-dessus une modale
   deja ouverte (ex: formulaire de tache dans #myBigModal). Sans ceci, Bootstrap 4
   donne le meme z-index (1050 modale / 1040 fond assombri) a TOUTES les modales :
   la 2e modale reste visible par-dessus (elle est plus bas dans le DOM), mais son
   fond assombri (1040) reste sous la 1ere modale (1050) et ne la grise donc jamais.
   On remonte la modale utilitaire et son fond assombri au-dessus de la pile normale. */
#soAlertModal, #soConfirmModal, #xajaxErrorModal {
	z-index: 1070;
}
.modal-backdrop ~ .modal-backdrop {
	z-index: 1060;
}

/* Tooltip */
.tooltip-inner {
	max-width: 300px !important;
	padding: 6px 8px;
	background-color:#FAFAF7 !important;
	color: #000;
	text-align: left !important;
	background-color: #000;
	border-radius: .25rem;
	opacity:1;
	border:1px solid silver;
}

.tooltip.show {
  opacity: 1 !important;
}
.picto-link
{
position: absolute;right:-5px;top:12px;color:#000;font-size:9px
}
.picto-comment
{
position: absolute;right:5px;top:12px;color:#000;font-size:9px;
}
.picto-milestone-reduit
{
	position:absolute;
	right:5%;
	top:1px;
	height:12px;
}
.picto-milestone-large
{
	position:absolute;
	right:5%;
	top:1px;
}
/* Pagination */
.pagination {
	margin: 4px 5px 0px 0px;
	position: relative;
	display: inline-block;
	white-space: nowrap;
	vertical-align: middle;
}

.pagination ul > li > a,
.pagination ul > li > span {
  float: left;
  padding: 2px 12px;
  line-height: 20px;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
  border-left-width: 0;
}

/* Cursor */
.cursor-help
{
	cursor:help;
}
.cursor-pointer
{
	cursor:pointer;
}

/* Planning */
.planning_head_day
{
	min-width:25px;
}
.planning-filter
{
	margin:10px;
}
.planning-filter td {
   padding-right:20px;
}
.planning-dateselector
{
	 margin-left:10px;
}
.planning_user_table
{
	border:0;
	padding:2px;
}
.planning_user_table td
{
	white-space: normal;
}
.cellProject,.cellProjectBiseau1,.cellProjectBiseau2 {
	min-height: 14px;
	padding-left:3px;
	padding-right:3px;
	box-shadow: 1px 1px 5px silver;
}
.planningFirstCol
{
	top: auto;
	width: 120px;
	padding-right: 24px;
	text-align:left !important;
}
.cellHolidays {
	min-width: 25px;
	min-height: 14px;
	padding-left:3px;
	padding-right:3px;
	box-shadow: 1px 1px 5px silver;
}
.cellEmpty {
	min-height:14px;
	padding:0;
	margin:0;
	margin-top:1px;
	margin-bottom:4px;
	font-size:0;
	box-shadow: none;
}
.cellEmptyLarge {
	height: 28px !important;
}
.sumCell
{
	text-align:center;
	vertical-align: middle;
}
.sumLargeCell
{
float:left;
width:100%;
height:100%;
text-align:center;
vertical-align: middle;
}

.miniCode {
	margin-left:2px;
	vertical-align:middle;
}

.largeCode {
	font-weight:700;
}
.startDateCell
{
	position:absolute;
	left:1px;
	bottom:0
}
.percentCell
{
	position:absolute;
	right:15px;
	bottom:0
}
.codesProjets {
	height: 30px;
	width: 140px;
}

.cellLigneHeureEtCharge {
	position:relative;
	min-height:12px;
}

.planningContent {
/*width:100vw;*/
border-collapse: separate;
border-spacing: 0;
}
.planningContent td {
	min-width: 25px;
	min-height: 20px;
	line-height: 20px;
}

.planningTabName {
	white-space: normal;
	width:400px;
}
.planningTabTask {
	white-space: normal;
}

/* infosVersion */
#infosVersion ul {
	margin-left: 0;
	list-style: none;
}

/* planning */
#divPlanning
{
	/*margin-top:165px;*/
}

#divProjectTable
{
	margin-top:5px;
	border:0;
	padding: 2px;
}
#divProjectTable thead
{
	background-color:#fff;
}

#divChoixDragNDrop
{
 border: 1px solid #000;
 background-color:#fff;
 position:absolute;
 z-index:100;
 display:none;
 padding:10px;
 min-width:350px;
}

td.planningDropdownFilter label.checkbox
{
	padding-bottom:0;
	padding-top:0;
	margin-top:0;
	margin-bottom:0;
	min-height:20px;
	cursor:pointer;
	display:block;
}

td.planningDropdownFilter div.form-horizontal
{
	margin-left:5px;
	padding-left:0;
}

.taskDivComment
{
	border-radius:10px;
	padding:5px;
	margin-bottom:5px;
	cursor: pointer;
}
.taskDivComment:hover
{
	cursor: pointer;
}

#date_debut_affiche {
	height:25px;
}
#date_fin_affiche {
	height:25px;
}
#date_debut_custom
{
	margin-top:5px;
	width:105px;
	height:23px;
	font-size:11px;
	vertical-align:top;
	padding:0
}

#date_fin_custom
{
	margin-top:5px;
	width:105px;
	height:23px;
	font-size:11px;
	vertical-align:top;
	padding:0
}

/* Form */
.form-control.datepicker
{
	 width:103px;
}

/* Formulaire de tache (#periodForm2) : les largeurs des champs du bloc "Quand"
   (date de debut / de fin, heures, duree, pause, nb de jours) sont definies
   plus bas, par les classes .periode-w-date / .periode-w-heure /
   .periode-w-court / .periode-w-num, en pixels et non plus en pourcentage :
   le bloc n'utilise plus la grille col-md-* mais un flex, donc un pourcentage
   ne se rapporte plus a une colonne de largeur connue. Les anciennes regles
   #periodForm2 #heure_debut/#heure_fin/#duree/#pause { width: 75% } et
   #periodForm2 #date_debut/#date_fin { width: 70% } ont ete supprimees : leurs
   deux ID (specificite 0,2,0,0) l'emportaient sur les classes et annulaient
   silencieusement les largeurs voulues. Meme chose pour la regle de hauteur
   #segModePeriode.btn-group-sm > .btn : le selecteur de mode n'est plus un
   btn-group mais un .periode-seg (piste + pastilles), dont la hauteur suit
   deja celle des champs voisins. */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
{
	text-align:center;
}
.alert li {
	list-style-type:disc;
	margin-left:15px;
}
.soplanning_install_title
{
font-size:30px;font-weight:700;
}
.soplanning_index_title1
{
font-size:23px;font-weight:700;
}
.soplanning_index_title2
{
font-size:30px;font-weight:700;
}

#dateFilterButton{height:30px;}
#projectListLabel{display:table-cell;margin-right:5px;}
#projectListLabel label{margin-right:5px;}
#projectListButton{display:table-cell;}
#projectStatusLabel{display:table-cell;}
#projectStatusLabel label{margin-right:5px;}
#projectStatusCheckbox{display:table-cell;}
#taskListLabel{display:table-cell;padding-right:10px;}
#taskDateSelect{display:table-cell;}
#taskDateSelect tr{height:15px;}
#taskDateSelectLabel{min-width:90px;display: table-cell;padding-right:10px;}
#taskListFiltreLabel{min-width:105px;display: table-cell;padding-right:10px;}
#taskListGroupeLabel{min-width:90px;display: table-cell;padding-right:10px;}
#taskDateSelectStart{display:inline-block;}
#taskDateSelectEnd{display:inline-block;}
#taskDateSelectButton{display: inline-block;}
#taskListButton{display:table-cell;}
#taskListFiltreButton{display:table-cell;}
#taskListGroupeButton{display:table-cell;width: 300px;}
#taskStatusLabel{display:table-cell;}
#taskStatusLabel label{margin-right:5px;min-width: 140px;}
#taskStatusCheckbox{display:table-cell;}
#taskNbMonth{display:table-cell;}
#taskFromDate{display:table-cell;}
#taskFromDate label{margin-right:5px;margin-left:5px;}
#taskToDate{display:table-cell;}

.tooltip-html{display:none;}

.input-withicon{width:96%}
#periodForm .container-fluid {padding-right:0;}
.tab-periode{min-height:150px}
.userTabColRights{white-space:normal;}

.titrePage {
	font-size:19px;
	font-weight:700;
}

.ms-drop{width:400px;}
.ms-options{
min-width:400px;
border: 1px solid rgba(0,0,0,.15) !important;
border-radius: .25rem;
padding-left: .2rem;
padding-right: .2rem;
}
.ms-options > .ms-search[id^="search-"]{
position: sticky;
top: 0;
z-index: 10;
background: #fff;
}

.pastille-statut {
width: 15px;
height: 15px;
border-radius: 50px;
box-shadow: 1px 1px 5px silver;
}

.pastille-projet, .pastille-user {
padding:5px;
border-radius:6px;
box-shadow: 1px 1px 5px silver;
}

.progress {
	width:100px;
	overflow: hidden;
	height: 21px;
	margin-bottom: 5px;
	background-color: #ebebeb;
	border-radius: 4px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Jauges */

@-o-keyframes highlightRouge {
 	0% {
 		background: none
 	}50% {
 		background: #f91919;
 	}100% {
 		background: none;
 	} 		
}
@-moz-keyframes highlightRouge {
 	0% {
 		background: none
 	}50% {
 		background: #f91919;
 	}100% {
 		background: none;
 	} 		
}
@keyframes highlightRouge {
 	0% {
 		background: none
 	}50% {
 		background: #f91919;
 	}100% {
 		background: none;
 	} 		
}


@-o-keyframes highlightVert {
 	0% {
 		background: none
 	}50% {
 		background: #2ded2d;
 	}100% {
 		background: none;
 	} 		
}
@-moz-keyframes highlightVert {
 	0% {
 		background: none
 	}50% {
 		background: #2ded2d;
 	}100% {
 		background: none;
 	} 		
}
@keyframes highlightVert {
 	0% {
 		background: none
 	}50% {
 		background: #2ded2d;
 	}100% {
 		background: none;
 	} 		
}

.jaugeTD{
	position: relative;
	width: 100%;
	height: 100%;
	min-height:20px;
}
.jaugeTDReduit{
	position: relative;
	top: -20px;
	left: -35px;
	width: 100%;
	height: 100%;
}
.jauge0 {
	font-size: 7px;
	font-weight:700;
	color: #000;
	text-indent: -1px;
	position: absolute;
	right: 1px;
	top: 1px;
	width: 10px;
	height: 100%;
	text-align: center;
	line-height:100%;
	background-color: #e5e5e5;
	border: 1px solid #fff;
}
.jauge1 {
	position: absolute;
	bottom:0;
	width: 10%;
	height: 1px;
	background-color: #f91919;

}
.jauge2 {
	position: absolute;
	bottom:0;
	width: 10px;
	height: 20%;
	background-color: #f91919;

}
.jauge3 {
	position: absolute;
	bottom:0;
	width: 10px;
	height: 30%;
	background-color: #f91919;

}
.jauge4 {
	position: absolute;
	bottom:0;
	width: 10px;
	height: 40%;
	background-color: #f96019;

}
.jauge5 {
	position: absolute;
	bottom:0;
	width: 10px;
	height: 50%;
	background-color: #ff8513;

}
.jauge6 {
	position: absolute;
	bottom:0;
	width: 10px;
	height: 60%;
	background-color: #ffbc05;

}
.jauge7 {
	position: absolute;
	bottom:0;
	width: 10px;
	height: 70%;
	background-color: #ded300;

}
.jauge8 {
	position: absolute;
	bottom:0;
	width: 10px;
	height: 80%;
	background-color: #b8d300;

}
.jauge9 {
	position: absolute;
	bottom:0;
	width: 10px;
	height: 90%;
	/*	animation: highlightVert 1s infinite;
	animation-timing-function: ease-in-out; */
	background-color: #2ded2d;
}

.jauge10 {
	position: absolute;
	bottom:0;
	width: 10px;
	height: 100%;
	background-color: #2ded2d;
}
.jauge11 {
	position: absolute;
	bottom:0;
	width: 10px;
	height: 100%;
	background: #f91919;
	/* animation: highlightRouge 1s infinite;
	animation-timing-function: ease-in-out; */
}
.backgroundRouge{
	background-color: #f91919;
}

.form-group {
	margin-bottom: .5rem;
}
#top-scroll{height: 20px;width:1200px;overflow-x: scroll; overflow-y:hidden;display:none; }
#top-scroll-inner {height: 20px;}
#right-scroll{right:4vmax;position:fixed;top:50vh;display:none;z-index:900}
#left-scroll{left:4vw;position:fixed;top:50vh;display:none;z-index:900}
#left-button,#right-button{cursor:pointer;color:gray;}
#FilterToggle1{display:none;}
#tab_audit_valeurs {margin-top:10px; width:100%}
#tab_audit_valeurs table,#tab_audit_valeurs tr, #tab_audit_valeurs td, #tab_audit_valeurs th {border: 1px solid silver; border-collapse: collapse;padding: 5px;white-space: normal; }
#left-scroll i,#right-scroll i {
  font-size: 1.6em;
  width: 1.6em;
  text-align: center;
  line-height: 1.6em;
  background: #212529;
  color: #fff;
  border-radius: 0.8em;
}
.week[drop-active=true] {
  box-shadow: inset 0px 0px 0px 2px red;
}

.hidden {
	display:none
}

.versionNumber {
	font-size: 60%;
}

.btnActionLignePlanning {
	height:15px;
	border:0px;
	padding-top:0px;
	padding-left:6px;
	padding-right:6px;
	padding-bottom:22px;
}

/* Sticky Planning Header */
#planning_header_month th
{
 position: sticky;
 position: -webkit-sticky;
 top:164px;
 z-index: 12;
}

#planning_header_week_hour th
{
 position: sticky;
 position: -webkit-sticky;
 top:164px;
 z-index: 12;
}

#planning_header_week th
{
 position: sticky;
 position: -webkit-sticky;
 top:185px;
 z-index: 12;
}

#planning_header_hour th
{
 position: sticky;
 position: -webkit-sticky;
 top:186px;
 z-index: 12;
}

#planning_header_dayname th
{
 position: sticky;
 position: -webkit-sticky;
 top:208px;
 z-index: 12;
}

#planning_header_day th
{
 position: sticky;
 position: -webkit-sticky;
 top:228px;
 z-index: 12;
 border-bottom:1px solid white;
}

#divProjectTable th
{
 position: sticky;
 position: -webkit-sticky;
 top:165px;
 z-index: 12;
 border-top:0px;
 background-color:#f9f9f9;
 border-bottom: 2px solid #dee2e6;
}

#taskTab th, #projectTab th, #ProjectListTab th, #userTab th, #teamTab th, #locationTab th, #ressourceTab th, #statusTab th, #FeriesTab th
{
 position: sticky;
 position: -webkit-sticky;
 top:50px;
 z-index: 12;
 border-top:0px;
 background-color:#f9f9f9;
 border-bottom: 2px solid #dee2e6;
}

.planningContent th {
    position: sticky;
    position: -webkit-sticky;
	border-bottom:0px;
    top:0;
	white-space: nowrap;
}

#firstLayer
{
	position: -webkit-sticky;
	top:51px;
	border:4px solid #eeeeee;
	z-index: 105;
	min-width: 540px;
}
#secondLayer
{
	position: -webkit-sticky;
	top:105px;
	border:4px solid #eeeeee;
	border-bottom:9px solid #eeeeee;
	z-index: 100;
	min-width: 540px;
}

#thirdLayer
{
	border: 4px solid #eeeeee;
	min-width: 540px;
	top:156px;
	z-index: 50;
}

th[scope=row]
{
	left:0px !important;
	border-left: 0px solid #eeeeee;
	z-index:3;
}

.planning_switch
{
	z-index:20 !important;
}

#tdTotal,#tdTotalTaches
{
	background-color:white;
}

#divMessage{top:56px;}
#filtreTexte{width:110px;height:33px;padding:0px;}
#divRecap{position:relative;border:4px solid #eeeeee;margin-top:160px}

.ellipsis {
    width:225px;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#file-select-button {
    cursor: pointer;
}

.container{margin-top:60px;margin-bottom: 40px;}
#divChoixDragNDrop a{
    display:block;
    margin-bottom:10px;
}

#ui-timepicker-div {
  position: absolute !important;
}

#table_restore_result table, #table_restore_result th, #table_restore_result td {
	border: 1px solid black;
	border-collapse: collapse;
	padding: 5px;
}
.restore-OK{ background-color:green;color:white;padding:3px;border-radius:2px;}
.restore-KO{ background-color:red;color:white;padding:3px;border-radius:2px;}

.bordureSelectionne {
	border:2px #ff0000 dotted;
}

/* for modal on right or left side */
.modal.left .modal-dialog,
.modal.right .modal-dialog {
	position: fixed;
	margin: auto;
	width: 400px;
	height: 100%;
	-webkit-transform: translate3d(0%, 0, 0);
		-ms-transform: translate3d(0%, 0, 0);
		 -o-transform: translate3d(0%, 0, 0);
			transform: translate3d(0%, 0, 0);
}

.modal.left .modal-dialog {
	left:0px;
}

.modal.right .modal-dialog {
	right:0px;
}

.modal.left .modal-content,
.modal.right .modal-content {
	height: 100%;
	overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
	padding: 15px 15px 80px;
}

.modal.left.fade .modal-dialog{
	left: 0px;
	-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
	   -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
		 -o-transition: opacity 0.3s linear, left 0.3s ease-out;
			transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog{
	left: 0;
}
	
.modal.right.fade .modal-dialog {
	right: 0px;
	-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
	   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
		 -o-transition: opacity 0.3s linear, right 0.3s ease-out;
			transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
	right: 0;
}

/* end for modal */

.dropdown-menu.filtrePlanning {
	max-height: 700px;
	overflow-y: scroll;
}

.tooltip-inner {
    max-width: 500px !important;
}


.colProj1 {
	background-color:#ffffd9;
}
.colProj2 {
	background-color:#d8fcf9;
}

/* Style pour la première colonne du planning (noms des personnes/projets) */
.divpeoplePDF {
	width: 200px !important;
	min-width: 200px !important;
	max-width: 200px !important;
}

/* Responsive actions group for planning filter (mobile <= 750px) */
#btnMoreActionsToggle { display: none; }
#btnLessActionsToggle { display: none; margin-left:5px}
#moreActions { display: inline-block; }
/* Force hide when JS adds .hidden on the opener */
#btnMoreActionsToggle.hidden { display: none; }
@media (max-width: 750px) {
	#btnMoreActionsToggle { display: inline-block; }
	#btnLessActionsToggle { display: inline-block; }
	#moreActions { display: none; width: 100%; }
	#moreActions.show { display: block; width: 100%; }
	/* Ensure .hidden wins over the ID rule on small screens */
	#btnMoreActionsToggle.hidden { display: none; }
	#searchboxPlanning { display:block;}
}
@media (min-width: 751px) {
	#btnMoreActionsToggle { display: none; }
	#btnLessActionsToggle { display: none;}
	#moreActions { display: inline-block; }
}

/* Bouton "Ajouter une tache" en bouton flottant sur smartphone (<=750px) :
   la barre de filtres (#firstLayer) n'a pas la largeur pour ce bouton en plus
   des autres (min-width:540px la force plus large que l'ecran sur un
   telephone), il est donc coupe/inatteignable a droite. On le detache de la
   barre et on le fixe en bas a droite de l'ecran, comme un bouton d'action
   principal. #btnAddTaskMobile est cache par defaut (desktop/tablette : le
   bouton reste dans la barre, #btnAddTask ci-dessous). */
#btnAddTaskMobile { display: none; }
@media (max-width: 750px) {
	#btnAddTask { display: none; }
	#btnAddTaskMobile {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 20px;
		bottom: 50px;
		width: 52px;
		height: 52px;
		border-radius: 50%;
		box-shadow: 0 3px 10px rgba(0,0,0,0.3);
		z-index: 1040;
		font-size: 20px;
	}
	/* le bouton de l'assistant IA (ai-chat.css) occupe deja bottom:50px a
	   droite ; quand il est present (classe posee cote serveur, meme
	   condition que templates/www_footer.tpl), on empile le bouton d'ajout
	   juste au-dessus : 50 (bas du bouton IA) + 52 (sa hauteur) + 12 (espace) */
	#btnAddTaskMobile.ai-widget-actif { bottom: 114px; }
}

/* Chrome, Edge, Safari, Opera */
::-webkit-scrollbar {
    width: 20px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #b1b1b1;
    border-radius: 10px;
}

.boutonAffichagePlanning {
	border:none;
	background-color:transparent;
	color:#ffffff;
	font-weight:bold;
}

/* Fix Select2 inline search field wrapping */
/* When items are selected, the search li is NOT :first-child -> minimize to avoid wrapping */
.select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
	min-width: 2px !important;
	width: 2px !important;
}
/* When nothing is selected, the search li IS :first-child -> full width to show placeholder */
.select2-container--bootstrap .select2-selection--multiple .select2-search--inline:first-child .select2-search__field {
	min-width: 0 !important;
	width: 100% !important;
}


/* Override Bootstrap container padding */
.container, .container-fluid,
.container-sm, .container-md, .container-lg, .container-xl {
	padding-right: 5px;
	padding-left: 5px;
}


/* ------------------------------------------------------------------
   Formulaire de tache : bloc "Quand" (barre compacte)
   Une ligne : date de debut + selecteur de mode en pastilles + rappel
   de la duree. Les champs du mode actif s'affichent dans l'encart
   juste en dessous (les autres modes restent dans le DOM, masques).
   ------------------------------------------------------------------ */
/* la colonne de droite de la barre : selecteur de mode + rappel de duree */
.periode-quand-modes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
/* grille interne des cartes (Qualification, Contenu, Recurrence...) :
   14px = 15px de gouttiere de colonne + 15px de marge negative de .row - 1px
   de bordure de carte. Avec cette valeur, les colonnes des lignes internes
   tombent exactement sur celles des lignes Titre / Projet / Personne, donc
   les champs sont alignes d'un bloc a l'autre. Ne pas y toucher sans
   remesurer : toute autre valeur decale toute la carte. */
.periode-zone > .card-body,
.periode-zone > .card-header {
	padding-left: 14px;
	padding-right: 14px;
}
/* Largeurs de champs exprimees en caracteres (unite ch = largeur du chiffre 0,
   les chiffres sont a chasse fixe dans la police du formulaire) : elles suivent
   donc la taille de police du theme au lieu d'etre figees en pixels.
   Formule : <n>ch de texte + 1.5rem de padding .form-control + 2px de bordures.
   Le champ de date porte la classe sur l'input-group (bureau) ou directement
   sur l'input (mobile, input type=date) : les deux cas sont traites. */
.periode-quand .periode-w-date {
	/* fit-content et non auto : dans la colonne (contexte bloc), auto ferait
	   occuper toute la largeur disponible au groupe input-group */
	width: fit-content;
	flex: 0 0 auto;
}
.periode-quand .periode-w-date > .form-control {
	flex: 0 0 auto;
	width: calc(10ch + 1.5rem + 2px);
}
.periode-quand input.periode-w-date {
	/* input type=date : le navigateur ajoute son propre picto dans le champ */
	width: calc(10ch + 3rem + 2px);
}
.periode-quand .input-group-text {
	background-color: #f1f3f5;
	color: #6c757d;
}
.periode-quand-addon {
	cursor: pointer;
}
.periode-recap {
	margin-left: auto;
	padding: 3px 11px;
	white-space: nowrap;
	font-size: 13px;
	color: #495057;
	background-color: #e9edf2;
	border-radius: 999px;
}

/* selecteur segmente : piste grise, pastille active coloree par le theme */
.periode-seg {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 3px;
	background-color: #eceff3;
	border-radius: 8px;
}
.periode-seg .btn {
	border: 0;
	border-radius: 6px;
	box-shadow: none;
	white-space: nowrap;
}
.periode-seg .btn:focus,
.periode-seg .btn:active {
	box-shadow: none;
}
.periode-seg .btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}
.periode-seg .btn.active {
	box-shadow: 0 1px 2px rgba(16, 24, 40, .2);
}
.periode-seg .periode-seg-off {
	background-color: transparent;
	color: #5a6672;
}
.periode-seg .periode-seg-off:hover {
	background-color: #e2e6eb;
	color: #212529;
}

/* encart des champs du mode actif */
.periode-quand-zone {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 18px;
	row-gap: 8px;
	margin-top: 10px;
	padding: 10px 12px;
	background-color: #f7f9fb;
	border: 1px solid #e6ebf0;
	border-radius: 4px;
}
.periode-mode-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.periode-mode-label {
	margin-bottom: 0;
	white-space: nowrap;
	color: #495057;
}
/* le premier libelle de chaque mode est colle au bord gauche de l'encart, son
   champ vient juste derriere (gap de .periode-mode-fields). En revanche on
   aere avant le groupe suivant de la meme ligne, pour qu'on lise bien deux
   groupes distincts (ex. "Fin : [date]" puis "ou nb jours : [nb]"). */
.periode-mode-fields > .periode-mode-label:not(:first-child),
.periode-mode-fields > .periode-mode-check {
	margin-left: 16px;
}
.periode-mode-check {
	margin-bottom: 0;
	font-weight: normal;
	color: #495057;
}
.periode-mode-arrow {
	color: #adb5bd;
}
/* heure de debut / de fin : meme largeur que la zone de saisie d'une date jj/mm/aaaa */
.periode-quand-zone .periode-w-heure {
	width: calc(5ch + 1.5rem + 2px);
}
/* duree, pause, nb de jours : environ 6 caracteres */
.periode-quand-zone .periode-w-court,
.periode-quand-zone .periode-w-num {
	width: calc(6ch + 1.5rem + 2px);
}
/* le libelle de la pause et son champ restent toujours cote a cote :
   c'est le bloc entier qui passe a la ligne, jamais le champ seul */
/* la pause est toujours calee a droite de l'encart : elle occupe ainsi la
   meme position quel que soit le mode affiche (elle passe a la ligne, en
   restant a droite, quand le mode occupe deja toute la largeur). Son libelle
   et son champ ne se separent jamais (nowrap). */
#divPause {
	flex-wrap: nowrap;
	margin-left: auto;
}

@media (max-width: 767px) {
	.periode-recap {
		margin-left: 0;
	}
	.periode-quand .periode-w-date {
		width: 100%;
	}
}