.disable{
  pointer-events:none;
  background:Gainsboro;
}


.modal-xxl {
  max-width: 1400px; /* largeur souhaitée */
}


#modalDetail.modal-fullscreen .modal-dialog {
    max-width: 100%;
    margin: 0;
    width: 100%;
    height: 100%;
}

#modalDetail.modal-fullscreen .modal-content {
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}



#modalDetail.modal-fullscreen .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    width: 100%;
    padding: 1rem; /* ou 0 si tu veux vraiment bord à bord */
}


#modalDetail.modal-fullscreen .nav-tabs {
    width: 100%;
}

#modalDetail.modal-fullscreen .tab-content {
    width: 100%;
}



input[type=date] {
 -webkit-appearance:none;
 width:100%;
 background:#fff;
 border:1px solid var(--base-color);
 padding:13px 15px;
 outline:none;
 line-height:1
}


input[type=datetime-local] {
 -webkit-appearance:none;
 width:100%;
 background:#fff;
 border:1px solid var(--base-color);
 padding:13px 15px;
 outline:none;
 line-height:1
}

input[type=file] {
 -webkit-appearance:none;
 width:100%;
 background:#fff;
 border:1px solid var(--base-color);
 padding:13px 15px;
 outline:none;
 line-height:1
}

input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: calc(2.25rem + 2px); /* même hauteur qu'un .form-control Bootstrap */
  background: #fff;
  border: 1px solid var(--base-color, #ced4da);
  padding: 0; /* le padding ne s'applique pas bien */
  border-radius: 0.375rem; /* même radius que Bootstrap */
  cursor: pointer;
}


div.form-check-inline {
 -webkit-appearance:none;
 padding:13px 15px;
 line-height:1
}


.form-label {
  font-weight: normal;
  margin-top: 10px;
  color: var(--color2);
}

.form-titre1 {
  font-weight: bold;
  margin-top: 30px;
  font-size: 18px !important;
  color: var(--color1);
}

li.mtdata-objet { /*On d�sactive le point des LI*/
	list-style-type: none;
}

li[class^="mtdata-icon"] { /*On d�sactive le point des LI si un icon est affich� (class commencant par mtdata-icon)*/
	list-style-type: none;
}

.no-caret::after {
  display: none !important;
  content: none !important;
}


.kpi-icon {  
  float: right;
  font-size:250%;
  position: absolute;
  top:0rem;
  right:-0.3rem;
  opacity: .4;
}

.kpi-container {
  display: flex;  
  flex-wrap: wrap; /* Permet de passer � la ligne si l'espace est insuffisant */
  gap: 0.5em; /* Espace entre les �l�ments */
  justify-content: center; /* Centrer les �l�ments horizontalement */
}


.kpi-card
{
  overflow: hidden;
  position: relative;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.75);;
  display: inline-block;
  padding: 0.2em;
  border-radius: 0.3em;
  font-family: sans-serif;  
  width: 23%; /* Ajuste la largeur pour que 4 cartes tiennent dans 713px */
  min-width: 160px; /* Peut �tre ajust� si n�cessaire */
  max-width: 180px; /* Emp�che qu'elles deviennent trop grandes */
  height: 60px; /* Emp�che qu'elles deviennent trop grandes */
  margin-left: 0.5em;
  margin-top: 0.2em;
}

.kpi-card img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ou cover, selon ton besoin */
  display: block;
}

.kpi-card-value {
  display: block;
  font-size: 120%;  
  font-weight: bolder;
}

.kpi-card-text {
  display:block;
  font-size: 80%;
  padding-left: 0.2em;
}


.kpi-color-code {
  background: dimgrey;
  color: #fff;
}

.kpi-color-count {
  background: slateblue;
  color: #fff;
}

.kpi-color-date {
  background: skyblue;
  color: #fff;
}

.kpi-color-duree{
  background: lightsalmon;
  color: #fff;
}

.kpi-color-lieu{
  background: lightgreen;
  color: #fff;
}

.kpi-color-logo {
  background: LightGray;
  color: #black;
}

.kpi-color-longueur {
  background: steelblue;
  color: #fff;
}

.kpi-color-montant-negatif {
  background: crimson;
  color: #fff;
}

.kpi-color-montant-positif {
  background: seagreen;
  color: #fff;
}

.kpi-color-temperature {
  background: silver;
  color: #fff;
}

.kpi-color-temperature-mini {
  background: blue;
  color: #fff;
}

.kpi-color-temperature-maxi {
  background: red;
  color: #fff;
}

.kpi-color-temperature-avg {
  background: green;
  color: #fff;
}

.autocomplete-items {
  position:absolute;
  border: 1px solid #d4d4d4;
  z-index: 99;
  width: 100%;  /*Prend la largeur du parent */
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
  background-color: #e9e9e9;
}

.autocomplete-items div.selected {
  background-color: #007bff; /* Bleu */
  color: white;
}


.custom-datalist-container {
    position: relative;
    width: 100%;
}

.custom-datalist-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.custom-datalist-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
}

.custom-datalist-option {
    padding: 8px;
    cursor: pointer;
}

.custom-datalist-option:hover {
    background: #f0f0f0;
}


/*Pour afficher des lignes de couleurs différentes en fonction d'une condition*/

.table-striped > tbody > tr.row-red > * {
  color: FireBrick !important;
}

.table-striped > tbody > tr.row-green > * {
  color: LimeGreen !important;
}

.table-striped > tbody > tr.row-orange-red > * {
  color: OrangeRed !important;
}

.table-striped > tbody > tr.strike > * {
  text-decoration: line-through;
}










.red-gradient {
  background: linear-gradient(180deg, rgba(207,82,82,1) 0%, rgba(121,9,9,1) 80%);
  color: #fff;
}

