.clear{
  clear: both;
}
.mr10{
  margin-right: 10px;
}
.mr5{
  margin-right: 5px;
}
.white{
  color:  white !important;
  text-decoration: none !important;
}
.color_red{
  color:  red !important;
}
.login-page {
  background: #282828;
}
.hidden {
    display: none;
}
.txt-right{
  text-align: right;
}
.red_circle {
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 12px;
  background: #ff0000;
  margin-left: auto;
  margin-right: auto;
}

.green_circle {
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 12px;
  background: #30b712;
  margin-left: auto;
  margin-right: auto;
}

.color_circle {
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 12px;
  margin-left: auto;
  margin-right: auto;
}
.color_circle:hover{
  cursor: help;
}
.hide{
  display: none;
}
.no_urgent{
  background:  #00C700;
}
.peu_urgent{
  background:  #7dd906;
} 
.normal_urgent{
  background:  #c7cb19;
} 
.urgent{
  background:  #ff7f00;
} 
.tres_urgent{
  background:  #ff0000;
} 

.no_urgent_border{
  border-left-color:  #00C700;
}
.peu_urgent_border{
  border-left-color:  #7dd906;
} 
.normal_urgent_border{
  border-left-color:  #c7cb19;
} 
.urgent_border{
  border-left-color:  #ff7f00;
} 
.tres_urgent_border{
  border-left-color:  #ff0000;
} 

.no_urgent_txt{
  color:  #00C700;
}
.peu_urgent_txt{
  color:  #7dd906;
} 
.normal_urgent_txt{
  color:  #c7cb19;
} 
.urgent_txt{
  color:  #ff7f00;
} 
.tres_urgent_txt{
  color:  #ff0000;
} 

.hint-text {
  font-size: 0.8em;
  font-style: italic;
  color: #869099;
}

.sortable-table .handle {
  cursor: move;
  display: inline-block;
  margin: 0 5px;
}

.card-header {
  background-color: #343a40;
  color: #fff;
}

.card-header.sub {
  background-color: #77838e;
  color: #fff;
}

.card-header.sub-sub {
  background-color: #b7c2cc;
  color: #fff;
}

.content-header .breadcrumb {
  font-size: 0.8em;
}
.card-bodys {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}
.red {
  color: red;
}
.bg_red{
  background-color:  #e52950 !important;
  color #fff; 
}
.main-footer {
  font-size: 0.8em;
}

.info_tips {
  font-size: 0.8em;
}

.alert_tips {
  font-size: 0.85em;
}

/*More link*/
a.morelink {
  text-decoration: none;
  outline: none;
}

.morecontent span {
  display: none;
}

.small-cstm-btn {
  width: 24px;
}

.comment.more {
  width: 350px;
  white-space: break-spaces;
}

.resident-image {}

.resident-image>img {

  height: 129px;
  width: 100px;
}

.card-body>.table>thead>tr>th {
  border-top-width: 1px !important;
}

.card-body>.table>thead>tr>th {
  border-bottom: 2px solid #77838e;
}

.btn-danger {
  color: #fff !important;
}

.btn-danger:hover {
  cursor: pointer;
}

.swal2-header {
  border-bottom: 0px solid #dee2e6;
}

.selectator_element {
  position: absolute !important;
}

.table td,
.table th {
  padding: .5rem;
}

.bg-normal {
  background-color: #49767c !important;
}

.bg-normal,
.bg-normal>a {
  color: #fff;
}

ul.nav-item {
  list-style: none;
  padding-left: 15px;
}

.bbg {
  border-bottom: 1px solid #4f5962;
}

.navbar-badge {
  right: 37px;
}

.widget-user-header {
  /*background-position: 920px center !important;*/
  transition: opacity 0.5s, background 0.5s;
  background-size: 250% !important;
}

.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}
.hover-card:hover{
  background: rgba(255, 255, 255, 0.1);
}
.file_type_big i{
  font-size: 60px;
}

blockquote.quote-dark-blue {
  border-left: .7rem solid #343a40;
}

#color-chooser .text-primary:hover,
#color-chooser .text-primary:focus{
	color: #007bff !important;
}
#color-chooser .text-warning:hover,
#color-chooser .text-warning:focus{
	color: #ffc107 !important;
}
#color-chooser .text-success:hover,
#color-chooser .text-success:focus{
	color: #28a745 !important;
}
#color-chooser .text-danger:hover,
#color-chooser .text-danger:focus{
	color: #dc3545 !important;
}
#color-chooser .text-info:hover,
#color-chooser .text-info:focus{
	color: #17a2b8 !important;
}
#color-chooser .text-orange:hover,
#color-chooser .text-orange:focus{
  color: #ff851b !important;
}
/* Indigo de l'agenda (Calypso/Transversal) : #b210f2 au lieu du #6610f2 d'AdminLTE */
.text-indigo{
  color: #b210f2 !important;
}
#color-chooser .text-indigo:hover,
#color-chooser .text-indigo:focus{
  color: #b210f2 !important;
}


#filter_calendar .text-muted:hover,
#filter_calendar .text-muted:focus{
  color: #3c4044 !important;
}
#filter_calendar .text-orange:hover,
#filter_calendar .text-orange:focus{
  color: #b75f17 !important;
}
#filter_calendar .text-indigo:hover,
#filter_calendar .text-indigo:focus{
  color: #7a0aa8 !important;
}


@media(min-width: 425px) {
  .widget-user-header {
    background-size: inherit !important;
  }
}

@media(min-width: 992px) {
  .widget-user-header {
    background-size: 250% !important;
  }

  .widget-user .widget-user-username {
    font-size: 22px;
  }

  .widget-user-desc {
    font-size: 1.10rem;
  }
}

@media(min-width: 1440px) {
  .widget-user-header {
    background-size: inherit !important;
  }

  .widget-user .widget-user-username {
    font-size: 22px;
  }

  .widget-user-desc {
    font-size: 1.10rem;
  }
}

.btn-category:hover .widget-user-header,
.btn-category:focus .widget-user-header {
  opacity: 0.5 !important;
}

@media print {
  body {
    font-size: 0.8rem;
  }

  .card-header,
  .card-body {
    margin: 0px;
    padding: 0px;
  }

  .card-body {
    page-break-inside: avoid !important;
  }

  .card {
    padding: 15px;
    border: 1px solid #969696;
  }
}

@media print {
  div {
    page-break-inside: avoid;
  }
}

.smaller_font .info-box .info-box-text {
  font-size: 0.9rem;
}

.fc-daygrid-event:hover{
  cursor: pointer;
}
.elevation-3{
  box-shadow: none !important;
}
.btn-tool {
    color: #343a40;
}
.file-listing .cat-details:hover{
  cursor: pointer;
}
.label-warning {
    color: #ff9d00;
    padding-left: 3px;
    padding-right: 3px;
}
.red_cross{
  color: red;
  margin-left: 5px;
}
#datatable_container,
#datatable_container_archi{
  display: none;
}
#loadercontainer,
#loadercontainer_archi{
  text-align: center;
  padding-top: 100px;
  padding-bottom: 100px;
}
.sidebar{
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.sidebar::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
.u_role{
  color: #C2C7D0;
  font-style: italic;
  white-space: normal;
  word-wrap: break-word;
}
.u_title{
  color: #C2C7D0;
  font-size: 0.8rem;
  white-space: normal;
  word-wrap: break-word;
}
#remove_date:hover{
  cursor: pointer;
}
.form-control.is-invalid {
    border-color: #dc3545 !important;
}
#ticket_response{
    background-color: #e9ecef;
    padding: 15px;
    margin-top: 15px;
}
.respond_needed{
  background-color: #fd7e14 !important;
  color: #fff !important;
}
.no_read{
  background-color: #19e5a9 !important;
  color: #fff !important;
}
.wating_validation{
  background-color: #ff005d !important;
  color: #fff !important;
}
.new_ticket{
  background-color: #007bff !important;
  color: #fff !important;
}

/* Fenêtres SweetAlert aux couleurs de l'interface (customClass: { popup: 'em-swal' }) :
   valeurs de la nouvelle interface (crf-v2.css) quand elle est active, sinon équivalents fixes */
.swal2-popup.em-swal{
  width: 26em;
  padding: 28px 28px 22px;
  border-radius: var(--em-radius, 12px);
  background: var(--em-card, #fff);
  color: var(--em-ink, #1f2430);
  box-shadow: 0 10px 40px rgba(31,36,48,.18);
  font-family: var(--em-font-body, inherit);
}
.swal2-popup.em-swal .swal2-header{ padding: 0; }
.swal2-popup.em-swal .swal2-icon{ display: none !important; }
.swal2-popup.em-swal .swal2-title{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--em-font-display, inherit);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--em-ink, #1f2430);
}
.em-swal-icon{
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--em-warn-soft, #fdf0dc);
  color: var(--em-warn, #a05f00);
  font-size: 22px;
}
.swal2-popup.em-swal .swal2-content{
  padding: 0;
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--em-muted, #5f6676);
}
.em-swal .swal2-content b{ color: var(--em-ink, #1f2430); }
.swal2-popup.em-swal .swal2-actions{ margin: 22px 0 0; }
.swal2-popup.em-swal .swal2-actions .btn{
  min-height: 40px;
  margin: 0 5px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.class_odd{
  background-color: rgba(0, 0, 0, 0.05);
  padding: 15px;
}
.class_even{
  padding: 15px;
}
.class_question{
  background-color: #fffccb !important;
  padding: 15px;
}
.comment_private{
  opacity: 0.5;
}

.comment_private_more{
  opacity: 0.7;
}

/* Annuaire : numéros cliquables dans les en-têtes colorés et l'extension directe (texte blanc) */
.annuaire-bloc-header a.annuaire-tel,
.annuaire-entete .extension a.annuaire-tel{ color: inherit; text-decoration: none; }
/* Numéros cliquables de l'annuaire : jamais soulignés, même au survol */
.annuaire-bloc a[href^="tel:"], .annuaire-entete a[href^="tel:"]{ text-decoration: none !important; }

/* =====================================================================
   Tickets : affichage mobile et tablette, classique et nouvelle interface
   - < 1200 px (tablette et mobile) : tableaux (.ticket-table) affichés en cartes, une carte par ticket
     (2 colonnes sur tablette, 1 colonne sur mobile)
   - < 768 px (mobile) : en-têtes de carte (.ticket-card-header) titre puis boutons,
     recherche / filtre / pagination pleine largeur, widget d'urgence adaptable
   ===================================================================== */
@media (max-width: 1199.98px){
  /* Tableaux de tickets en cartes */
  .ticket-table, .ticket-table tbody{ display: block; width: 100% !important; border: 0; }
  .ticket-table thead{ display: none; }
  .ticket-table tr{
    display: flex; flex-wrap: wrap; align-items: center;
    border: 1px solid rgba(0,0,0,.15); border-radius: 8px;
    margin-bottom: 10px; padding: 8px 10px;
  }
  .ticket-table td{ display: block; border: 0 !important; padding: 1px 0 !important; width: 100%; font-size: .8rem; }
  .ticket-table td[data-label]::before{ content: attr(data-label) " "; font-weight: 600; }
  .ticket-table td.tk-ref{ order: 1; width: auto; flex: 1 1 auto; font-weight: 700; font-size: .9rem; }
  .ticket-table td.tk-urgence{ order: 2; width: auto; margin-left: 8px; }
  .ticket-table td.tk-statut{ order: 3; width: auto; margin-left: 8px; }
  .ticket-table td.tk-statut center{ display: inline; }
  .ticket-table td.tk-titre{ order: 4; font-size: 1rem; font-weight: 600; margin: 2px 0 4px; overflow-wrap: anywhere; }
  .ticket-table td.tk-service{ order: 5; }
  .ticket-table td.tk-demandeur{ order: 6; }
  .ticket-table td.tk-date{ order: 7; }
  .ticket-table td.tk-maj{ order: 8; }
  .ticket-table td.tk-intervenant{ order: 9; }
  .ticket-table td.tk-actions{
    order: 10; width: 100% !important; text-align: left !important;
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
  }
  .ticket-table td.tk-actions .btn{ min-width: 40px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
}
/* Tablette : cartes sur 2 colonnes */
@media (min-width: 768px) and (max-width: 1199.98px){
  .ticket-table tbody{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ticket-table tr{ margin-bottom: 0; align-content: flex-start; }
}
@media (max-width: 767.98px){
  /* En-têtes de carte : titre pleine largeur, boutons en dessous (Retour en premier) */
  .ticket-card-header, .list-card-header{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .ticket-card-header::after, .list-card-header::after{ display: none; }
  .ticket-card-header .card-title, .list-card-header .card-title{ float: none; width: 100%; order: -2; margin-bottom: 2px; }
  .ticket-card-header .btn, .list-card-header .btn{ float: none !important; margin: 0 !important; }
  .ticket-card-header .ticket-btn-back{ order: -1; }

  /* Recherche et filtre : pleine largeur, empilés */
  .ticket-search, .ticket-filter{ float: none !important; width: 100%; margin-right: 0 !important; margin-bottom: 10px; }
  .ticket-filter{ display: flex; align-items: center; flex-wrap: nowrap; }
  .ticket-filter label{ flex: 0 0 auto; }
  .ticket-filter select{ width: 100% !important; flex: 1 1 auto; }

  /* Pagination : centrée, sur plusieurs lignes si besoin */
  .ticket-pagination{ float: none !important; margin: 0 !important; flex-wrap: wrap; justify-content: center; }
  .ticket-pagination .page-link{ padding: .3rem .6rem; }
  .dataTables_wrapper .dataTables_paginate .pagination{ justify-content: center !important; flex-wrap: wrap; }
  .dataTables_wrapper .dataTables_info{ white-space: normal !important; text-align: center; }

  /* Boutons « Répondre » / « Ajouter une réponse » au-dessus des réponses */
  .ticket-callout-btn{ float: none !important; display: block; width: 100%; margin-bottom: 10px; }

  /* Détail et gestion : moins de marges imbriquées, textes longs coupés */
  .ticket-detail .callout{ padding: .75rem; }
  .ticket-detail dd, .ticket-detail dt{ overflow-wrap: anywhere; }
  #ticket_response, .class_odd, .class_even, .class_question{ padding: 10px; }
  .modal-body .modal-body{ padding: 0; }

  /* Widget d'urgence (jQuery Bar Rating, thème bars-movie) : 5 barres sur toute la largeur */
  .br-theme-bars-movie .br-widget{ white-space: normal; display: flex; flex-wrap: wrap; height: auto; }
  .br-theme-bars-movie .br-widget a{ float: none; width: auto; flex: 1 1 0; }
  .br-theme-bars-movie .br-widget .br-current-rating{ flex-basis: 100%; width: auto; }
}

/* =====================================================================
   Listes génériques (.list-table) : affichage en cartes sur mobile et tablette
   (même principe que les tickets ; utilisé par users_crf_gestion.php)
   - .lt-title  : en tête de carte, en gras (ex. nom puis prénom)
   - .lt-badge  : à droite de la première ligne
   - .lt-info   : lignes d'information, préfixées par data-label (masquées si vides)
   - .lt-actions : boutons en bas de carte
   ===================================================================== */
@media (max-width: 1199.98px){
  .list-table, .list-table tbody{ display: block; width: 100% !important; border: 0; }
  .list-table thead{ display: none; }
  .list-table tr{
    display: flex; flex-wrap: wrap; align-items: center;
    border: 1px solid rgba(0,0,0,.15); border-radius: 8px;
    margin-bottom: 10px; padding: 8px 10px;
  }
  .list-table td{ display: block; border: 0 !important; padding: 1px 0 !important; width: 100%; font-size: .8rem; overflow-wrap: anywhere; white-space: normal !important; }
  .list-table td[data-label]::before{ content: attr(data-label) " "; font-weight: 600; }
  .list-table td.lt-title{ order: -2; width: auto; font-size: 1rem; font-weight: 700; margin: 0 5px 4px 0; }
  .list-table td.lt-badge{ order: -1; width: auto; margin-left: auto; }
  .list-table td.lt-info{ order: 1; }
  .list-table td.lt-info:empty{ display: none; }
  .list-table td.lt-actions{
    order: 2; width: 100% !important; text-align: left !important;
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
  }
  .list-table td.lt-actions .btn{ margin: 0 !important; min-height: 36px; display: inline-flex; align-items: center; gap: 5px; }
  /* En-tête de la liste : titre pleine largeur, boutons en dessous sur une ligne */
  .list-card-header{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .list-card-header::after{ display: none; }
  .list-card-header .card-title{ float: none; width: 100%; order: -2; margin-bottom: 2px; }
  .list-card-header .btn{ float: none !important; margin: 0 !important; }
}
@media (min-width: 768px) and (max-width: 1199.98px){
  .list-table tbody{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .list-table tr{ margin-bottom: 0; align-content: flex-start; }
}

/* =====================================================================
   Champ de recherche avec la loupe à droite (bouton qui lance la recherche)
   <div class="search-field"><input class="form-control"><button class="search-field-btn">…</button></div>
   Utilisé par search.php et users_crf_gestion.php (couleur v2 : crf-v2.css)
   ===================================================================== */
.search-field{ position: relative; }
.search-field .form-control{ height: 44px; padding-right: 52px; }
.search-field-btn{
  position: absolute; top: 1px; bottom: 1px; right: 1px; z-index: 2; width: 43px; /* hauteur du champ, même si les étiquettes passent sur 2 lignes */
  border: 0; border-radius: 0 .25rem .25rem 0; cursor: pointer; display: grid; place-items: center;
  background-color: var(--b-bg, #007bff); color: var(--b-fg, #fff);
}
.search-field-btn:hover, .search-field-btn:focus-visible{ filter: brightness(.95); }