html, body{
  font-family: 'Arial';
  font-family: Arial, Helvetica, sans-serif;
  font-size:15px;
  color: #333;
}
#app {
	margin-bottom: 75px;
  margin:15px;
}
.col-fixed-250{
    -ms-flex: 0 0 250px;
    flex: 0 0 250px;
    background-color: #fff;
    margin: 0px 10px 0px 0px;
  }
.col-fixed-350{
    -ms-flex: 0 0 350px;
    flex: 0 0 350px;
    background-color: #fff;
    margin: 0px 10px 0px 0px;
  }
body, .form-control, .dropdown-menu, .btn{
	font-size: 0.9rem;
}
.nav-item:hover{
  cursor: pointer;
}
.control-label{
  margin-top: 4px;
}
@media (min-width: 992px) {
  .modal-lg {
    max-width: 1000px;
  }
}
 .modal-xl {
    max-width: 1400px;
  }
 .modal-md {
    max-width: 700px;
  }
 .modal-sm {
    max-width: 500px;
  }
.modal-xs {
    max-width: 400px;
  }

.modal-content .close{
   position: absolute; 
   right: 10px; 
   top:5px; 
   z-index: 9;
   font-size: 28px;
}
.modal{
  margin:10%;
}
.modal-content{
  padding:10px 20px 20px 20px;
}

.modal{
  margin:0.5%;
}
#flashmessage{
  position: absolute;
  bottom: 0px;
  padding:10px;
  height: 55px;
  text-align: center;
  width: 100%;
  z-index: 1040;
}
.messageflash{
    position:absolute;
    bottom: -16px;
    padding: 0px;
    left: 0px;
    width: 100%;
    text-align:center;
    margin: 0 auto;
    z-index: 99999;
    padding:0px;
    font-size: 15px;
    font-weight: 400;
}
.messageflash .alert{
  border-radius: 0px;
  height: 60px;
  padding:15px 20px;
}
fieldset{
  border: 1px solid #ddd;
  padding: 2px 10px 10px 10px;
}
legend{
  font-size: 1em;
  width: auto;
    padding:0 5px 0px 3px;
}
a{
  color: #0089b7;
}
a:hover{
  color: #006b8e;
  cursor: pointer;
}
h5{
  line-height: 26px;
}
table.table-bordered{
  border:1px solid #eee;
}
table.sortable th{
	cursor: pointer;
}
.table-hover{
  cursor: pointer;
}
table, table.table-head, table.table-bordered.table-head{
	margin: 0px;
}
.table-content{
	width: 100%;
}
.table td, .table th{
	padding: 6px;
	border: none;
}
.table td:first-child, .table th:first-child{
  padding-left: 20px;
}
.table td:last-child, .table th:last-child{
  padding-right: 20px;  
}
.show_onhover_td{
	display: none;
}
td:hover .show_onhover_td{
	display: inline;
}
.table-striped > tbody > tr:nth-child(2n+1) {
   background-color: #fff;
}
.table-striped > tbody > tr:nth-child(2n+2){
   background-color: #f4f4f4;
}
.table th{
  background-color: #e9e9e9;
  padding: 5px 6px;
}
.table-striped > tbody > tr.selected{
  background-color: #cceaf4!important;
}
.footer .navbar{
    padding-left:  60px;
  background-color:#353945;
}

.footer .logo_bottom{
    position:  absolute;
    left:  5px;
    top:  5px;
    width:  50px;
}

.vuejs{
	display: none;
}
.vuejs.loaded{
	display: block;
}
.app-navbar{
	background-color: #343a40 !important; /* Même couleur que la barre du bas */
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	border-bottom: 1px solid #495057;
}

/* Amélioration de la navigation pour tablettes et responsive */
.navbar-expand-md .navbar-nav .nav-link {
    padding: 0.75rem 1rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: #ffffff !important; /* Texte blanc sur fond sombre */
}

.navbar-nav .nav-item .nav-link {
    display: flex;
    align-items: center;
    min-height: 40px;
    color: #ffffff !important;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.navbar-nav .nav-item .nav-link:hover {
    color: #f8f9fa !important;
    background-color: rgba(255,255,255,0.1);
    border-radius: 4px;
}

.navbar-nav .nav-item .nav-link i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
    font-size: 1.1rem;
}

.dropdown-menu {
    background-color: #495057 !important; /* Fond gris sombre pour les dropdowns */
    border: 1px solid #6c757d;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 0.25rem 0;
}

.dropdown-item {
    padding: 0.6rem 1.25rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    color: #ffffff !important; /* Texte blanc */
}

.dropdown-item i {
    margin-right: 10px;
    width: 18px;
    text-align: center;
    color: #dee2e6 !important; /* Icônes gris clair */
    font-size: 1.05rem;
}

.dropdown-item:hover {
    background-color: #6c757d !important; /* Hover plus clair */
}

.dropdown-item:hover i {
    color: #ffffff !important; /* Icônes blanches au hover */
}

.nav-text {
    white-space: nowrap;
}

.me-2 {
    margin-right: 0.5rem;
}

.d-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

/* Optimisation pour tablettes - Menu toujours visible */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .navbar-toggler {
        display: none !important; /* Cache le bouton hamburger sur tablettes */
    }
    
    .navbar-collapse {
        display: flex !important; /* Force l'affichage du menu */
    }
    
    .navbar-nav .nav-item .nav-link {
        padding: 0.65rem 0.75rem;
        font-size: 1rem;
    }
    
    .navbar-nav .nav-item .nav-link i {
        margin-right: 6px;
        font-size: 1.05rem;
    }
    
    .dropdown-item {
        padding: 0.55rem 1rem;
        font-size: 0.95rem;
    }
    
    .dropdown-item i {
        margin-right: 8px;
        width: 16px;
        font-size: 1rem;
    }
    
    /* Ajustement pour éviter le débordement sur tablettes */
    .navbar-nav {
        flex-wrap: wrap;
    }
    
    .navbar-nav .nav-item {
        flex: 0 0 auto;
    }
}

/* Tablettes en mode portrait - Menu compact mais visible */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
    .navbar-nav .nav-item .nav-link {
        padding: 0.5rem 0.6rem;
        font-size: 0.85rem;
    }
    
    .nav-text {
        font-size: 0.85rem;
    }
    
    .navbar-nav .nav-item .nav-link i {
        margin-right: 4px;
        font-size: 0.9rem;
    }
    
    .dropdown-item {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* Grande tablettes et desktop */
@media (min-width: 1200px) {
    .navbar-nav .nav-item .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
    
    .dropdown-item {
        padding: 0.6rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* Mobile uniquement - garde le menu hamburger */
@media (max-width: 767.98px) {
    .navbar-toggler {
        display: block !important;
        border: 1px solid #e0e0e0;
        padding: 0.5rem 0.75rem;
    }
    
    .navbar-collapse {
        border-top: 1px solid #e0e0e0;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }
    
    .navbar-nav .nav-item .nav-link {
        padding: 0.75rem 1rem;
        border-radius: 4px;
        margin: 2px 0;
    }
    
    .navbar-nav .nav-item .nav-link:hover {
        background-color: #f8f9fa;
    }
    
    .dropdown-menu {
        border: none;
        box-shadow: none;
        background-color: #f8f9fa;
        margin-left: 1rem;
    }
    
    .dropdown-item {
        padding: 0.5rem 1rem;
        border-radius: 4px;
        margin: 2px 0;
    }
    
    .dropdown-item:hover {
        background-color: #6c757d !important; /* Cohérent avec le thème sombre */
    }
}

/* États actifs et focus - Thème sombre */
.navbar-nav .nav-item .nav-link:focus,
.navbar-nav .nav-item .nav-link:hover {
    color: #f8f9fa !important; /* Texte clair au hover */
    background-color: rgba(255,255,255,0.1);
    border-radius: 4px;
}

.dropdown-item:focus,
.dropdown-item:active {
    background-color: #6c757d !important; /* Fond sombre au focus */
    color: #ffffff !important; /* Texte blanc */
}

/* Amélioration du toggler pour mobile seulement */
@media (max-width: 767.98px) {
    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 183, 0.25);
    }
}

/* Forcer l'icône pour le menu Matériel dans la sidebar */
.form_lb_left a[onclick*="listeMateriel"]::before,
a[href*="Materiel"]::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f0ad ';
    margin-right: 8px;
    color: #6c757d;
}

.form-group{
	margin-bottom: 0.7rem;
}

.form-control, .input-group-text{
	height: calc(1.8rem + 2px);
	line-height: 1.4;
	padding: .275rem .5rem;
  margin-top: 1px;
}
.input-group-text{
	padding-top: 5px;
  margin-top: 1px;
}
.input-group-text:hover{
  cursor: pointer;
}
input[readonly] {
  background-color: #eee;
  border: 1px solid #ccc;
  padding:2px 7px;
  border-radius: 2px;
}

#page{
	margin-bottom: 100px;
}
.title_page{
   font-size: 16px;
   margin-bottom: 20px;   
}
.title_page i{
  color: #4c97af;
  font-size: 16px;
  margin-right: 5px;
}
#niveau_password
{
    background-image: url("img/bg_password_score.jpg");
    background-repeat:repeat-y;
    background-position: 0 0;
    position:absolute;
    width: 100px;
    z-index: 0;
    border:1px solid black;
    text-align:center;
    margin-left:5px;
	width: 80px;
}

/*---------- Custom Checkbox ------------
/* Customize the label (the container) */
.container_checkmark {
  display: block;
  position: relative;
  padding-left: 24px;
  margin-bottom: 4px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container_checkmark.container_checkmark-right{
	padding-right: 24px;
}

/* Hide the browser's default checkbox */
.container_checkmark input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 17px;
  width: 17px;
  background-color: #eee;
}
.container_checkmark-right .checkmark{
	right: 0px;
	left: auto;
}

/* On mouse-over, add a grey background color */
.container_checkmark:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container_checkmark input:checked ~ .checkmark {
  background-color: #0056b3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container_checkmark input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container_checkmark .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media (min-width: 1200px){
	#listeClients.container {
		max-width: 2200px;
		width: 95%;
	}
}

.detail_bidon{
	white-space: nowrap;
}
.detail_bidon .fa-trash{
	color: #007bff;
}
.detail_bidon_hover:hover .fa-trash{
	color: #003399;
}
.detail_bidon_hover:hover{
	cursor: pointer;
}

.jbordScroll {
    height:480px;
    overflow-y: scroll;
}

.switch {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100px;
    height: 30px;
    font-size: 13px;
    cursor: pointer;
    top: 12px;
    left: 11px;
}
.switch-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.switch-label {
    position: absolute;
    top:  0px;
    bottom:  0px;
    left:  0px;
    right:  0px;
    display: block;
    height: inherit;
    background: red;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
    -webkit-transition: 0.15s ease-out;
    -moz-transition: 0.15s ease-out;
    -o-transition: 0.15s ease-out;
    transition: 0.15s ease-out;
    -webkit-transition-property: opacity background;
    -moz-transition-property: opacity background;
    -o-transition-property: opacity background;
    transition-property: opacity background;
}
.switch-label:before, .switch-label:after {
    position: absolute;
    top: 50%;
    margin-top: -.5em;
    line-height: 1;
    -webkit-transition: inherit;
    -moz-transition: inherit;
    -o-transition: inherit;
    transition: inherit;
}
.switch-label:before {
    content: attr(data-off);
    right: 5px;
    font-size:15px;
    color: white;
    text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
    content: attr(data-on);
    left: 9px;
    color: white;
    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
    font-size:15px;
    opacity: 0;
}
.switch-input:checked ~ .switch-label {
    background: #47a8d8;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
    opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
    opacity: 1;
}
.switch-handle {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 32px;
    height: 28px;
    background: white;
    border-radius: 1px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
    background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
    background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
    background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
    -webkit-transition: left 0.15s ease-out;
    -moz-transition: left 0.15s ease-out;
    -o-transition: left 0.15s ease-out;
    transition: left 0.15s ease-out;
}
.switch-handle:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 60%;
    margin: -6px 0px 0 -9px;
    width: 12px;
    height: 12px;
    background: #f9f9f9;
    border-radius: 6px;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
    background-image: -webkit-linear-gradient(top, #eeeeee, white);
    background-image: -moz-linear-gradient(top, #eeeeee, white);
    background-image: -o-linear-gradient(top, #eeeeee, white);
    background-image: linear-gradient(to bottom, #eeeeee, white);
}
.switch-input:checked ~ .switch-handle {
    left: 67px;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-green > .switch-input:checked ~ .switch-label {
    background: green;
}

.jBordMsg{
    width: 83%;
}
.jBordMsg .media-body div{
  padding:15px!important;
}

.bg-piscineABoules{
    background-color: #e6faff;
}

.iconJbord{
    color: #00ccff;
}
#jbordMessages .fa-times{
  font-size:16px;
}
#jbordMessages .fa-times:hover{
  cursor: pointer;
}
.signatureSpot{
    border: dashed black;
}
/*-------------------------------------
  Style label left and top
---------------------------------------*/
label{
  color: inherit;
  font-size:inherit;
  font-weight: 400;
}
/* label top*/
.form_lb_top .lb, .form_lb_top {
  width: 100%;
  min-width: 100px;
}
.form_lb_top .lb_check {
  margin-bottom: 5px;
}
.form_lb_top .field {
  padding-left: 0px;
}
/* Label left */
.form_lb_left .lb, .form_lb_left .lb_large, .form_lb_left .lb_xlarge, .form_lb_left .lb_small, .form_lb_left .lb_small_select, .form_lb_left .lb_check {
  display: inline-block;
  float: left;
  clear: both;
  color:inherit;
  margin-top: 1.5px;
  text-align: left;
}
.form_lb_right .lb, .form_lb_right .lb_large, .form_lb_right .lb_xlarge, .form_lb_right .lb_small, .form_lb_right .lb_small_select, .form_lb_right .lb_check {
  display: inline-block;
  float: left;
  clear: both;
  color:inherit;
  margin-top: 1.5px;
  text-align: right;
}
.field.check{
  margin-top:7px;
}
.field {
  padding-left: 120px;
}
.lb {
  width: 108px;
  text-align: middle;
}
/* smal*/
.field_small {
  padding-left: 82px;
}
.lb_small {
  width: 85px;
}
/* large*/
.field_large {
  padding-left: 165px;
    display: block; /* S'assurer que le conteneur prend toute la largeur */
    min-height: 38px;
}
.lb_large {
  width: 145px;
}
/* extra large*/
.field_xlarge {
  padding-left: 170px;
}
.lb_xlarge {
  width: 160px;
}
.lb_small.select, .lb.select, .lb_large.select, .lb_xlarge.select{
        margin-top: 5px;
}
.lb_small.check, .lb.check, .lb_large.check, .lb_xlarge.check{
        margin-top: 1px;

}
input, textarea, select, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"] {
  margin-top: 1px;}

.pdfSpot{
    position: absolute;
    animation-name: showPdfSpot;
    animation-duration: 0.5s;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: calc(100%);
    max-width: 840px;
    margin: 0px auto;
    z-index: 1500;
    background-color: white;
}

@keyframes showPdfSpot {
    from{top: 100%}
    to{top: 0%}
}

@keyframes hidePdfSpot {
    from{top: 0%}
    to{top: 100%}
}

#preview_letter_data{
    height: 100%;
    width: 100%;
}

.pdfViewerHeader{
    background-color: white;
    width: 100%;
    vertical-align: top;
    height: 30px;
    z-index: 1501;
    text-align: center;
    top: 0%;
    padding: 4px;
}

.pdfViewerCloseIcon{
    position: absolute;
    top: 2px;
    right: 3px;
    color: red;
}
/*------------------------------------
    Style input checkbox redio
 ------------------------------------*/
input[type='checkbox'], input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  height: 18px;
  border-radius: 2px;
  width: 18.5px;
  transition: all 0.1s ease-out 0s;
  background: #ffffff;
  border:1px solid #ccc;
  color: #fff;
  cursor: pointer;
  /*display: inline-block;*/
  outline: none;
  position: relative;
  /*z-index: 1000;*/
}
input[type='checkbox'], input[type='radio'] {
  height: 18px;
}
input[type='radio'] {
    height: 19px;
    width: 19px;
  }
input[type='checkbox']:hover, input[type='radio']:hover {
  background: #eee;
}
input[type='checkbox']:checked{
  background: #007bff;
  border:1px solid #007bff;
}
input[type='checkbox']:checked::before {
  content: '';
  position: absolute;
  left: 2.5px;
  top: 7px;
  background: #fff;
  width: 2px;
  height: 2px;
  box-shadow: 
      1px 0px 0px #fff,
      2px 0px 0px #fff,
      3px 0px 0px #fff,
      4px 0 0 #fff,
      5px 0 0 #fff,
      5px -1px 0 #fff,
      5px -2px 0 #fff,
      5px -3px 0 #fff,
      5px -4px 0 #fff,
      5px -5px 0 #fff,
      5px -6px 0 #fff,
      5px -7px 0 #fff,
      5px -8px 0 #fff,
      5px -9px 0 #fff;      
  transform: rotate(40deg);
}
input[type="checkbox"]:disabled {
  background-color: #ddd;
  border: 1px solid #ccc;
  color: #99a1a7;
}
input[type="checkbox"]:indeterminate {
  background: #fff;
  border:1px solid #007aa3;
}
input[type="checkbox"]:indeterminate::after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 21%;
  transform: translate(0, -50%);
  width: 60%;
  height: 11px;
  background: #007aa3;
}
input[type='radio']:checked{
  background: #007bff;
  border:1px solid #007aa3;
}
input[type='radio']:checked::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 7.5px;
  background: #fff;
  width: 2px;
  height: 2px;
  box-shadow: 
      1px 0px 0px #fff,
      2px 0px 0px #fff,
      3px 0px 0px #fff,
      4px 0 0 #fff,
      5px 0 0 #fff,
      5px -1px 0 #fff,
      5px -2px 0 #fff,
      5px -3px 0 #fff,
      5px -4px 0 #fff,
      5px -5px 0 #fff,
      5px -6px 0 #fff,
      5px -7px 0 #fff,
      5px -8px 0 #fff;
  transform: rotate(40deg);
}
input[type='radio'] {
  border-radius: 50%;
}
/*---------------------------
  Badge
-------------------------*/
.btn{
  padding:3px 12px;
}
/*---------------------------
  Badge
-------------------------*/
.badge{
  font-size: 12.5px;
  padding: 5px;
  font-weight: 500;
}
.badge-light{
  background-color: #ddd;
}
/*------------------------------------
    DropZone uplade
--------------------------------------*/
.nav-tabs{
  margin-left: 0px;
}
.nav-tabs li{
  background-color: #eee;
  border-radius: 3px;
  margin-left: -1px;
}
.nav-tabs li a{
  padding:7px 20px 7px 20px;
}
/*------------------------------------
    DropZone uplade
--------------------------------------*/
#dropzone, #bloc_signature{
  width: 100%;
  min-height: 35vh;
  background-color: #fcfcfc;
}
#editClient{
  min-height: 650px;
}
.bloc_btn{
  position: absolute;
  bottom: 30px;
}
#dropzone, #bloc_signature{
    border: 1px solid #fefefe;
    padding: 0px 5px 0px 5px;
    text-align: center;
    border-radius: 5px;    
    border-width: 1px;
    border: 2px dashed #ddd;
    text-align: left;
}
#filelist.table th{
  border-bottom: none;
}
#filelist .table .fa-fa-trash{
  font-size:10em;
  color: red;
  margin-top: 2px;
}
#filelist .fa.fa-trash:hover{
  cursor: pointer;
}
#dropzone.drag{
    border-color: #09C;
    background-color: #eee;
    border: 2px dashed #09C;
}
.blue-btn{
    margin-bottom: -30px;
    outline: none !important;
    padding: 15px 15px;
    text-align: center;
}

.blue-btn {
  background: #fff;
  border: solid 1px #27a9e0;/* #27a9e0 */
  color: #27a9e0; /* #27a9e0 */
  outline: none !important;
  width: 170px;
}
.blue-btn:hover,
.blue-btn:active,
.blue-btn:focus{
  background: #eee;
  color: #27a9e0; /* #27a9e0 */
  outline: none !important;
  cursor: pointer;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 3px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
.fileUpload {
  position: relative;
  overflow: hidden;
  height: 28px;
  margin-top: 0;
  line-height: 0px;
  padding:13px 0px 10px 0px;
}
.fileUpload input.uploadinput {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    width: 100%;
}
/*--------------------------------
  Plugin sweetalert
-------------------------------*/
.swal-overlay::before {
  height: 70%;
}
.swal-text{
  padding:0px 30px;
}
.swal-footer{
  text-align: center;
}
.swal-button{
  padding: 8px 25px;
  font-weight: normal;
  font-size: 14px;
}
.swal-button--confirm{
  background-color: #1e7e34;
}

.swal-button--cancel{
    margin-right: 30px;
}
.swal-button--cancel:hover{
    color: #000;
}
.swal-button--confirm:not([disabled]):hover {
  background-color: #348a48;
}

.swal-button--confirm.swal-button--danger{
  background-color: #dc3545;
}
.swal-button--confirm.swal-button--danger:not([disabled]):hover {
  background-color: #c82333;
}

@keyframes showSweetAlert {
   0% {
    transform: scale(0.5);
  }
 /* 40% {
    transform: scale(0.5);
  }*/

/*  45% {
    transform: scale(1.05);
  }*/

  60% {
    transform: scale(0.85);
  }

  100% {
    transform: scale(1);
  }
}
.checkbox-form{
    position: relative;
    top: 5px;
}
.native-input-date{
    border-radius: 4px;
    border: 1px solid #b5b5b5;
}
.table-km-between{
    position: relative;
    top: -17px;
}
.priorityClient{
    border: 1px solid red;
    background: rgba(255, 0, 0, 0.2) !important;
}
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.8); /* Couleur semi-transparente pour l'overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}
.phonecall{
    background-color: #ecc8ba;
    border: 1px solid #d36638;
}

/* Empêche la limitation de hauteur */
.multiselect {
    padding: 0px;
    box-sizing: border-box;
    min-height: 38px; /* Hauteur minimale */
    width: 100%;
    border: none;
}

/* Permet aux tags de passer à la ligne et d'étendre le champ */
.multiselect__tags {
    display: flex;
    flex-wrap: wrap;
    min-height: 38px !important; /* Maintient une hauteur minimale */
    padding: 5px;
}

/* Empêche le dropdown de se superposer et le force à être dans le flux */
.multiselect__content-wrapper {
    position: relative !important; /* Empêche le dropdown d’être absolu */
    z-index: 10; /* Garde le dropdown au-dessus si besoin */
}

/* Empêche le champ de se tasser si plusieurs lignes */
.multiselect__tags .multiselect__single,
.multiselect__tags .multiselect__tag {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    background: #007bff;
}

.col-sm-12.col-md-5 {
    display: block;
    overflow: visible;
}

/* Corrige le float-right ABSOLU qui bloque le déplacement des autres éléments */
.col-sm-12.col-md-4.float-right {
    position: relative !important; /* Permet au div de se déplacer normalement */
    float: right;
    width: auto; /* Permet d'éviter un blocage de hauteur */
}

/* Vérifie que le conteneur parent pousse bien le contenu */
.row.form_lb_left {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de se repositionner en cas d'expansion */
}

/* Au survol des éléments NON sélectionnés (actuellement verts) */
.multiselect__content .multiselect__option:not(.multiselect__option--selected):hover,
.multiselect__content .multiselect__option:not(.multiselect__option--selected).multiselect__option--highlight {
    background-color: #007bff !important; /* bleu vif */
    color: #ffffff !important;
}

/* Au survol des éléments DÉJÀ sélectionnés (actuellement rouges) */
.multiselect__content .multiselect__option.multiselect__option--selected:hover,
.multiselect__content .multiselect__option.multiselect__option--selected.multiselect__option--highlight {
    background-color: #80807e !important; /* orange vif */
    color: #ffffff !important;
}

/* Couleur des éléments sélectionnés sans survol (par défaut rouge actuellement) */
.multiselect__content .multiselect__option.multiselect__option--selected {
    background-color: #007bff !important; /* vert émeraude */
    color: #ffffff !important;
}

.multiselect__tag-icon {
    color: #007bff !important;
    background-color: #007bff !important;
}

/* ----- BORDURE & EN-TÊTES POUR LA LISTE DE MESSAGES (GAUCHE) ----- */
.msgFirst {
    border: 1px solid #ccc;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* on ne touche pas au bas ici */
    padding: 10px;
    margin: 0 !important;
    display: inline-block;
    width: 100%; /* plus de max-width fixe */
    position: relative;
    z-index: 1;
}

.msgNotFirst {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: none;
    border-radius: 0;
    padding: 10px;
    margin: 0 !important;
    display: inline-block;
    width: 100%;
    position: relative;
    z-index: 1;
}

.msgLast {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 10px;
    margin: 0 !important;
    display: inline-block;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* ----- PREVIEW DU MESSAGE (TEXTE TRONQUÉ) ----- */
.msgPreview {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 80%; /* ou ajustez en pourcent pour laisser de la place à l’icône éventuelle */
}

.msgRecipient {
    max-width: 100px; /* ou plus large si besoin */
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----- CONTENU DES LIGNES “FROM, TO, SUBJECT, ...” (DANS LA PARTIE DE DROITE) ----- */
.msgFieldText {
    display: block;
    max-width: 460px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}