/* =======================
   Police Globale et Base
   ======================= */
.html {
    font-family: var(--awb-fusion-font-family-typography);
    font-style: var(--awb-fusion-font-style-typography);
    font-weight: var(--awb-fusion-font-weight-typography);
    text-transform: var(--awb-text-transform);
    font-size: 100%;
    letter-spacing: 0.1px;
    transition: all 50ms ease;
    line-height: 1.6;
}

:root {
    --color-brand:  #53565a;
}

/* =======================
   Boutons
   ======================= */
.Header__homeContent .Header__searchSection {
    padding: 10rem 0;
    display: block;
}

@media (max-width: 768px) {
    .Header__homeContent .Header__searchSection {
        padding: 6rem 0;
    }
}

.Header__name {
	display:none
}

.Header__logo img {
    zoom: 1.5; 
    max-width: 100%; 
    height: auto; 
    width: auto; 
    min-width: 7rem;
    display: block;
  	margin-top:-0.2rem;
    /*object-fit: contain;*/ 
}


.Header__globalSearch {
    opacity: 0.7;
}

.Header__homeNavbarFixed .Header__menu, .Header__homeNavbarFixed .Header__menu:after, .Header__homeNavbarFixed .Header__menu:before {
    background-color: #53565a;
    color: #53565a;
}

.Header__homeNavbarFixed .Header__navbar .Header__globalSearchAlt {
    max-width: 600px;
}

.Header__menu, .Header__menu:after, .Header__menu:before {
    display: block;
    content: '';
    width: 1.875rem;
    height: 2px;
    background-color: #53565a;
    -webkit-transition: all .2s 
ease;
    -o-transition: all .2s ease;
    transition: all .2s 
ease;
}

#addTicketButton {
    background-color: #53565a;
	font-size:1rem;
    border: 1px solid #53565a;
    color: white;
    padding: 8px 8px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
}
#addTicketButton:hover {
    background-color: #ffff;
	color: #53565a;
   border: 1px solid #53565a;
}

.Header__tabsTab.Header__active,
.LoginDetail__signin.LoginDetail__active,
.LoginDetail__signup.LoginDetail__active {
    color: #53565a;
    border-bottom: 2px solid #53565a !important;
}

.Button__btnFont {
   font-family: var(--awb-fusion-font-family-typography);
}

/* Captcha bouton */
.HCNewCaptcha__captchaButtonActive {
    font-weight: 700;
    background-color: #53565a;
    font-size: large;
    border-color: transparent;
    color: #fff;
}

#mainContainer,#container{
 background-color: white;
}

.HCNewCaptcha__captchaButtonActive:hover {
    background-color: #c1c6c8;
    color: #fff;
    font-weight: 700;
}

.Button__buttonCommon:last-child {
    font-size: large;
}

/* Date / Time boutons */
.DateTime__blueBut {
    background: #53565a;
    border: 1px solid #53565a;
    font-family: "Satoshi", sans-serif;
}

.DateTime__blueBut:hover {
    background: #53565a;
    border: 1px solid #53565a;
    color: #fff;
}

.blue,
.blue#nextbtn {
    background-color: #53565a !important;
    color: #fff;
}

.DateTime__today {
    background: #53565a;
}

.DateTime__today:hover {
    background: #c1c6c8;
}

.DateWidget__dateFocus {
    border-bottom: 1px solid #53565a;
}

.DateWidget__date:hover {
    border-bottom: 1px solid #53565a;
}

.zsiq_flt_rel {
    background-color: #53565a !important;
}

.commonStyle__zt3buttonPrimaryBg {
    font-size: larger;
 	background-color: #53565a;
}

.commonStyle__zt3buttonSecondaryText {
    font-size: larger;
    padding:8px
}
.commonStyle__zt3BrandBg {
    background-color: #53565a;
    border: solid 1px;
    border-color: white;
}

/* =======================
   Header - Content & Search Titles multi-lang
   ======================= */
h2.Header__searchTitle {
    margin-top: 4rem;
}

@media (max-width: 768px) {
    h2.Header__searchTitle {
        margin-top: 2rem;
    }
}

.en .Header__name,
.fr-ca .Header__name {
 font-size: 0; 
}

.en .Header__name::before,
.fr-ca .Header__name::before {
    font-size: 1rem;
    color:#53565a;
}

.en .Header__name::before {
    content: "Tenant portal - Jutras";
}

.fr-ca .Header__name::before {
    content: "Portail Résident - Jutras";
} 

/* Texte plus court sur mobile */

/* Pour adapter uniquement en mobile (exemple < 768px) */
@media (max-width: 768px) {
    .Header__name::before {
    font-size: 0.4em;
    color:#53565a
    }
}

/* Texte plus court sur mobile avec hauteur max de 8px */
 
@media (max-width: 768px) {
  .en .Header__name::before {
      content: "Tenant";
  }

  .fr-ca .Header__name::before {
      content: "Rédident";
  }
}
@media only screen and (max-width: 1024px) {
    .en .Header__name::before,
    .fr-ca .Header__name::before,
    .en .Header__searchTitle::before,
    .fr-ca .Header__searchTitle::before {
        font-size: 1rem;
    }
}

@media only screen and (max-width: 1024px) {
    .en .Header__tabs__link::before,
    .fr-ca .Header__tabs__link::before,
     {
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 1024px) {
    .Header__homeContent .Header__navbar, .Header__defaultContent .Header__navbar, .Header__navopen .Header__navbar .Header__menuTab {
        background-color: #fff;
    }
}

.fr-ca .Header__description{
font-size: 0; 
}

.fr-ca .Header__description::before{
font-size: 1rem; 
}

.fr-ca .Header__description::before{
content: "Rechercher des articles dans 'Infos' ou soumettre une demande de service."; 
}

.fr-ca #Cases_tab{
font-size: 0; 
}

.fr-ca #Cases_tab::before{
font-size: 1rem; 
}

.fr-ca #Cases_tab::before{
content: "Mes demandes"; 
}

.en #Cases_tab{
font-size: 0; 
}

.en #Cases_tab::before{
font-size: 1rem; 
}

.en #Cases_tab::before{
content: "My Requests"; 
}

.en .Header__description{
font-size: 0; 
}

.en .Header__description::before{
font-size: 1rem; 
}

.en .Header__description::before{
content: "Search for articles in 'Infos' or submit a service request."; 
}

.en .Header__searchTitle,
.fr-ca .Header__searchTitle {
    font-size: 0;
}

.en .Header__searchTitle::before,
.fr-ca .Header__searchTitle::before {
    font-size: 2.25rem;
}

.en .Header__searchTitle::before {
    content: "Welcome to your Tenant Area Jutras";
}

.fr-ca .Header__searchTitle::before {
    content: "Bienvenue dans votre espace résident Jutras";
}


.fr-ca .TicketDetailRightContainer__widgetSection button{
 font-size: 0; 
}

.fr-ca .TicketDetailRightContainer__widgetSection button::before {
    font-size: 1rem;
}

.fr-ca .TicketDetailRightContainer__widgetSection button::before {
    content: "Ajouter une demande";
}


.fr-ca .CloseTicketPopup__closeBtn button{
 font-size: 0; 
}

.fr-ca .CloseTicketPopup__closeBtn button::before {
    font-size: 1rem;
}

.fr-ca .CloseTicketPopup__closeBtn  button::before {
    content: "Fermer la demande";
}

.fr-ca #title_field_classification{
 font-size: 0; 
}

.fr-ca #title_field_classification::before {
    font-size: 1rem;
  	 content: "Type de demande *";
}

.en #title_field_classification{
 font-size: 0; 
}

.en #title_field_classification::before {
    font-size: 1rem;
  	 content: "Request Type";
}

/* =======================
   Couleurs & Marques (ZT3 Brand)
   ======================= */
.commonStyle__zt3BrandBg {
    background-color: #53565a;
}

.commonStyle__zt3BrandBg:hover {
    background-color: #c1c6c8;
    color: #53565a;
}

.commonStyle__zt3Brand {
    color: #c1c6c8;
    font-size: large;
}

.commonStyle__zt3BrandBorder {
    border-color: transparent;
}

.BreadCrumbs__breadcrumbsView {
  color:  #53565a;
}

/* MultiSelect focus */
.MultiSelect__suggestionFocus {
    color: #c1c6c8;
}

/* Liens utilisateur FileUpload */
.commonStyle__zt3Brand .FileUpload__userLink {
    color: #c1c6c8;
    font-size: x-large;
}

.FileUpload__attachPin .commonStyle__zt3BrandBorder {
    font-size: large;
}

.FileUpload__attachPin .commonStyle__zt3BrandBorder .Icon__small {
    width: 1.5rem;
    height: 1.5rem;
}

/* =======================
   Icônes
   ======================= */
.Icon__brand {
    color: #53565a;
}

/* =======================
   Liens (animés)
   ======================= */
a.icon-link img {
    transition: transform 0.3s ease;
}

a.icon-link:hover img {
    transform: scale(1.2);
}

/* =======================
   Navbar Container
   ======================= */


/*============================
	Layout Column
============================*/

/* Base commune pour les conteneurs */
.Layout__oneColumn,
.Layout__twoColumn,
.Layout__twoColumn2,
.Layout__twoColumnReverse {
  padding-top: 8rem !important;
  max-width: 1170px;       
  width: 100%;             
  margin: 0 auto;         
  min-height: 75vh;
  padding: 2.125rem 1rem 3.125rem; 
  box-sizing: border-box;  
  background-color: white;
  transition: max-width 200ms ease;
}

/* Mobile : mode colonne (empilement) */
@media (max-width: 768px) {
  .Layout__oneColumn,
  .Layout__twoColumn,
  .Layout__twoColumn2,
  .Layout__twoColumnReverse {
    display: block;       
    padding-left: 1rem;  
    padding-right: 1rem;
  }
}

/* Écrans moyens et larges >= 769px : flex en ligne */
@media (min-width: 769px) {
  .Layout__twoColumn,
  .Layout__twoColumnReverse,
  .Layout__twoColumn2 {
    display: flex;
    flex-direction: row;         
  }
}

/* Très grands écrans > 1440px par exemple */
@media (min-width: 1440px) {
  .Layout__oneColumn,
  .Layout__twoColumn,
  .Layout__twoColumn2,
  .Layout__twoColumnReverse {
    max-width: 1400px;   
  }
}

/*================================
App Container, endroit ou la barre de
 recherche s'affiche
=================================*/
.AppContainer__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; 
    padding: 11px 0.9375rem;   
    max-width: 88rem;       
    width: 90%;             
    margin: 0 auto;             
    box-sizing: border-box;      
    transition: all 200ms ease;
}

/* Adaptation aux très grands écrans */
@media (min-width: 1440px) {
    .AppContainer__container {
        max-width: 1400px;   
    }
}

/* Optionnel : réduire les paddings sur mobile pour plus d’espace */
@media (max-width: 480px) {
    .AppContainer__container {
        padding: 10px 0.5rem;
    }
}

.Header__container {   
    max-width: 88rem;   
}

.Header__homeNavbarFixed .Header__navbar .Header__container {
    position: relative;
    background-color: #53565a;
}

/* Fixer le navbar  */
#navBarContainer {
    width:100%;
    max-width:100%;
    justify-content: space-between;
    position: fixed;
    background-color: #ffff;
    color:#53565a
}

.LocalePopup__localeText {
    font-size: 1rem; 
    margin-left: auto; 
    display: flex;
    align-items: center; 
    cursor: pointer; 
}

@media only screen and (max-width: 1024px) {
    .Header__homeNavbarFixed .Header__navbar .Header__name {
        color:  #53565a;
    }
}

.globalfixednav .globalLocalText {
    line-height: 3.35rem;
    color:  #53565a;
}

/*Surplus*/
.BreadCrumbs__breadcrumbsView ul li:last-child {
    color: white;
}

.commonStyle__zt3breadCrumbBg {
    background: #454545;
  	display:none
}
.commonStyle__zt3breadCrumbText {
    color:  #53565a;
}

/* =======================
   Locale Popup (Langues)
   ======================= */
.en .LocalePopup__localeText,
.fr-ca .LocalePopup__localeText {
    font-size: 0;
}

.en .LocalePopup__localeText::before,
.fr-ca .LocalePopup__localeText::before {
    font-size: 1rem;
}

.en .LocalePopup__localeText::before {
    content: "EN";
}

.fr-ca .LocalePopup__localeText::before {
    content: "FR";
}

@media only screen and (max-width: 1024px) {
    .en .LocalePopup__localeText::before,
    .fr-ca .LocalePopup__localeText::before {
        font-size: 1rem;
    }
}

/* =======================
   Divers / Personnalisations spécifiques
   ======================= */
#parentContainer{
	margin-top:1.5rem
}

#ticket_module .ContentBox__boxInnerHome p {
    color: transparent; 
    position: relative;
}

.fr-ca #ticket_module .ContentBox__boxInnerHome p::after {
    content: "Afficher les demandes précédentes; connaître le statut et la solution.";
    color: #000; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.en #ticket_module .ContentBox__boxInnerHome p::after {
    content: "View your previous requests; know their statuses and solutions.";
    color: #000; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}


.CustomizeContainer__aPlus {
    display: none;
}

.fr-ca .TicketFormLeftContainer__formTitle {
    font-size: 0;
}

.fr-ca .TicketFormLeftContainer__formTitle::before {
    font-size: 2rem;
    content: "Soumettre une demande";
}

.en .TicketFormLeftContainer__formTitle {
    font-size: 0;
}

.en .TicketFormLeftContainer__formTitle::before {
    font-size: 2rem;
    content: "Submit a request";
}

/* 1. Cacher le texte d'origine en mettant la taille à 0 */
.fr-ca a[data-id="addticket"] button {
  font-size: 0 !important;    
  position: relative;
  padding: 8px 16px;           
}

/* 2. Ajouter le nouveau texte via pseudo-élément ::before */
.fr-ca a[data-id="addticket"] button::before {
  content: "Ajouter une demande";
  font-size: 1rem !important;       
}

.en a[data-id="addticket"] button {
  font-size: 0 !important;    
  position: relative;
  padding: 8px 16px;           
}

.en a[data-id="addticket"] button::before {
  content: "Add request";
  font-size: 1rem !important;       
}

*================================
Gestion Multilingue de bouton dans 
Le Header et textes dans le sidebar user
=================================*/

html[lang="fr-CA"] #addTicketButton.fr-ca {
  display: inline-block;
}

html[lang="fr-CA"] #addTicketButton.en {
  display: none;
}

html[lang="en"] #addTicketButton.en {
  display: inline-block;
}

html[lang="en"] #addTicketButton.fr-ca {
  display: none;
}

.TicketFormLeftContainer__sectionName.Informations_Billet {
    font-size: 0;          
    position: relative;    
}

.fr-ca .TicketFormLeftContainer__sectionName.Informations_Billet::before {
    content: "Informations sur la demande";  
    font-size: 1rem;    
    color: inherit;     
    position: relative;
    display: inline-block;
}

.en .TicketFormLeftContainer__sectionName.Informations_Billet::before {
    content: "Request Informations";  
    font-size: 1rem;    
    color: inherit;     
    position: relative;
    display: inline-block;
}

.fr-ca a[data-id="addticket"] button {
  font-size: 0 !important;    
  position: relative;
  padding: 8px 16px;           
}

.fr-ca a[data-id="addticket"] button::before {
  content: "Ajouter une demande";
  font-size: 1rem !important;       
}

.en a[data-id="addticket"] button {
  font-size: 0 !important;    
  position: relative;
  padding: 8px 16px;           
}

.en a[data-id="addticket"] button::before {
  content: "Add request";
  font-size: 1rem !important;       
}

.fr-ca a[data-id="My Tickets_views_filter_item"] {
  font-size: 0;          
  position: relative;    
}

.fr-ca a[data-id="My Tickets_views_filter_item"]::before {
  content: "Infos sur mes demandes";  
  font-size: 1rem;            
  pointer-events: none;      
}

.en a[data-id="My Tickets_views_filter_item"] {
  font-size: 0;          
  position: relative;    
}

.en a[data-id="My Tickets_views_filter_item"]::before {
  content: "Infos about my requests";  
  font-size: 1rem;            
  pointer-events: none;      
}

.fr-ca a[data-id="My Open Tickets_views_filter_item"] {
  font-size: 0;           
  position: relative;     
}

.fr-ca a[data-id="My Open Tickets_views_filter_item"]::before {
  content: "Demande(s) ouvert";  
  font-size: 1rem;
  pointer-events: none;         
}

.en a[data-id="My Open Tickets_views_filter_item"] {
  font-size: 0;           
  position: relative;     
}

.en a[data-id="My Open Tickets_views_filter_item"]::before {
  content: "Open Request(s)";  
  font-size: 1rem;
  pointer-events: none;         
}

.fr-ca a[data-id="My Closed Tickets_views_filter_item"] {
  font-size: 0;           
  position: relative;     
}

.fr-ca a[data-id="My Closed Tickets_views_filter_item"]::before {
  content: "Demande(s) clos";  
  font-size: 1rem;
  pointer-events: none;         
}

.en a[data-id="My Closed Tickets_views_filter_item"] {
  font-size: 0;           
  position: relative;     
}

.en a[data-id="My Closed Tickets_views_filter_item"]::before {
  content: "Closed Request(s) ";  
  font-size: 1rem;
  pointer-events: none;         
}

.fr-ca a[data-id="My On Hold Tickets_views_filter_item"] {
  font-size: 0;           
  position: relative;     
}

.fr-ca a[data-id="My On Hold Tickets_views_filter_item"]::before {
  content: "Demande(s) en attente";  
  font-size: 1rem;
  pointer-events: none;          
}

.en a[data-id="My On Hold Tickets_views_filter_item"] {
  font-size: 0;           
  position: relative;     
}

.en a[data-id="My On Hold Tickets_views_filter_item"]::before {
  content: "Pending Request(s)";  
  font-size: 1rem;
  pointer-events: none;          
}

.fr-ca a[data-id="My Overdue Tickets_views_filter_item"] {
  font-size: 0;           
  position: relative;     
}

.fr-ca a[data-id="My Overdue Tickets_views_filter_item"]::before {
  content: "Demande(s) en souffrance";  
  font-size: 1rem;
  pointer-events: none;         
}

.en a[data-id="My Overdue Tickets_views_filter_item"] {
  font-size: 0;           
  position: relative;     
}

.en a[data-id="My Overdue Tickets_views_filter_item"]::before {
  content: "Overdue Request(s)";  
  font-size: 1rem;
  pointer-events: none;         
}


.fr-ca .NoContent__contentDescription .modulesname {
  font-size: 0;       
  position: relative;
}

.fr-ca .NoContent__contentDescription .modulesname::before {
  content: "Demandes";
  font-size: 1.4rem;
  color: inherit;
  position: relative;
  white-space: nowrap;
}

.en .NoContent__contentDescription .modulesname {
  font-size: 0;       
  position: relative;
}

.en .NoContent__contentDescription .modulesname::before {
  content: "Requests";
  font-size: 1.4rem;
  color: inherit;
  position: relative;
  white-space: nowrap;
}


.fr-ca .NoContent__contentDescription a#tickets_newLink {
  font-size: 0;       
  position: relative;
}

.fr-ca .NoContent__contentDescription a#tickets_newLink::before {
  content: "Demande";
  font-size: 1rem;
  color: inherit;
  padding-right:3px;
  position: relative;
  white-space: nowrap;
}

.en .NoContent__contentDescription a#tickets_newLink {
  font-size: 0;       
  position: relative;
}

.en .NoContent__contentDescription a#tickets_newLink::before {
  content: "Request";
  font-size: 1rem;
  color: inherit;
  padding-right:3px;
  position: relative;
  white-space: nowrap;
}

/* Cacher le texte d'origine */
.fr-ca .My_Tickets span {
  visibility: hidden;
  position: relative;
}


.fr-ca .My_Tickets span::after {
  content: "Infos sur mes Demandes de service";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
}


/*Value on selected Mobile*/
.fr-ca .DropDown_selectedText [data-id="views_filter_item_mobile_Mon Billets ouvert"]{
	visibility: hidden;
    position: relative;
}
.fr-ca .DropDown_selectedText [data-id="views_filter_item_mobile_Mon Billets ouvert"]{
	content: "Demande(s) ouvert";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}

.en.DropDown_selectedText [data-id="views_filter_item_mobile_Mon Billets ouvert"]{
	visibility: hidden;
    position: relative;
}
.en .DropDown_selectedText [data-id="views_filter_item_mobile_Mon Billets ouvert"]{
	content: "Request(s) opened";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}

.fr-ca .DropDown_selectedText [data-id="views_filter_item_mobile_Mon(ma) En attente Billets"]{
	visibility: hidden;
    position: relative;
}
.fr-ca .DropDown_selectedText [data-id="views_filter_item_mobile_Mon(ma) En attente Billets"]{
	 content: "Demande(s) en attente";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}

.en .DropDown_selectedText [data-id="views_filter_item_mobile_Mon(ma) En attente Billets"]{
	visibility: hidden;
    position: relative;
}
.en .DropDown_selectedText [data-id="views_filter_item_mobile_Mon(ma) En attente Billets"]{
	 content: "Request(s) on hold";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}

.fr-ca .DropDown_selectedText [data-id="views_filter_item_mobile_Mes Billets clos"]{
	visibility: hidden;
    position: relative;
}
.fr-ca .DropDown_selectedText [data-id="views_filter_item_mobile_Mes Billets clos"]{
    content: "Demande(s) clos";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}
.en .DropDown_selectedText [data-id="views_filter_item_mobile_Mes Billets clos"]{
   visibility: hidden;
   position: relative;
}
.en .DropDown_selectedText [data-id="views_filter_item_mobile_Mes Billets clos"]{
    content: "Request(s) closed";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}

.fr-ca .DropDown__selectedText [data-id="views_filter_item_mobile_My Overdue Tickets"]{
    visibility: hidden;
    position: relative;
}
.fr-ca .DropDown__selectedText [data-id="views_filter_item_mobile_My Overdue Tickets"]{
    content: "Demande(s) en souffrance";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}
.en .DropDown__selectedText [data-id="views_filter_item_mobile_My Overdue Tickets"]{
    visibility: hidden;
    position: relative;
}
.en .DropDown__selectedText [data-id="views_filter_item_mobile_My Overdue Tickets"]{
    content: "My Overdue Request(s)";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}


.fr-ca .My_Open_Tickets span {
  visibility: hidden;
  position: relative;
}

/* Injecter le nouveau texte */
.fr-ca .My_Open_Tickets span::after {
  content: "Demande(s) ouvert";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
}

.fr-ca .My_Closed_Tickets span {
  visibility: hidden;
  position: relative;
}

.fr-ca .My_Closed_Tickets span::after {
  content: "Demande(s) clos";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
}

.fr-ca .My_On_Hold_Tickets span {
  visibility: hidden;
  position: relative;
}

.fr-ca .My_On_Hold_Tickets span::after {
  content: "Demande(s) en attente";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
}
.fr-ca .My_Overdue_Tickets span {
  visibility: hidden;
  position: relative;
}

.fr-ca .My_Overdue_Tickets span::after {
  content: "Demande(s) en souffrance";
  visibility: visible;
   position: absolute;
  left: 0;
  top: 0;
}

.fr-ca [data-id="views_filter_item_mobile_Mon(ma) Billets"] {
  visibility: hidden;
  position: relative;
}

.fr-ca [data-id="views_filter_item_mobile_Mon(ma) Billets"]::after {
  content: "Mes Demandes";
  visibility: visible;
}

.fr-ca [data-id="ticket_module"] {
  visibility: hidden;
  position: relative;
}

.fr-ca [data-id="ticket_module"]::after {
  content: "Demande de services";
  visibility: visible;
}

.en [data-id="ticket_module"] {
  visibility: hidden;
  position: relative;
}

.en [data-id="ticket_module"]::after {
  content: "Demand for services";
  visibility: visible;
}

.fr-ca .Informations_Billet{
 font-size: 0; 
}

.fr-ca .Informations_Billet::before {
    font-size: 1rem;
}

.fr-ca .Informations_Billet::before {
    content: "Informations sur ma demande de service";
}


.fr-ca .ListHeader__header1{
 font-size: 0; 
}

.fr-ca .ListHeader__header1::before {
    font-size: 1rem;
}

.fr-ca .ListHeader__header1:before {
    content: "Propriétés de la demande";
}


/*================================
Désactiver le bouton footer et cacher le bg du footer
=================================*/
.LoginDetail__signup{
display:none !important
}
.Footer__footerBg {
background-color:transparent
}
.Footer__footerBtn{
display:none
}

/* Mettre le footer en bas */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

.TicketList__header {
    margin-top: 1rem;
}

.commonStyle__widgetRight {
  margin-top: 1rem;
}

#mainContainer { 
  flex: 1;
}
.Footer__footerCopyrigt {
    margin-top: 5rem;
}
.Footer__footerCopyrigt {
    background-color: #c1c6c8;
    color: #53565a
}
.Footer__footerContent {
    display: none;
}

.Footer__container2 {
	display:none
}

/* =======================
   File upload
   ======================= */

.FileUpload__uploadInform {
    color: #53565a;
    font-size: large;
}

.FileUpload__userLink {
    margin-right: .625rem;
    font-size: large !important;
    color:#53565a;
}

.FileUpload__attachPin svg.Icon__icon {
  width: 2rem;
  height: 2rem;
}

.Field__attachMent {
  margin: 0 0 1rem 0;               
  border: 2px solid #c1c6c8 !important; 
  border-radius: 5px;               
  max-width: 375px;                 
  padding: 0.75rem 1rem;            
  background-color: #fff;        
  box-shadow: 0 2px 6px rgba(160, 134, 55, 0.3); 
  display: flex;
  text-align:center;
  align-items: center;                                 
  font-size: 1rem;                 
  color: #53565a;                 
  word-break: break-word;          
  cursor: default;                 
}

.FileUpload__positionRel::hover {
  background-color: #c1c6c8!important;                
}

/* Si une icône ou SVG est dans le conteneur */
.Field__attachMent svg,
.Field__attachMent .icon {
  width: 1.8rem;
  height: 1.8rem;
  color: #53565a;                  
  flex-shrink: 0;                 
}

/* Responsive pour petits écrans */
@media (max-width: 520px) {
  .Field__attachMent {
    max-width: 100%;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
  }
}

*================================
Conteneur d'image pour les Profils 
=================================*/
/* Style de l'avatar */
.LoginDetail__userAvatar > .Avatar__avatar > .Avatar__avatarImg {
  display: none !important;
}

.LoginDetail__userAvatar {
  width: 40px;
  height: 33px;
  border-radius: 50%;
  background-color: transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  color: #fff; 
  transition: color 0.3s ease;
}

.LoginDetail__userAvatar::before {
  content: '';
  display: block;
  width: auto;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11.2'/%3E%3Cpath d='M18 20v-2a3 3 0 0 0-3-3H9a3 3 0 0 0-3 3v2'/%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3C/svg%3E");
}

/* Tooltip "Profil" au survol */

.LoginDetail__userAvatar::after {
  content: "Profil";
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #c1c6c8;
  color: #00594F;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

/* Afficher la tooltip au survol */
.LoginDetail__userAvatar:hover::after {
  opacity: 1;
}

.Header__menuList {
  display: flex;
  align-items: center;
}

#logoutDetails {
  order: 2; 
}

.Header__tabsTab:last-child {
  order: 1; 
}
.LoginDetail__LogInDetail .LoginDetail__userAvatar{
  padding: 3px 5px;
  margin: 8px;
}
.ProfileLeftContainer__uploadContainer {
    z-index: 0;
}

.logInAvatar .Avatar__avatar{
	display:none
}

/*================================
Reduire la taille du captcha
=================================*/
.HCNewCaptcha__imageBox {
    height: 200px;
    width: 210px;
}

.HCNewCaptcha__captchaBox {
    width: 270px;
}

.zsiq_theme1.zsiq_floatmain {
    display: none !important;
}

.Signin__newuser{
 display:none
}

#field_priority{
 display:none
}

.WidgetContainer__boxSplit:first-child:last-child {
  width: 100%;
  margin-top: 2rem;
}

/*Cacher le bouton modif profil*/
a[data-id="my_edit_profile"]{
	display:none;
}

/*Bouton visiter le site Jutras*/
#visitSiteButton {
  color:  #6e7479;
  cursor: pointer;
  text-decoration: underline;
  margin-left: auto;
}

#visitSiteButton:hover {
  color: #53565a;
  text-decoration: underline;
}

#visitLink{
display: flex;
justify-content: center;
}

.fr-ca #visitSiteButton {
  font-size: 1rem;
  position: relative;
}

.fr-ca #visitSiteButton::before {
  content: "Visitez Jutras.com ➜";
  display: inline-block;
}

.en #visitSiteButton {
  font-size: 1rem;
  position: relative;
}

.en #visitSiteButton::before {
  content: " Visit Jutras.com ➜";
  display: inline-block;
}


/*================================
Proposition d'affichage du bouton Ajout de demande
=================================*/
/* Par défaut caché en desktop, visible en mobile */
.mobile-only {
  display: none !important;
}

/* Par défaut visible en desktop */
.desktop-only {
  display: block !important;
}

/* Media queries pour gérer affichage */
@media (max-width: 768px) {
    .mobile-only {
      display: block !important;
      text-align: center; 
      margin-top: 1rem;
    }
    .desktop-only {
      display: none !important;
    }
    #addTicketButton{
      background: #333;
      padding: 0.75rem 1.5rem;
      color:#ffffff;
      border-radius: 8px;
      border: 1px solid #ffffff;
      display: inline-flex;
      align-items: center;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.2s;
      margin-top:4rem;
    }
  	#visitSiteButton {
    background-color: #6e7479;
    color: white;
    text-decoration:none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: 1px solid #ffffff;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    margin-top:1rem;
	}
}

/* Par défaut, cacher les boutons pour tablette */
.tablet-only {
  display: none !important;
}

/* Cibler les tablettes (largeur entre 768px et 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .tablet-only {
    display: inline-flex !important;
    margin-left: 1rem;
    align-items: center;
  }
  
  /* Cacher les boutons dans le menu burger */
  .desktop-only {
    display: none !important;
  }
  .mobile-only {
    display: none !important;
  }
}

#visitLink.desktop-only {
  order: 99; 
  margin-left: 1.5rem; 
}

.Info__infoList.ticket_entityskills {
  display: none !important;
}
.Info__infoList.ticket_channel{
  display: none !important;
}
.ManageAccount__boxList div[data-id="location_label"],
.ManageAccount__boxList div[data-id="location_value"],
.ManageAccount__boxList div[data-id="timeZone_label"],
.ManageAccount__boxList div[data-id="timeZone_value"],
.ManageAccount__boxList div[data-id="timeFormat_label"],
.ManageAccount__boxList div[data-id="timeFormat_value"],
.ManageAccount__boxList div[data-id="dateFormat_label"],
.ManageAccount__boxList div[data-id="dateFormat_value"],
.ManageAccount__profileHeadTitle.ManageAccount__profileTitle{
  display: none !important;
}

/*En attente de validation*/
/*#title_field_description::before {
  content: "ⓘ"; 
  font-weight: bold;
  color: #777; 
  margin-left: 0.3em;
  padding-right:0.3em;
}

#title_field_description {
  position: relative;
  cursor: help;
}
/*
#title_field_description::after {
  content: "ⓘ S'il s'agit d'une plainte visant d'autres résidents, veuillez inscrire leur adresse complète";
  visibility: hidden;
  opacity: 0;
  max-width: 400px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 8px;
  padding: 5px 8px;
  position: absolute;
  left: 20%;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s;
  pointer-events: none;
  white-space: normal;
  word-wrap: break-word;
  z-index: 10;
}*/
/*
#title_field_description:hover::after {
  visibility: visible;
  opacity: 1;
}
*/

/*Modification du texte dans la connexion*/
.Signin__loginTitle {
  color: transparent; 
  position: relative;
}

.Signin__loginTitle::after {
  content: "Vous avez déjà un compte ? ";
  color: initial; 
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 48em) {
    .FormElement__alertTooltip {
        display: block;
    }
}

#field_facebook,
#field_twitter {
  display: none;
}

.EditProfileContainer__profileHeadTitle.EditProfileContainer__profileTitle {
  display: none;
}

.EditProfileContainer__boxList {
  display: none;
}

.EditProfileContainer__profileHeadTitle.EditProfileContainer__profileTitle {
  display: none;
}

#title_field_countryLocale {
  display: none;
}

#field_countryLocale {
  display: none;
}

.ManageAccount__boxList {
    padding-top: 0.5rem;
}

#field_subject {
  position: relative; 
  margin-bottom:4rem;
}

.fr-ca #field_subject::after {
  content: "Si vous avez plusieurs demandes, veuillez nous les transmettre séparément";
  position: absolute;
  top: 100%;
  left: 0;
  font-size: clamp(0.8rem, 1vw + 0.5rem, 1rem); 
  font-style: italic;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 1rem;
  pointer-events: none;
  white-space: normal; 
  max-width: 100vw; 
  box-sizing: border-box;
}

.en #field_subject::after {
  content: "If you have multiple requests, please send them to us separately";
  position: absolute;
  top: 100%;
  left: 0;
  font-size: clamp(0.8rem, 1vw + 0.5rem, 1rem); 
  font-style: italic;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 1rem;
  pointer-events: none;
  white-space: normal; 
  max-width: 100vw; 
  box-sizing: border-box;
}

#field_classification {
  position: relative; 
  margin-bottom:9rem;
}

.fr-ca #field_classification::after {
 content: "S'il s'agit d'une plainte visant d'autres résidents, veuillez inscrire leurs adresse complète dans la description. Pour tout autre demande, veuillez nous indiquer dans la description: le type, les composantes, l'emplacement et tout autre détail pértinent";
  position: absolute;
  left: 0;
  font-size: clamp(0.8rem, 1vw + 0.5rem, 1rem); 
  font-style: italic;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 2rem;
  pointer-events: none;
  white-space: normal; 
  max-width: 100vw; 
  box-sizing: border-box;
}

.en #field_classification::after {
 content: "If this is a complaint about other residents, please include their full address in the description. For any other request, please indicate in the description: type, components, location and any other relevant details";
  position: absolute;
  left: 0;
  font-size: clamp(0.8rem, 1vw + 0.5rem, 1rem); 
  font-style: italic;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 2rem;
  pointer-events: none;
  white-space: normal; 
  max-width: 100vw; 
  box-sizing: border-box;
}


#field_description{
  position: relative; 
  margin-top:2rem;
  margin-bottom:9rem;
}

.fr-ca #field_description::after {
  content: "Comme une image vaut mille mots et que nous désirons bien comprendre la nature de votre problématique, veuillez joindre des photos ou vidéos représentative de l'appel de service.";
  position: absolute;
  top: 100%;
  left: 0;
  font-size: clamp(0.8rem, 1vw + 0.5rem, 1rem); 
  font-style: italic;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 3rem;
  pointer-events: none;
  white-space: normal; 
  max-width: 100vw; 
  box-sizing: border-box;
}

.en #field_description::after {
  content: "Since a picture is worth a thousand words and we want to understand the nature of your problem, please attach photos or videos representative of the service call.";
  position: absolute;
  top: 100%;
  left: 0;
  font-size: clamp(0.8rem, 1vw + 0.5rem, 1rem); 
  font-style: italic;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 3rem;
  pointer-events: none;
  white-space: normal; 
  max-width: 100vw; 
  box-sizing: border-box;
}

#field_attachmentIds{
 margin-bottom:3rem;
}

/*Modification de l'affichage "Escaladé interne / externe" 
en "Pris en charge" dans le Portail*/

.escaladé_interne {
  color: transparent;        
  position: relative;
}

.fr-ca .escaladé_interne::after {
  content: "Pris en charge"; 
  color: black;             
  position: absolute;
  left: 0;
  top: 0;
}

.en .escaladé_interne::after {
  content: "Supported"; 
  color: black;             
  position: absolute;
  left: 0;
  top: 0;
}

.escaladé_externe {
  color: transparent;        
  position: relative;
}

.fr-ca .escaladé_externe::after {
  content: "Pris en charge"; 
  color: black;             
  position: absolute;
  left: 0;
  top: 0;
}

.en .escaladé_externe::after {
  content: "Supported"; 
  color: black;             
  position: absolute;
  left: 0;
  top: 0;
}


.Demande{
  color: transparent;        
  position: relative;
  padding-bottom:0.5rem;
}

.fr-ca .Demande::after {
  content: "Informations sur la demande de service"; 
  color: black;             
  position: absolute;
  left: 0;
  top: 0;
}

.en .Demande::after {
  content: "Service Request Information"; 
  color: black;             
  position: absolute;
  left: 0;
  top: 0;
}

/*Ne pas afficher la date d'échéance dans le portail*/
.ticket_duedate{
  display:none;
}
/*Ne pas afficher les demandes en souffrance*/
.My_Overdue_Tickets{
 display:none;
}