/* =======================
   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:2; 
    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"] {
  display:flex;
  padding-right:6rem;
  justify-content:center;
  visibility: hidden;
  position: relative;
}

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

.en [data-id="ticket_module"] {
  display:flex;
  padding-right:6rem;
  justify-content:center;
  visibility: hidden;
  position: relative;
}

.en [data-id="ticket_module"]::after {
  display:block;
  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 concernant d’autres résidents, merci d’inscrire leur adresse dans la description. Pour toute autre demande, n’hésitez pas à ajouter le plus de détails possible, par exemple : la composante touchée, l’emplacement du problème, etc.";
  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 the complaint concerns other residents, please include their address in the description. For all other requests, please provide as many details as possible, such as the affected component, the location of the problem, etc.";
  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 souhaitons bien comprendre la nature de votre problématique, merci de joindre des photos ou vidéos représentatives à votre demande 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 fully understand the nature of your issue, please attach representative photos or videos to your service request.";
  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;
}

/*RATING Container*/
#topcontainer{
background:#fff !important;
}